<template>
  <Descriptions bordered>
    <template #title>
      设备信息
      <PermissionButton type="link" @click="visible = true">
        <template #icon><JAIcon type="EditOutlined" /></template>
        编辑
      </PermissionButton>
    </template>
    <DescriptionsItem label="设备ID">
      <div style="display: flex">
        <div style="flex: 1">
          <Ellipsis> {{ instanceStore.current?.id }} </Ellipsis>
        </div>
        <div v-if="instanceStore.current?.accessProvider === 'plugin_gateway'">
          <Tooltip>
            <template #title>
              <p>通过调用SDK或HTTP请求的方式接入第三方系统设备数据时，第三方系统与平台当前设备对应的设备ID。</p>
              如双方ID值一致，则无需填写
            </template>
            <a v-if="!inklingDeviceId" type="link" @click="giveAnInkling"> 未映射 </a>
            <a v-else type="link" @click="inkingVisible = true"> 已映射 </a>
          </Tooltip>
        </div>
      </div>
    </DescriptionsItem>
    <DescriptionsItem label="产品名称">{{ instanceStore.current?.productName }}</DescriptionsItem>
    <DescriptionsItem label="设备类型">{{ instanceStore.current?.deviceType?.text }}</DescriptionsItem>
    <DescriptionsItem label="固件版本">{{ instanceStore.current?.firmwareInfo?.version }}</DescriptionsItem>
    <DescriptionsItem label="连接协议">{{ instanceStore.current?.transport }}</DescriptionsItem>
    <DescriptionsItem label="消息协议">{{ instanceStore.current?.protocolName }}</DescriptionsItem>
    <DescriptionsItem label="创建时间">{{
      instanceStore.current?.createTime ? dayjs(instanceStore.current?.createTime).format('YYYY-MM-DD HH:mm:ss') : ''
    }}</DescriptionsItem>
    <DescriptionsItem label="注册时间">{{
      instanceStore.current?.registerTime ? dayjs(instanceStore.current?.registerTime).format('YYYY-MM-DD HH:mm:ss') : ''
    }}</DescriptionsItem>
    <DescriptionsItem label="最后上线时间">{{
      instanceStore.current?.onlineTime ? dayjs(instanceStore.current?.onlineTime).format('YYYY-MM-DD HH:mm:ss') : ''
    }}</DescriptionsItem>
    <DescriptionsItem label="父设备" v-if="instanceStore.current?.deviceType?.value === 'childrenDevice'">{{
      instanceStore.current?.parentId
    }}</DescriptionsItem>
    <DescriptionsItem label="说明">{{ instanceStore.current?.description }}</DescriptionsItem>
  </Descriptions>
  <Config />
  <Tags v-if="instanceStore.current?.tags && instanceStore.current?.tags.length > 0" />
  <Relation v-if="instanceStore.current?.relations && instanceStore.current?.relations.length > 0" />
  <Save v-if="visible" :data="instanceStore.current" @close="visible = false" @save="saveBtn" />
  <InkingModal
    v-if="inkingVisible"
    :id="inklingDeviceId"
    :accessId="instanceStore.current.accessId"
    :pluginId="channelId"
    @cancel="inkingVisible = false"
    @submit="saveInkling"
  />
</template>

<script lang="ts" setup>
  import { useInstanceStore } from '@jdlinker/func';
  import Save from '../../Save/index.vue';
  import Config from './components/Config/index.vue';
  import Tags from './components/Tags/index.vue';
  import Relation from './components/Relation/index.vue';
  import InkingModal from './components/InklingModal';
  import dayjs from 'dayjs';
  import { detail as queryPluginAccessDetail } from '../../../../../api/link/accessConfig';
  import { getPluginData } from '../../../../../api/link/plugin';
  import { PermissionButton } from '@jdlinker/ui';
  import { ref, watch } from 'vue';
  // @ts-ignore
  import { AIcon as JAIcon, Descriptions, DescriptionsItem, Ellipsis, Tooltip } from 'linker-ui-components';

  const visible = ref<boolean>(false);
  const inkingVisible = ref<boolean>(false);
  const instanceStore = useInstanceStore();
  const inklingDeviceId = ref();
  const channelId = ref();

  const saveBtn = () => {
    if (instanceStore.current?.id) {
      instanceStore.refresh(instanceStore.current?.id);
    }
    visible.value = false;
  };

  const saveInkling = (id: string) => {
    if (instanceStore.current?.id) {
      instanceStore.refresh(instanceStore.current?.id);
    }
    channelId.value = id;
    queryInkling();
    inkingVisible.value = false;
  };

  const giveAnInkling = () => {
    inkingVisible.value = true;
  };

  const queryInkling = () => {
    if (instanceStore.current?.accessProvider === 'plugin_gateway') {
      queryPluginAccessDetail(instanceStore.current?.accessId).then(async (res) => {
        if (res.success) {
          channelId.value = res.result.channelId;
          const pluginRes = await getPluginData('device', channelId.value, instanceStore.current?.id);
          if (pluginRes.success) {
            inklingDeviceId.value = pluginRes.result?.externalId;
          }
        }
      });
    }
  };

  watch(
    () => instanceStore.current?.id,
    () => {
      if (instanceStore.current?.id) {
        queryInkling();
      }
    },
    { immediate: true }
  );
</script>
<style scoped lang="less">
  :deep(.ant-descriptions-item-content) {
    padding: 16px 12px;
  }
</style>
