<template>
  <div class="device-detail-metadata" style="position: relative">
    <div class="tips">
      <Tooltip
        :title="
          instanceStore.detail?.independentMetadata && type === 'device'
            ? '该设备已脱离产品物模型，修改产品物模型对该设备无影响'
            : '设备会默认继承产品的物模型，修改设备物模型后将脱离产品物模型'
        "
      >
        <div class="ellipsis" style="color: #999">
          <JAIcon type="InfoCircleOutlined" style="margin-right: 3px" />
          {{
            instanceStore.detail?.independentMetadata && type === 'device'
              ? '该设备已脱离产品物模型，修改产品物模型对该设备无影响'
              : '设备会默认继承产品的物模型，修改设备物模型后将脱离产品物模型'
          }}
        </div>
      </Tooltip>
    </div>
    <Tabs class="metadataNav" destroyInactiveTabPane type="card">
      <template #rightExtra>
        <Space>
          <PermissionButton
            v-if="type === 'device' && instanceStore.detail?.independentMetadata"
            :popConfirm="{ title: '确认重置？', onConfirm: resetMetadata }"
            :tooltip="{ title: '重置后将使用产品的物模型配置' }"
            key="reload"
          >
            重置操作
          </PermissionButton>
          <PermissionButton @click="visible = true" key="import">快速导入</PermissionButton>
          <PermissionButton @click="cat = true" key="tsl">物模型TSL</PermissionButton>
        </Space>
      </template>

      <TabPane tab="属性定义" key="properties">
        <BaseMetadata :target="type" type="properties" :permission="permission" />
      </TabPane>
      <TabPane tab="功能定义" key="functions">
        <BaseMetadata :target="type" type="functions" :permission="permission" />
      </TabPane>
      <TabPane tab="事件定义" key="events">
        <BaseMetadata :target="type" type="events" :permission="permission" />
      </TabPane>
      <TabPane tab="标签定义" key="tags">
        <BaseMetadata :target="type" type="tags" :permission="permission" />
      </TabPane>
    </Tabs>
    <Import v-if="visible" v-model:visible="visible" :type="type" @close="visible = false" />
    <Cat v-model:visible="cat" @close="cat = false" :type="type" />
  </div>
</template>
<script setup lang="ts" name="Metadata">
  import { ref, computed } from 'vue';
  import { PermissionButton } from '@jdlinker/ui';
  import { deleteMetadata } from '../../../../api/device/instance';
  import { message } from 'ant-design-vue';
  import { useInstanceStore, useMetadataStore, useProductStore } from '@jdlinker/func';
  import Import from './Import/index.vue';
  import Cat from './Cat/index.vue';
  import BaseMetadata from './Base/index.vue';
  import { Space, Tabs, TabPane, Tooltip, AIcon as JAIcon } from 'linker-ui-components';

  const instanceStore = useInstanceStore();
  const metadataStore = useMetadataStore();
  const productStore = useProductStore();

  interface Props {
    type: 'product' | 'device';
    independentMetadata?: boolean;
  }
  const props = defineProps<Props>();

  const permission = computed(() => (props.type === 'device' ? 'device/Instance' : 'device/Product'));
  const visible = ref(false);
  const cat = ref(false);

  // 重置物模型
  const resetMetadata = async () => {
    const id = props.type === 'device' ? instanceStore.current?.id : productStore.current?.id;
    const resp = await deleteMetadata(id as string);
    if (resp.code === 200) {
      message.info('操作成功');
      instanceStore.refresh(id as string).then(() => {
        metadataStore.set('importMetadata', true);
      });
    }
  };
</script>
<style scoped lang="less">
  .device-detail-metadata {
    .tips {
      position: absolute;
      top: 12px;
      z-index: 1;
      margin-left: 420px;
      font-weight: 100;
    }

    //.metadataNav {
    //  :deep(.ant-card-body) {
    //    padding: 0;
    //  }
    //}
  }

  :deep(img) {
    display: inline-flex;
  }
</style>
