<template>
  <div class="tabs-detail">
    <div v-if="deviceDetail?.deviceInfo?.avatar">
      <p>设备图片</p>
      <Image :src="deviceDetail.deviceInfo.avatar" :width="100" />
    </div>
    <div>
      <p>设备信息</p>
      <Description @register="register" class="mt-4" :data="deviceDetail" />
    </div>
    <div class="mt-4">
      <a-button type="primary" class="mr-4" @click="copyTbDeviceId">复制设备ID</a-button>
      <a-button type="primary" class="mr-4" @click="copyDeviceToken">复制访问令牌</a-button>
      <a-button type="primary" @click="manageDeviceToken">管理设备凭证</a-button>
      <ManageDeviceTokenModal @register="registerModal" />
    </div>
    <div v-if="deviceDetail?.deviceInfo?.address" class="mt-4">
      <p>设备位置</p>
      <div ref="wrapRef" style="height: 550px; width: 100%"></div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, unref, nextTick } from 'vue';
  import { Image } from 'ant-design-vue';
  import { descSchema } from '../../config/detail.config';
  import { useScript } from '/@/hooks/web/useScript';
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
  import { useModal } from '/@/components/Modal';
  import ManageDeviceTokenModal from '../modal/ManageDeviceTokenModal.vue';
  import { getDeviceToken } from '/@/api/device/deviceManager';
  import { Description, useDescription } from '/@/components/Description';
  import wz from '/@/assets/images/wz.png';

  export default defineComponent({
    components: {
      Image,
      Description,
      ManageDeviceTokenModal,
    },
    props: {
      deviceDetail: {
        type: Object,
        required: true,
      },
    },
    setup(props) {
      console.log(props.deviceDetail);
      const [register] = useDescription({
        layout: 'vertical',
        schema: descSchema,
        column: 2,
      });

      // 地图
      const wrapRef = ref<HTMLDivElement | null>(null);
      const { toPromise } = useScript({ src: BAI_DU_MAP_URL });

      async function initMap(longitude, latitude, address) {
        await toPromise();
        await nextTick();
        const wrapEl = unref(wrapRef);
        const BMap = (window as any).BMap;
        if (!wrapEl) return;
        const map = new BMap.Map(wrapEl);
        let myIcon = new BMap.Icon(wz, new BMap.Size(20, 30));

        const point = new BMap.Point(Number(longitude), Number(latitude));
        var content = `我在 ${address}`;
        var label = new BMap.Label(content, {
          // 创建文本标注
          position: point,
          offset: new BMap.Size(15, -35),
        });
        map.addOverlay(label); // 将标注添加到地图中
        label.setStyle({
          // 设置label的样式
          color: '#000',
          fontSize: '10px',
          border: '1px solid #1E90FF',
        });
        let marker = new BMap.Marker(point, { icon: myIcon });
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom(true);
        map.addOverlay(marker);
      }
      const { createMessage } = useMessage();
      const { clipboardRef } = useCopyToClipboard();
      const copyTbDeviceId = () => {
        clipboardRef.value = props.deviceDetail.tbDeviceId;
        if (unref(clipboardRef)) {
          createMessage.success('复制成功~');
        }
      };
      const copyDeviceToken = async () => {
        const token = await getDeviceToken(props.deviceDetail.tbDeviceId);
        if (token.credentialsType === 'ACCESS_TOKEN') {
          clipboardRef.value = token.credentialsId;
        } else {
          clipboardRef.value = token.credentialsValue;
        }
        createMessage.success('复制成功~');
      };
      const [registerModal, { openModal }] = useModal();
      const manageDeviceToken = async () => {
        const token = await getDeviceToken(props.deviceDetail.tbDeviceId);
        openModal(true, token);
      };

      return {
        wrapRef,
        copyTbDeviceId,
        copyDeviceToken,
        initMap,
        manageDeviceToken,
        registerModal,
        register,
      };
    },
  });
</script>
<style lang="less" scoped></style>