<template>
  <div class="tabs-detail">
    <div v-if="deviceDetail?.deviceInfo?.avatar">
      <p>{{ t('business.deviceImageText') }}</p>
      <Image :src="deviceDetail.deviceInfo.avatar" :width="200" />
    </div>
    <div>
      <div class="flex" style="align-items: center">
        <div>{{ t('deviceManagement.device.deviceInfoText') }}</div>
        <Tooltip
          :title="t('deviceManagement.device.topicHelpText')"
          @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="t('deviceManagement.device.deviceTopicText')"
          :canFullscreen="false"
          :minHeight="50"
          :height="50"
          :useWrapper="false"
        >
          <div v-if="deviceDetail.deviceType === DeviceTypeEnum.GATEWAY" class="flex">
            <div> {{ t('enum.deviceType.GATEWAY') }}Topic : v1/gateway/telemetry </div>
            <a-button
              size="small"
              class="ml-4"
              @click="copyTopic('v1/gateway/telemetry')"
              color="success"
            >
              {{ t('common.copyText') }}
            </a-button>
          </div>
          <div v-if="deviceDetail.deviceType === DeviceTypeEnum.DIRECT_CONNECTION" class="flex">
            <div>{{ t('enum.deviceType.DIRECT_CONNECTION') }}Topic : v1/devices/me/telemetry </div>
            <a-button
              size="small"
              class="ml-4"
              @click="copyTopic('v1/devices/me/telemetry')"
              color="success"
            >
              {{ t('common.copyText') }}
            </a-button>
          </div>
        </BasicModal>
      </div>
      <Description @register="register" class="mt-4" :data="deviceDetail" :contentStyle="CS" />
    </div>
    <div class="mt-4" v-if="!isCustomer">
      <a-button type="primary" class="mr-4" @click="copyTbDeviceId">
        {{ t('common.copyText') }}{{ t('business.deviceText') }}ID
      </a-button>
      <a-button type="primary" class="mr-4" @click="copyDeviceToken">
        {{ t('common.copyText') }}{{ t('deviceManagement.device.accessTokenText') }}
      </a-button>
      <Authority value="api:yt:device:equipment">
        <a-button type="primary" class="mr-4" @click="manageDeviceToken">
          {{ t('deviceManagement.device.managementDeviceCertificateText') }}
        </a-button>
      </Authority>
      <ManageDeviceTokenModal @register="registerModal" />
    </div>
    <div class="mt-4">
      <p>{{ t('business.deviceLocationText') }}</p>
      <div v-if="deviceDetail?.deviceInfo?.address">
        <div ref="mapWrapRef" style="height: 550px; width: 100%"></div>
      </div>
      <Empty
        v-if="!deviceDetail?.deviceInfo?.address"
        :image="locationImage"
        :imageStyle="{ display: 'flex', 'justify-content': 'center', height: '150px' }"
        :description="t('deviceManagement.device.addLocationPlaceholderText')"
      />
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, unref, nextTick } from 'vue';
  import { Empty, Image, Tooltip } from 'ant-design-vue';
  import { descSchema } from '../../config/detail.config';
  import { useAsyncScript } from '/@/hooks/web/useAsyncScript';
  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 { useAuthDeviceDetail } from '../../hook/useAuthDeviceDetail';
  import { useClipboard } from '@vueuse/core';
  import wz from '/@/assets/images/wz.png';
  import { useAsyncQueue } from '../../../localtion/useAsyncQueue';
  import locationImage from '/@/assets/icons/location.svg';
  import { Authority } from '/@/components/Authority';
  import { useI18n } from '/@/hooks/web/useI18n';

  export default defineComponent({
    components: {
      Image,
      Description,
      ManageDeviceTokenModal,
      QuestionCircleOutlined,
      BasicModal,
      Tooltip,
      Empty,
      Authority,
    },
    props: {
      deviceDetail: {
        type: Object,
        required: true,
      },
    },
    emits: ['open-gateway-device'],
    setup(props, { emit }) {
      const { t } = useI18n();
      const [register] = useDescription({
        layout: 'vertical',
        schema: descSchema(emit),
        column: 2,
      });

      const CS = {
        'max-width': '600px',
        'word-break': 'break-all',
        overflow: 'hidden',
        display: '-webkit-box',
        '-webkit-line-clamp': 2,
        '-webkit-box-orient': 'vertical',
      };

      // 地图
      const mapWrapRef = ref<HTMLDivElement>();

      const { executeFlag, setTask } = useAsyncQueue();
      const { isCustomer } = useAuthDeviceDetail();
      const { toPromise } = useAsyncScript({ src: BAI_DU_MAP_URL });

      async function initMap(longitude: number, latitude: number, address: string) {
        if (!(window as any).BMap) {
          setTask(() => markerMap(longitude, latitude, address));
          let interval: Nullable<NodeJS.Timer> = setInterval(() => {
            if ((window as any).BMap) {
              executeFlag.value = true;
              clearInterval(interval!);
              interval = null;
            }
          }, 300);
          await toPromise();
          return;
        }
        markerMap(longitude, latitude, address);
      }

      async function markerMap(longitude: number, latitude: number, address: string) {
        await nextTick();
        const wrapEl = unref(mapWrapRef);
        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 { copied, copy } = useClipboard({ legacy: true });

      const copyTbDeviceId = async () => {
        await copy(props.deviceDetail.tbDeviceId);
        if (unref(copied)) {
          createMessage.success(t('common.copyOk'));
        }
      };
      const copyDeviceToken = async () => {
        const token = await getDeviceToken(props.deviceDetail.tbDeviceId);
        if (token.credentialsType === 'ACCESS_TOKEN') {
          await copy(token.credentialsId);
        } else {
          await copy(token.credentialsValue);
        }
        if (unref(copied)) {
          createMessage.success(t('common.copyOk'));
        }
      };
      const [registerModal, { openModal }] = useModal();
      const manageDeviceToken = async () => {
        const token = await getDeviceToken(props.deviceDetail.tbDeviceId);
        openModal(true, token);
      };
      const copyTopic = async (val) => {
        await copy(JSON.parse(JSON.stringify(unref(val), null, 2)));
        if (unref(copied)) {
          createMessage.success(t('common.copyOk'));
        }
      };

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

      return {
        t,
        mapWrapRef,
        copyTbDeviceId,
        copyDeviceToken,
        initMap,
        manageDeviceToken,
        registerModal,
        register,
        openTopicModal,
        registerTopicModal,
        DeviceTypeEnum,
        copyTopic,
        remoteConnectiondGateway,
        locationImage,
        isCustomer,
        CS,
      };
    },
  });
</script>
<style lang="less" scoped></style>