<template>
  <a-card>
  <template #title>
    <a-row :gutter="[8, 8]" align="middle" >
      <a-col> <h1>{{state.model?.modelLabel}}</h1> </a-col>
      <a-col>
          <span class="subtitle" >ID: {{modelType === 'model' ? state.model?.id : modelId}}</span>
          <a-divider type="vertical" style="height: 10px; width: 6px; border-color: #7cb305"  />
          <span v-if="modelType === 'model'" > 注册设备数： <a>{{state.deviceCount}}</a> </span>
        </a-col>
    </a-row>
  </template>
  <h1 v-if="modelType === 'template'" >{{state.model?.modelLabel || "我是默认"}}</h1>
  <a-descriptions
    v-else
    :column="{ xs: 1, sm: 1, md: 2, lg: 2, xl: 2}"
    :labelStyle="{color: '#8a8e99'}"
    :contentStyle="{fontSize: '12px'}"
  >
    <a-descriptions-item label="产品模型名称">{{state.model?.modelLabel}}</a-descriptions-item>
    <a-descriptions-item label="设备类型">{{state.model?.deviceType}}</a-descriptions-item>
    <a-descriptions-item label="协议类型">{{state.model?.transportType}}</a-descriptions-item>
    <a-descriptions-item label="数据类型">{{state.model?.payloadType}}</a-descriptions-item>
    <a-descriptions-item label="产品描述">{{state.model?.modelDescription}}</a-descriptions-item>
  </a-descriptions>
  </a-card>

  <a-card style="margin-top: 20px;" >
    <a-tabs v-model:activeKey="state.activeKey" @change="changeTabs">
      <a-tab-pane  :key="item.key" :tab="item.label" v-for="item in tabsdata">
      </a-tab-pane>
    </a-tabs>
        <ModelDefine v-if="state.activeKey === 0"/>
        <Plugins v-else-if="state.activeKey === 1" />
        <OnlineTest v-else-if="state.activeKey === 2 " />
        <Topic v-else-if="state.activeKey === 3 " />
  </a-card>
</template>

<script lang="ts" setup >
import { DeviceContriller, ModelController } from '@/controller'
import { computed, onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
import ModelDefine from './components/modelDefine.vue'
import OnlineTest from './components/onlineTest.vue'
import Plugins from './components/plugins.vue'
import Topic from './components/topic.vue'

const route = useRoute()

const modelId = route.query.id as string
const modelType = route.query.type as 'model' | 'template'

const state = reactive<{
  model: IOT.API.MODEL.ModelDot | null,
  activeKey: number,
  deviceCount: string
}>({
  model: null,
  activeKey: 0,
  deviceCount: ''
})

const tabsdata = computed(() => modelType === 'model'
  ? [
      {
        label: '模型定义',
        key: 0
      },
      {
        label: '插件开发',
        key: 1
      },
      {
        label: '在线调试',
        key: 2
      },
      {
        label: 'Topic管理',
        key: 3
      }
    ]
  : [{
      label: '模型定义',
      key: 0
    },
    {
      label: '插件开发',
      key: 1
    }])

const getDeviceCount = async () => {
  const data = await DeviceContriller.statistics({ modelId: modelId })
  state.deviceCount = data.find(item => item.key === 'TOTAL')!.value!

  // state.deviceCount = data
}

const changeTabs = (record: number) => {
  console.log(record)
  state.activeKey = record
}

const getModelById = async () => {
  state.model = await ModelController.detail(modelId)
}

const getModelTemplateById = async () => {
  state.model = await ModelController.modelTemplateById(modelId)
}

onMounted(() => {
  modelType === 'model' ? getModelById() : getModelTemplateById()

  getDeviceCount()
})

</script>

<style lang="less" scoped >
@import "~@/styles/theme.less";
.subtitle {
  font-size: 12px;
  color: @label-color;
}
</style>
