<template>
  <modulen>
    <template #title>视频数据监测</template>
    <template v-if="true">
      <div class="data-content">
        <TableTem :tableData="tableData" :tableColums="tableColums" />
      </div>
    </template>
  </modulen>
</template>
<script>
import TableTem from '@/components/tableTem/index.vue'
import { ref, watch, onMounted, inject } from 'vue'
import { getVideoStatusCount } from '@/api/dataMonitor'
import { video_tableColums } from './config'
export default {
  components: { TableTem },
  setup() {
    let tableData = ref([])
    const tableColums = video_tableColums
    const selectRoadId = inject('selectRoadId')
    const searchParams = inject('searchParams')

    const getVideoData = async () => {
      const  { msgState, msgContent } = await getVideoStatusCount(searchParams.value)
      if (msgState === 'SUCCESS' && msgContent) {
        tableData.value = msgContent
      } else {
        tableData.value = []
      }
    }
    onMounted(() => {
      getVideoData()
    })
    watch(selectRoadId, () => {
      getVideoData()
    }, {deep: true})
    return {
      tableData,
      tableColums,
      selectRoadId,
    }
  }
}
</script>
