<!-- 配置信息 -->
<template>
  <Descriptions bordered>
    <template #title>
      <div style="display: flex">
        <h3>配置信息</h3>
        <PermissionButton type="link" @click="editConfig">
          <template #icon><JAIcon type="EditOutlined" /></template>
        </PermissionButton>
      </div>
    </template>
    <DescriptionsItem label="ID">
      <Ellipsis>{{ productStore.current.id }}</Ellipsis>
    </DescriptionsItem>
    <DescriptionsItem label="产品分类">
      <Ellipsis>{{ productStore.current.classifiedName }}</Ellipsis>
    </DescriptionsItem>
    <DescriptionsItem label="设备类型">{{ productStore.current.deviceType?.text }}</DescriptionsItem>
    <DescriptionsItem label="接入方式">
      <PermissionButton type="link" @click="changeTables">{{
        productStore.current.accessName ? productStore.current.accessName : '配置接入方式'
      }}</PermissionButton>
    </DescriptionsItem>
    <DescriptionsItem label="创建时间">
      {{ dayjs(productStore.current.createTime).format('YYYY-MM-DD HH:mm:ss') }}
    </DescriptionsItem>
    <DescriptionsItem label="更新时间">
      {{ dayjs(productStore.current.modifyTime).format('YYYY-MM-DD HH:mm:ss') }}
    </DescriptionsItem>
    <DescriptionsItem label="说明">
      {{ productStore.current.describe }}
    </DescriptionsItem>
  </Descriptions>

  <!-- 编辑 -->
  <Save ref="saveRef" :isAdd="isAdd" :title="title" @success="refresh" />
</template>

<script lang="ts" setup>
  import { useProductStore } from '@jdlinker/func';
  import Save from '../../Save/index.vue';
  import dayjs from 'dayjs';
  import { PermissionButton } from '@jdlinker/ui';
  import { ref } from 'vue';
  // @ts-ignore
  import { AIcon as JAIcon, Descriptions, DescriptionsItem, Ellipsis } from 'linker-ui-components';

  const productStore = useProductStore();
  const saveRef = ref();
  const isAdd = ref(2);
  const title = ref('编辑');
  /**
   * 编辑配置信息
   */
  const editConfig = () => {
    saveRef.value.show(productStore.current);
  };
  /**
   * 切换tabs
   */
  const changeTables = () => {
    productStore.tabActiveKey = 'Device';
    console.log(productStore.tabActiveKey);
  };
  /**
   * 修改成功刷新
   */
  const refresh = () => {
    productStore.refresh(productStore.current.id as string);
  };
</script>

<style scoped lang="less">
  :deep(.ant-descriptions-item-content) {
    padding: 16px 12px;
  }
</style>
