<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({
  title: '任务详细信息',
  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>