<template>
  <a-row>
    <a-col :span="24" >
      <a-table
        :columns="columns"
        :loading="state.loading"
        :data-source="state.dataSource"
      >
        <template #bodyCell="{column, record}" >
          <template v-if="column.key === 'deviceStatus'" >
            <a-tag :color="record.deviceStatus.color" >{{record.deviceStatus.name}}</a-tag>
          </template>
          <template v-if="column.key === 'deviceNodeType'" >
            {{record.deviceNodeType == 'GATEWAY' ? '直连类型' : '非直连类型' }}
          </template>
          <template  v-if="column.key === 'action'" >
            <a-space>
              <a @click="goDebugPage(record)">调试</a>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup >
import { EventController, DeviceContriller } from '@/controller/index'
import { onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'

const columns = [

  {
    title: '设备ID',
    dataIndex: 'id'
  },
  {
    title: '设备名称',
    dataIndex: 'deviceLabel'
  },
  {
    title: '设备标识码',
    dataIndex: 'deviceCode'
  },
  {
    title: '设备描述',
    dataIndex: 'deviceDescription'
  },
  {
    title: '节点类型',
    dataIndex: 'deviceNodeType',
    key: 'deviceNodeType'
  },
  {
    title: '所属产品',
    dataIndex: 'modelLabel'
  },
  {
    title: '状态',
    dataIndex: 'deviceStatus',
    key: 'deviceStatus'
  },
  {
    title: '操作',
    key: 'action'
  }
]

const route = useRoute()

const modelId = route.query.id as string
const state = reactive({
  loading: false,
  dataSource: [],
  queryParams: {
    page: 1,
    pageSize: 200,
    total: 0,
    modelId: modelId
  }
})

const goDebugPage = (record) => {
  route.push({ path: '/devOps/onlineTest', query: { deviceId: record.id } })
}

const getDevicePage = async () => {
  state.loading = true
  const { data, sum } = await DeviceContriller.page({ page: 1, pageSize: 200, modelId: modelId })
  state.loading = false
  state.dataSource = data
  state.queryParams.total = sum
}

onMounted(() => {
  getDevicePage()
})
</script>

<style>
</style>
