<template>
  <a-card>
    <a-row>
      <a-col></a-col>
    </a-row>
    <a-table
      :loading="state.loading"
      :columns="columns"
      :data-source="state.dataSource"
      :pagination="false"
    >
      <template #bodyCell="{column, record}" >
        <template v-if="column.key === 'action'"  >
          <a-space>
            <a @click="openLive(record)" >实时播放</a>
            <a @click="closeSteram(record.Path)" >关闭视频流</a>
          </a-space>
        </template>
      </template>
    </a-table>
  </a-card>

  <modal-pro
    style="width: 700px;"
    label="视频流详情"
    :open="state.visible"
    @cancel="state.visible = false"
    @ok="state.visible = false"
    destroyOnClose
  >
    <video-player-tsx :video-url="useFlvUrl(state.detail.Path!)" />
  </modal-pro>
</template>

<script lang="ts" setup >
import { RtsController } from '@/controller/rts'
import { onMounted, reactive } from 'vue'
import { VideoPlayerTsx } from '@/components/VideoPlayer/index'
import { useFlvUrl } from '@/hooks/index'

const columns = [
  {
    title: 'StreamPath',
    dataIndex: 'Path',
    key: 'Path'
  },
  {
    title: '视频流状态',
    dataIndex: 'State',
    key: 'State'
  },
  {
    title: '订阅拉流数量',
    dataIndex: 'Subscribers',
    key: 'Subscribers'
  },
  {
    title: '音视频轨道',
    dataIndex: 'Tracks',
    key: 'Tracks'
  },
  {
    title: '开始时间',
    dataIndex: 'StartTime',
    key: 'StartTime'
  },
  {
    title: '视频流类型',
    dataIndex: 'Type',
    key: 'Type'
  },
  {
    title: 'BPS',
    dataIndex: 'BPS',
    key: 'BPS'
  },
  {
    title: '操作',
    key: 'action'
  }
]

const queryParamsState = reactive({

})

const state = reactive<{
  loading: boolean,
  dataSource: RTS.STREAM.Detail[]
  detail: Partial<RTS.STREAM.Detail>
  visible: boolean
}>({
  loading: false,
  dataSource: [],
  detail: {},
  visible: false
})

const openLive = (record: RTS.STREAM.Detail) => {
  state.visible = true
  state.detail = record
}

const openModal = (record: RTS.STREAM.Detail) => {
  state.detail = record
  state.visible = false
}

const closeSteram = async (streamPath: string) => {
  await RtsController.cloeStreams(streamPath)
  getStreamList()
}

const getStreamList = async () => {
  const { data } = await RtsController.getStreams()
  state.dataSource = data
}

onMounted(() => {
  getStreamList()
})

</script>

<style></style>
