<template>
  <div class="tabs-detail">
    <div v-if="deviceDetail?.deviceInfo?.avatar">
      <p>设备图片</p>
      <Image :src="deviceDetail.deviceInfo.avatar" :width="200" />
    </div>
    <div>
      <div class="flex" style="align-items: center">
        <div>设备信息</div>
        <Tooltip
          title="帮助"
          @click="openTopicModal"
          placement="right"
          v-if="deviceDetail.deviceType !== DeviceTypeEnum.SENSOR"
        >
          <QuestionCircleOutlined class="ml-2" style="font-size: 1rem" />
        </Tooltip>
        <BasicModal
          @register="registerTopicModal"
          centered
          :footer="null"
          title="设备Topic"
          :canFullscreen="false"
          :minHeight="50"
          :height="50"
          :useWrapper="false"
        >
          <div v-if="deviceDetail.deviceType === DeviceTypeEnum.GATEWAY" class="flex">
            <div> 网关设备Topic : v1/gateway/telemetry </div>
            <a-button
              size="small"
              class="ml-4"
              @click="copyTopic('v1/gateway/telemetry')"
              color="success"
              >复制</a-button
            >
          </div>
          <div v-if="deviceDetail.deviceType === DeviceTypeEnum.DIRECT_CONNECTION" class="flex">
            <div> 直连设备Topic : v1/devices/me/telemetry </div>
            <a-button
              size="small"
              class="ml-4"
              @click="copyTopic('v1/devices/me/telemetry')"
              color="success"
              >复制</a-button
            >
          </div>
        </BasicModal>
      </div>
      <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, Tooltip } 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 { BasicModal, useModal } from '/@/components/Modal';
  import ManageDeviceTokenModal from '../modal/ManageDeviceTokenModal.vue';
  import { getDeviceToken } from '/@/api/device/deviceManager';
  import { Description, useDescription } from '/@/components/Description';
  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
  import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';

  import wz from '/@/assets/images/wz.png';
  export default defineComponent({
    components: {
      Image,
      Description,
      ManageDeviceTokenModal,
      QuestionCircleOutlined,
      BasicModal,
      Tooltip,
    },
    props: {
      deviceDetail: {
        type: Object,
        required: true,
      },
    },
    setup(props) {
      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);
      };
      const copyTopic = (value) => {
        clipboardRef.value = value;
        console.log(clipboardRef.value);
        createMessage.success('复制成功~');
      };

      const [registerTopicModal, { openModal: openTopicModal }] = useModal();

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