<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      width="62rem"
      :height="heightNum"
      @register="register"
      title="任务详细信息"
      @cancel="handleCancel"
      :showOkBtn="false"
      style="font-size: 12px"
    >
      <div>
        <Description :column="3" size="middle" @register="registeDesc" />
      </div>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { ref, nextTick, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { personSchema } from './config.data';
  import { Description } from '/@/components/Description/index';
  import { useDescription } from '/@/components/Description';

  const heightNum = ref(800);
  let personData = reactive({});
  const [registeDesc, { setDescProps }] = useDescription({
    data: personData,
    schema: personSchema,
    column: 3,
  });
  const [register] = useModalInner((data) => {
    nextTick(() => {
      //回显
      for (let i in data.record) {
        Reflect.set(personData, i, data.record[i]);
      }
      setDescProps(personData);
    });
  });
  const handleCancel = () => {};
</script>
<style lang="less" scoped>
  :deep(.vben-basic-title-normal) {
    font-size: 16px;
    font-weight: 500;
  }

  :deep(.vben-collapse-container__header) {
    border-bottom: none;
  }

  :deep(.ant-descriptions-item-label) {
    width: 30rem;
  }

  :deep(.ant-descriptions-item-content) {
    width: 45rem;
  }
</style>