<template>
<a-card>
  <a-table :columns="columns" :data-source="state.dataSource">
    <!-- <template #bodyCell="{ column, text }">
      <template v-if="column.dataIndex === 'name'">
        <a href="javascript:;">{{ text }}</a>
      </template>
    </template> -->
  </a-table>
</a-card>
</template>
<script lang='ts' setup >
import { ModelController } from '@/controller'
import { reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const queryParams = useRoute().query as {id: string}

const columns = [
  {
    title: 'topic分类',
    dataIndex: 'cate',
    customCell: (_, index, column) => {
      if (index === 1) {
        return { rowSpan: 2 }
      } else if (index === 2) {
        return { rowSpan: 0 }
      } else if (index === 3) {
        return { rowSpan: 2 }
      } else if (index === 4) {
        return { rowSpan: 0 }
      }
    }
  },
  {
    title: 'topic',
    dataIndex: 'topic'
  },
  {
    title: '用途',
    dataIndex: 'use'
  }
]

const data = {
  MQTT: [
    { cate: '属性', topic: 'api/{deviceId}/attributes', use: '设备发送属性数据到服务端' },
    { cate: '命令', topic: '/sub/command ', use: '设备订阅命令' },
    { cate: '命令', topic: '/sub/command/ ', use: '服务端发送命令消息到设备' },
    { cate: '消息', topic: 'api/{deviceId}/msg', use: '设备发布消息到服务端' },
    { cate: '消息', topic: '/sub/msg', use: '服务端发送消息到设备' }
  ],
  HTTP: [
    { cate: '属性', topic: 'api/device/{deviceId}/attributes', use: '设备发送属性数据到服务端' }
  ],
  COAP: [
    { cate: '属性', topic: 'api/{deviceId}/attributes', use: '设备发送属性数据到服务端' }
  ]
}

const state = reactive({
  transportType: '',
  dataSource: []
})

const getModelById = async (id: string) => {
  const { transportType } = await ModelController.detail(id)
  state.transportType = transportType

  state.dataSource = data[transportType]
  console.log(state.dataSource)
}

onMounted(() => {
  getModelById(queryParams.id)
})

</script>
<style lang='less' scoped >
</style>
