<template>

  <!-- <page-header title="首頁" desc="有着一些数据统计" > </page-header> -->
    <a-card
      title="功能介绍"
    >
    <a-row justify="space-between" :gutter="[8, 8]" >
      <a-col :xs='24' :sm="24" :md='24' :lg="14" :xl="14" >
        <a-row :gutter="[8, 8]" justify="space-between" >
          <a-col :span="24"  >
            在物联网平台中，某一类具有相同能力或特征的设备的合集被称为一款产品模型(Profile)。
            如果您希望使用平台查看设备上报的数据信息，并对设备进行管理控制，就需要开发产品模型(Profile)。<br/>
            定义Profile,使平台理解该款设备支持的属性、命令等信息。根据产品的接入协议、数据格式等可能还需要您定义其他相关的内容。
          </a-col>
          <a-col :span="24"  >
            如果你希望对设备上报的数据做一些计算功能,比如将温度除以100并且保留2位小数点,可以采用属性的计算表达式功能,上述案例可以写成表达式 #tem/100.00。当然可以支持更多丰富的功能,具体使用参考SPEL使用手册。
          </a-col>
          <a-col :span="24"   >
            对于二进制的负载数据,支持JavaScript脚本开发完成数据解析,同时对于下发的命令也可以通过插件解析完成数据的encode。
          </a-col>
        </a-row>
      </a-col>
      <a-col :xs='24' :sm="24" :md='24' :lg="8" :xl="8" >
        <img style="width: 100%" :src="staticImg.productIntroduction" alt="">
      </a-col>
    </a-row>

    </a-card>

    <!-- 协议 -->
    <a-card
      style="margin-top: 20px"
    >
      <a-table
        :dataSource="dataSource"
        :columns="columns"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a @click="useCopy(record.address)" >复制</a>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 资源 -->
    <a-card title="资源概览" style="margin-top: 20px"
    >
      <a-row :gutter="[8, 8]" justify="space-between" >
        <a-col
          v-for="item in sourceList"
          :key="item.name"
          class="product-item"
          :xs='24' :sm="24" :md='7' :lg="7" :xl="7"
        >
          <span>{{item.name}}</span>
          <span>{{item.value}}</span>
        </a-col>
      </a-row>
    </a-card>
</template>

<script setup lang="ts" >
import { CommonController, DeviceContriller, ModelController, RuleController } from '@/controller/index'
import { useCopy } from '@/hooks/dom'
import { useStaticImg } from '@/utils/static'
import { nextTick, onMounted, reactive, Ref, ref, watch, watchEffect } from 'vue'

const staticImg = useStaticImg()

const columns = [
  {
    title: '接入协议',
    dataIndex: 'port',
    key: 'port'
  },
  {
    title: '接入地址',
    dataIndex: 'address',
    key: 'address'
  },
  {
    title: '操作',
    key: 'action',
    list: [
      {
        name: '复制',
        use: 'copy',
        bindKey: 'address'
      }
    ]
  }
]

const sourceList = reactive([
  {
    name: '产品数',
    value: '13'
  },
  {
    name: '联动规则',
    value: 26
  },
  {
    name: '转发规则',
    value: '7'
  },
  {
    name: '设备总数',
    value: 99
  },
  {
    name: '在线设备总数',
    value: 23
  },
  {
    name: '激活设备总数',
    value: 88
  }
])

const dataSource = ref([])

const getStatisList = async () => {
  ModelController.count().then(r => {
    // sourceList[0].value = r.data.TOTAL
  })

  DeviceContriller.count().then(r => {
    // sourceList[3].value = r.data.TOTAL
    sourceList[4].value = r.data.CONNECT
    sourceList[5].value = r.data.INIT
  })

  RuleController.forwardCount().then(r => {
    // sourceList[1].value = r.data.TOTAL
  })

  RuleController.linkCount().then(r => {
    // sourceList[2].value = r.data.TOTAL
  })
}

onMounted(() => {
  getStatisList()
  CommonController.getTransport().then(r => {
    dataSource.value = r
  })
})

</script>

<style>
.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(16,103,238,.04);
  height: 40px;
  padding: 0 18px !important;
  box-sizing: border-box;
}
</style>
