<template>
    <a-card>
        <a-row>
            <a-space>
                <a-col>
                    <a-range-picker v-model:value="time" :format="['DD/MM/YYYY', 'DD/MM/YYYY']" />
                </a-col>
                <a-col>
                    <a-button type="primary" @click="getGB28181Record">搜索</a-button>
                </a-col>
            </a-space>
        </a-row>
        <a-table
            style="margin-top: 20px;"
            :columns="columns"
            :data-source="state.dataSource"
            :loading="state.loading">
        </a-table>
    </a-card>
</template>

<script lang="ts" setup >
import { RtsController } from '@/controller/rts'
import { reactive } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const deviceId = route.query.id as string
const time = ref([])
const columns = [
  {
    title: '设备id',
    dataIndex: 'DeviceID'
  },
  {
    title: '名称',
    dataIndex: 'Name'
  },
  {
    title: '文件地址',
    dataIndex: 'FilePath'
  },
  {
    title: '地址',
    dataIndex: 'Address'
  },
  {
    title: '开始时间',
    dataIndex: 'StartTime'
  },
  {
    title: '结束时间',
    dataIndex: 'EndTime'
  },
  {
    title: 'Secrecy',
    dataIndex: 'Secrecy'
  },
  {
    title: 'gps时间',
    dataIndex: 'Type'
  }
]

const state = reactive<{
    dataSource: RTS.GB2881.Record[]
    loading: boolean
    visible: boolean
    deviceId: string
    detail: Partial<RTS.GB2881.Record>
}>({
  loading: false,
  visible: false,
  detail: {},
  deviceId: deviceId,
  dataSource: []
})

const queryParamsState = reactive({
  id: deviceId,
  channel: '',
  startTime: '',
  endTime: ''
})

const getGB28181Record = async () => {
  const { data } = await RtsController.listGB28181(queryParamsState)
  state.dataSource = data
}

watch(
  () => time.value,
  () => {
    queryParamsState.start = time.value[0]
    queryParamsState.end = time.value[1]
  }
)

</script>

<style lang="less" scoped ></style>
