<script setup lang="ts">
import {shallowRef} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {Descriptions, DescriptionsItem} from 'ant-design-vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import {renderDict} from "#/utils/render";

dayjs.extend(duration);
dayjs.extend(relativeTime);
import {CheckboxGroup} from 'ant-design-vue'
import {maintainPlanInfo} from "#/api/property/equipmentManagement/maintainPlan";
import type {MaintainPlanVO} from "#/api/property/equipmentManagement/maintainPlan/model";

const [BasicModal, modalApi] = useVbenModal({
  onOpenChange: handleOpenChange,
  onClosed() {
    maintainPlanDetail.value = null;
  },
});

const maintainPlanDetail = shallowRef<null | MaintainPlanVO>(null);

async function handleOpenChange(open: boolean) {
  if (!open) {
    return null;
  }
  modalApi.modalLoading(true);
  const {id} = modalApi.getData() as { id: number | string };
  maintainPlanDetail.value = await maintainPlanInfo(id);
  if (maintainPlanDetail.value.planPeriod == '1') {
    maintainPlanDetail.value.maintainMonth = maintainPlanDetail.value.maintainMonth?.split(',');
    maintainPlanDetail.value.maintainDay = maintainPlanDetail.value.maintainDay?.split(',');
  }
  modalApi.modalLoading(false);
}
const dayArr=Array.from({ length: 31 }, (_, i) => ({
  label: `${i + 1}日`,
  value: (i + 1).toString(),
}));
const monthArr=Array.from({ length: 12 }, (_, i) => ({
  label: `${i + 1}月`,
  value: (i + 1).toString(),
}))
</script>

<template>
  <BasicModal :footer="false" :fullscreen-button="false" title="保养计划详情" class="w-[70%]">
    <Descriptions v-if="maintainPlanDetail" size="small" :column="2" bordered
                  :labelStyle="{width:'100px'}">
      <DescriptionsItem label="计划名称">
        {{ maintainPlanDetail.planName }}
      </DescriptionsItem>
      <DescriptionsItem label="计划编号">
        {{ maintainPlanDetail.planNo }}
      </DescriptionsItem>
      <DescriptionsItem label="保养周期" v-if="maintainPlanDetail.planPeriod!=null">
        <component
          :is="renderDict(maintainPlanDetail.planPeriod,'wy_sbbyzq')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="设备类型">
        {{ maintainPlanDetail.machineTypeId }}
      </DescriptionsItem>
      <DescriptionsItem label="月" :span="2" v-if="maintainPlanDetail.planPeriod=='1'">
        <CheckboxGroup v-model:value="maintainPlanDetail.maintainMonth"
                       :options="monthArr"/>
      </DescriptionsItem>
      <DescriptionsItem label="日" :span="2" v-if="maintainPlanDetail.planPeriod=='1'">
        <CheckboxGroup  v-model:value="maintainPlanDetail.maintainDay"
                        :options="dayArr"/>
      </DescriptionsItem>
      <DescriptionsItem label="固定天数" v-if="maintainPlanDetail.planPeriod=='2'">
       {{maintainPlanDetail.maintainEveryday}}
      </DescriptionsItem>
      <DescriptionsItem label="计划日期" :span="2">
        {{ maintainPlanDetail.startDate + '\xa0至\xa0' + maintainPlanDetail.endDate }}
      </DescriptionsItem>
      <DescriptionsItem label="状态" v-if="maintainPlanDetail.state!=null" :span="2">
        <component
          :is="renderDict(maintainPlanDetail.state,'wy_state')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="保养人员" :span="2">
        <span style="margin-right: 10px;" v-for="item in maintainPlanDetail.machineMaintainPlanStaffVos">
          {{item.userName}}
        </span>
      </DescriptionsItem>
    </Descriptions>
  </BasicModal>
</template>
