<script lang="ts" setup>
  import { Description, useDescription } from '/@/components/Description';
  import { descSchema } from './config';
  import type { PropType } from 'vue';
  import { unref } from 'vue';
  import edgeDevicePng from '/@/assets/images/edgeDevice.png';
  import { Image, Popconfirm } from 'ant-design-vue';
  import { EdgeDeviceItemType } from '/@/api/edgeManage/model/edgeInstance';
  import { getDeviceToken } from '/@/api/device/deviceManager';
  import { useClipboard } from '@vueuse/core';
  import { useMessage } from '/@/hooks/web/useMessage';
  import ManageDeviceTokenModal from '/@/views/device/list/cpns/modal/ManageDeviceTokenModal.vue';
  import { useModal } from '/@/components/Modal';
  import { edgeDeviceDeleteDistribution } from '/@/api/edgeManage/edgeInstance';
  import { useGo } from '/@/hooks/web/usePage';
  import { useI18n } from '/@/hooks/web/useI18n';

  const emits = defineEmits(['success']);

  const props = defineProps({
    recordData: {
      type: Object as PropType<EdgeDeviceItemType>,
      default: () => {},
    },
    edgeId: {
      type: String,
      default: '',
    },
  });

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

  const [register] = useDescription({
    layout: 'vertical',
    schema: descSchema(),
    column: 5,
  });

  const { t } = useI18n();

  const { createMessage } = useMessage();

  const go = useGo();

  const { copied, copy } = useClipboard({ legacy: true });

  const handleEventIsCopyDeviceToken = async () => {
    if (!props?.recordData?.id?.id) return;
    const token = await getDeviceToken(props?.recordData?.id?.id);
    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 handleEventIsManageDeviceToken = async () => {
    if (!props?.recordData?.id?.id) return;
    const token = await getDeviceToken(props?.recordData?.id?.id);
    openModal(true, token);
  };

  const handleEventIsCancelDistribution = async () => {
    await edgeDeviceDeleteDistribution(props.edgeId, props.recordData.id?.id);
    createMessage.success(t('edge.instance.message.cancelAssignSuccess'));
    emits('success');
    goBack();
  };

  function goBack() {
    go('/edge/edge_detail/' + props.edgeId);
  }
</script>

<template>
  <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
    <a-col class="gutter-row" :span="3">
      <div class="!flex flex-col justify-between items-center">
        <div><Image :src="recordData?.deviceInfo?.avatar || edgeDevicePng" :width="180" /></div>
        <div class="!flex flex-col mt-3">
          <span style="color: #1d2129" class="font-bold">{{
            recordData?.alias ? recordData?.alias : recordData?.name
          }}</span>
          <span style="color: #3d3d3d">
            {{ t('edge.instance.text.edgeDeviceDetail') }}
          </span>
        </div>
      </div>
    </a-col>
    <a-col class="gutter-row" :span="21">
      <div class="!flex flex-col justify-between">
        <Description v-if="recordData" @register="register" :data="recordData" :contentStyle="CS" />
        <div class="!flex mt-3">
          <a-button type="primary" @click="handleEventIsCopyDeviceToken">
            {{ t('edge.instance.action.copyAccessToken') }}
          </a-button>
          <a-button class="ml-4" type="primary" @click="handleEventIsManageDeviceToken">
            {{ t('edge.instance.action.manageAccessToken') }}
          </a-button>
          <Popconfirm
            :title="t('edge.instance.confirm.cancelAssign')"
            @confirm="handleEventIsCancelDistribution"
          >
            <a-button class="ml-4" type="primary">
              {{ t('edge.instance.action.cancelAssign') }}
            </a-button>
          </Popconfirm>
        </div>
      </div>
    </a-col>
  </a-row>
  <ManageDeviceTokenModal @register="registerModal" />
</template>

<style lang="less" scoped>
  :deep(.ant-image-img) {
    height: 157px;
  }
</style>