<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, onMounted, inject, watch } from 'vue'
import { getTollDataMonitor } from '@/api/dataMonitor'
import { toll_tableColums } from './config'
export default {
  components: { TableTem },
  setup() {
    const tableData = ref([])
    const tableColums = toll_tableColums
    const selectRoadId = inject('selectRoadId')
    const searchParams = inject('searchParams')
    const getTollData = async () => {
      const  { msgState, msgContent } = await getTollDataMonitor(searchParams.value)
      if (msgState === 'SUCCESS' && msgContent) {
        tableData.value = msgContent
      } else {
        tableData.value = []
      }
    }
    
    onMounted(() => {
      getTollData()
    })
    watch(selectRoadId, () => {
      getTollData()
    }, {deep: true})
    return {
      tableData,
      tableColums
    }
  }
}
</script>
