<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 { scheduleLogDetailSchema } from './config.data';
  import { Description } from '/@/components/Description/index';
  import { useDescription } from '/@/components/Description';
  import { schedueLogDetailPage } from '/@/api/schedue/schedueManager';

  const heightNum = ref(800);
  let personData = reactive({});
  const [registeDesc, { setDescProps }] = useDescription({
    data: personData,
    schema: scheduleLogDetailSchema,
    column: 3,
  });
  const [register] = useModalInner(async (data) => {
    const res = await schedueLogDetailPage(data.record.jobId, data.record.id);
    if (res.code === 200) {
      nextTick(() => {
        for (let i in res.data) {
          Reflect.set(personData, i, res.data[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;
  }
</style>