<template>

    <a-row  align="middle" style="width: 100%;height: 68px" class="title">
      <a-col  >
        <a-space :size="50" >
          <span>设备名称：{{state.deviceDetail?.deviceLabel}}</span>
          <a-button type="primary" @click="state.visible = true" >修改</a-button>
          <span>设备状态：
            <a-tag :color="DeviceContriller.deviceStatusMap.get(state.deviceDetail?.deviceStatus!)?.color " >
              {{ DeviceContriller.deviceStatusMap.get(state.deviceDetail?.deviceStatus!)?.name  }}
            </a-tag>
          </span>
          <a-tag style="scale: 1.2;" >
            <span>所属产品：{{state.deviceDetail?.modelLabel}}</span>
          </a-tag>
        </a-space>
        </a-col>
    </a-row>
    <a-descriptions
      :column="{ xs: 1, sm: 1, md: 2, lg: 2, xl: 2}"
      :labelStyle="{color: '#8a8e99'}"
      :contentStyle="{fontSize: '12px'}"
      style="margin-top: 20px;"
    >
        <a-descriptions-item label="设备标识码">{{state.deviceDetail?.deviceCode}}</a-descriptions-item>
        <a-descriptions-item label="设备ID">
          <a-space>
            <span>  {{state.deviceDetail?.id}}</span>
            <copy-tsx :text="state.deviceDetail?.id!" />
          </a-space>

        </a-descriptions-item>
        <a-descriptions-item label="认证类型">{{state.deviceDetail?.authType === 'SECRET' ? '密钥认证' : '证书'}}</a-descriptions-item>
        <a-descriptions-item label="设备密钥">
          <a-space>
            <span  >{{ secretState.visible ? secretState.secret : '******' }}</span>
            <span>
              <a-space>
                <eye-invisible-two-tone v-if="secretState.visible" style="font-size: 20px;" @click="secretState.visible = false" />
                <eye-two-tone v-else style="font-size: 20px;" @click="getSecret" />
                <copy-tsx v-if="secretState.visible" :text="secretState.secret" />
              </a-space>

            </span>
          </a-space>
        </a-descriptions-item>
        <a-descriptions-item label="注册时间">{{ dayjs(state.deviceDetail?.createAt).format('YYYY-MM-DD hh:mm:ss') }}</a-descriptions-item>
        <a-descriptions-item label="节点类型">{{ state.deviceDetail?.deviceNodeType === 'GATEWAY' ? '直连' : '非直连'}}</a-descriptions-item>
    </a-descriptions>

    <a-row  justify="space-between" align="middle" style="width: 100%;height: 68px; margin-bottom: 10px;" class="title">
      <a-col>最新上报数据</a-col>
      <!-- <a-col><a-button type="primary" >查看全部属性</a-button></a-col> -->
    </a-row>

    <a-row :gutter="[8, 8]" style="width: 100%;margin-top: 20px;" >
      <a-col :span="24" v-if="state.liveDataSource.length === 0" >
        <a-empty></a-empty>
      </a-col>
      <template v-else >
        <a-col
        :lg="8" :md="8" :sm="24"
        v-for="(item, index) in state.liveDataSource"
        :key="item.ts"
      >
          <div class="data">
            <div>{{item.key}}</div>
            <div>{{item.keyLabel}}</div>
            <div v-if="item.cover" >
              <a-image
                :width="50"
                :src="item.cover"
              />
            </div>
            <a-tooltip>
            <template #title><span> {{item[CommonController.dataTypeByKeyMap.get(item.dataType)]}}</span> <span v-if='item.dataUnit'>{{item.dataUnit}}</span></template>
            <span class="data-type" >{{'<'}}  <div class='elip' >{{item[CommonController.dataTypeByKeyMap.get(item.dataType)]}}</div> <span v-if='item.dataUnit'>{{item.dataUnit}}</span> {{'>'}}</span>
          </a-tooltip>
            <div>{{dayjs(item.ts).format('YYYY/MM/DD HH:MM:ss')}}</div>
          </div>
        </a-col>
      </template>
    </a-row>

  <modal-pro
    label="修改设备名称"
    :open="state.visible"
    @cancel="state.visible = false"
    @ok="ok"
  >
    <a-input allowClear v-model:value="state.deviceLabel"></a-input>
  </modal-pro>
</template>

<script lang="ts" setup >
import { CommonController, DeviceContriller } from '@/controller'
import { useScheduler } from '@/hooks'
import { onMounted, reactive, h } from 'vue'
import { useRoute } from 'vue-router'
import dayjs from 'dayjs'
import { EyeTwoTone, EyeInvisibleTwoTone } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { CopyTsx } from '@/components/MicroComponents/index'

const route = useRoute()
const deviceId = route.query.id as string

interface IProps {
  deviceId: string
}

const props = defineProps<IProps>()

const secretState = reactive({
  visible: false,
  secret: '*******'
})

const state = reactive <{
  deviceDetail: IOT.API.DEVICE.Device | null,
  visible: boolean,
  deviceLabel: string,
  liveDataSource: any[]
} > ({
  deviceDetail: null,
  visible: false,
  deviceLabel: '',
  liveDataSource: []
})

const getSecret = async () => {
  message.info('查询中')
  const { data } = await DeviceContriller.secret({ deviceId: state.deviceDetail!.id, authType: state.deviceDetail!.authType })
  secretState.visible = true
  message.success('查询成功')
  secretState.secret = data
}

const ok = async () => {
  await DeviceContriller.updateLabel({ id: props.deviceId, deviceLabel: state.deviceLabel })
  state.visible = false
  state.deviceDetail = await DeviceContriller.byId(props.deviceId)
  state.deviceLabel = state.deviceDetail.deviceLabel
}

const getLiveData = async () => {
  const { data } = await DeviceContriller.getLiveData(deviceId)
  state.liveDataSource = data
}

const { start } = useScheduler(getLiveData, 1000)

onMounted(async () => {
  state.deviceDetail = await DeviceContriller.byId(props.deviceId)
  state.deviceLabel = state.deviceDetail.deviceLabel
  start()
})

</script>

<style lang="less" scoped >
@import '~@/styles/theme.less';
.title {
  background-color: @bg-color-1;
  padding-left: 40px;
}
.data {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100px;
  margin-bottom: 10px;
  font-weight: 500;
  .data-type {
    display: flex;
    justify-content: center;

    width: 200px;
  }
  .elip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
}

</style>
