<template>
  <div style="margin-top: 20px" v-if="config.length">
    <div style="display: flex; margin-bottom: 20px; align-items: center">
      <div style="font-size: 16px; font-weight: 700">配置</div>
      <Space>
        <PermissionButton type="link" @click="visible = true">
          <template #icon><JAIcon type="EditOutlined" /></template>
          编辑
        </PermissionButton>
        <PermissionButton
          type="link"
          v-if="instanceStore.detail.current?.value !== 'notActive'"
          :popConfirm="{
            title: '确认重新应用该配置？',
            onConfirm: deployBtn
          }"
        >
          <JAIcon type="CheckOutlined" />应用配置<Tooltip title="修改配置后需重新应用后才能生效。"
            ><JAIcon type="QuestionCircleOutlined"
          /></Tooltip>
        </PermissionButton>
        <PermissionButton
          type="link"
          v-if="instanceStore.detail.aloneConfiguration"
          :popConfirm="{
            title: '确认恢复默认配置？',
            onConfirm: resetBtn
          }"
        >
          <JAIcon type="SyncOutlined" />恢复默认<Tooltip title="该设备单独编辑过配置信息，点击此将恢复成默认的配置信息，请谨慎操作。"
            ><JAIcon type="QuestionCircleOutlined"
          /></Tooltip>
        </PermissionButton>
      </Space>
    </div>
    <Descriptions bordered size="small" v-for="i in config" :key="i.name">
      <template #title
        ><h4 style="font-size: 15px">{{ i.name }}</h4></template
      >
      <DescriptionsItem v-for="item in i.properties" :key="item.property">
        <template #label>
          <Ellipsis style="margin-right: 5px">
            {{ item.name }}
            <Tooltip v-if="item.description" :title="item.description"><JAIcon type="QuestionCircleOutlined" /></Tooltip>
          </Ellipsis>
        </template>
        <span v-if="item.type.type === 'password' && instanceStore.current?.configuration?.[item.property]?.length > 0">******</span>
        <span v-else-if="item.type.type === 'enum'">
          <Ellipsis>{{
            item.type.elements?.find((i) => i.value === instanceStore.current?.configuration?.[item.property])?.text || ''
          }}</Ellipsis>
          <Tooltip v-if="isExit(item.property)" :title="`有效值:${instanceStore.current?.configuration?.[item.property]}`"
            ><JAIcon type="QuestionCircleOutlined"
          /></Tooltip>
        </span>
        <span v-else>
          <Ellipsis>{{ instanceStore.current?.configuration?.[item.property] || '' }}</Ellipsis>
          <Tooltip v-if="isExit(item.property)" :title="`有效值:${instanceStore.current?.configuration?.[item.property]}`"
            ><JAIcon type="QuestionCircleOutlined"
          /></Tooltip>
        </span>
      </DescriptionsItem>
    </Descriptions>
    <Save v-if="visible" @save="saveBtn" @close="visible = false" :config="config" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, watchEffect } from 'vue';
  import { useInstanceStore } from '@jdlinker/func';
  import { ConfigMetadata } from '../../../../../Product/typings';
  import { getConfigMetadata, _deploy, configurationReset } from '../../../../../../../api/device/instance';
  import Save from './Save.vue';
  import { onlyMessage } from '@jdlinker/utils';
  import { PermissionButton } from '@jdlinker/ui';
  // @ts-ignore
  import { AIcon as JAIcon, Descriptions, DescriptionsItem, Tooltip, Ellipsis, Space } from 'linker-ui-components';

  const instanceStore = useInstanceStore();
  const visible = ref<boolean>(false);
  const config = ref<ConfigMetadata[]>([]);

  watchEffect(() => {
    if (instanceStore.current.id) {
      getConfigMetadata(instanceStore.current.id).then((resp) => {
        if (resp.code === 200) {
          config.value = resp?.result as ConfigMetadata[];
        }
      });
    }
  });

  const isExit = (property: string) => {
    return (
      instanceStore.current?.cachedConfiguration &&
      instanceStore.current?.cachedConfiguration[property] !== undefined &&
      instanceStore.current?.configuration &&
      instanceStore.current?.configuration[property] !== instanceStore.current?.cachedConfiguration[property]
    );
  };

  const deployBtn = async () => {
    if (instanceStore.current.id) {
      const resp = await _deploy(instanceStore.current.id);
      if (resp) {
        onlyMessage('操作成功');
        instanceStore.refresh(instanceStore.current.id);
      }
    }
  };

  const resetBtn = async () => {
    if (instanceStore.current.id) {
      const resp = await configurationReset(instanceStore.current.id);
      if (resp) {
        onlyMessage('恢复默认配置成功');
        instanceStore.refresh(instanceStore.current.id);
      }
    }
  };

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