<template>
  <BasicModal v-bind="$attrs" width="55rem" @register="register" :title="getTitle">
    <PageWrapper title="设备配置详情">
      <Description @register="register1" class="mt-4" />
    </PageWrapper>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Description, DescItem, useDescription } from '/@/components/Description/index';
  import { PageWrapper } from '/@/components/Page';
  import { deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';

  const schema: DescItem[] = [
    {
      field: 'description',
      label: '描述',
    },
    {
      field: 'enabled',
      label: '禁用',
    },
    {
      field: 'name',
      label: '设备配置名称',
    },
    {
      field: 'transportType',
      label: '传输类型',
    },
  ];
  export default defineComponent({
    name: 'ConfigDrawer',
    components: { BasicModal, Description, PageWrapper },
    emits: ['success', 'register'],
    setup() {
      let descInfo = ref(null);
      const isUpdate = ref(true);
      const [register] = useModalInner(async (data) => {
        isUpdate.value = !!data?.isUpdate;
        let getDescInfo = await deviceConfigGetDetail(data.record.id);
        descInfo.value = getDescInfo;
      });
      const getTitle = computed(() => (!unref(isUpdate) ? '查看设备配置' : '查看设备配置'));
      const [register1] = useDescription({
        title: '详情',
        bordered: false,
        data: descInfo,
        schema: schema,
      });
      return {
        register,
        register1,
        getTitle,
      };
    },
  });
</script>