<template>
  <BasicModal
    v-bind="$attrs"
    :width="600"
    title="编辑报警日程"
    centered
    @register="registerModal"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <BasicForm @register="registerForm" ref="basicFormRef">
      <template #customEnable>
        <template v-for="(item, optionIndex) in options" :key="item.flag">
          <div :class="optionIndex >= 1 ? 'mt-4' : ''">
            <Checkbox v-model:checked="item.enabled">星期{{ item.flag }}</Checkbox>
            <TimePicker
              size="small"
              placeholder="开始时间"
              v-model:value="item.startsOn"
              value-format="x"
              format="HH:mm"
              :disabled="!item.enabled"
            />
            ~
            <TimePicker
              size="small"
              placeholder="结束时间"
              v-model:value="item.endsOn"
              value-format="x"
              format="HH:mm"
              :disabled="!item.enabled"
            /> </div
        ></template>
      </template>
      <template #timing>
        <TimePicker
          size="small"
          placeholder="开始时间"
          v-model:value="timeState.startsOn"
          value-format="x"
          format="HH:mm"
        />
        ~
        <TimePicker
          size="small"
          placeholder="结束时间"
          v-model:value="timeState.endsOn"
          value-format="x"
          format="HH:mm"
        />
      </template>
    </BasicForm>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { reactive, ref, watch, nextTick } from 'vue';
  import { useModalInner, BasicModal } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { alarmScheduleSchemas } from '../config/config.data.ts';
  import { Checkbox, TimePicker } from 'ant-design-vue';
  const emit = defineEmits(['register', 'cancel']);
  const [registerForm, { setFieldsValue, getFieldsValue }] = useForm({
    showActionButtonGroup: false,
    schemas: alarmScheduleSchemas,
  });
  const timeState = reactive({
    startsOn: null,
    endsOn: null,
  });

  const options = ref([
    {
      enabled: false,
      dayOfWeek: 1,
      flag: '一',
      endsOn: null,
      startsOn: null,
    },
    {
      enabled: false,
      dayOfWeek: 2,
      flag: '二',
      endsOn: null,
      startsOn: null,
    },
    {
      enabled: false,
      dayOfWeek: 3,
      flag: '三',
      endsOn: null,
      startsOn: null,
    },
    {
      enabled: false,
      dayOfWeek: 4,
      flag: '四',
      endsOn: null,
      startsOn: null,
    },
    {
      enabled: false,
      dayOfWeek: 5,
      flag: '五',
      endsOn: null,
      startsOn: null,
    },
    {
      enabled: false,
      dayOfWeek: 6,
      flag: '六',
      endsOn: null,
      startsOn: null,
    },
    {
      enabled: false,
      dayOfWeek: 7,
      flag: '日',
      endsOn: null,
      startsOn: null,
    },
  ]);
  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
  let index = ref(null);
  watch(
    options,
    (newValue) => {
      const arr = [];
      for (let item of newValue) {
        if (item.enabled && item.startsOn && item.endsOn) {
          arr.push(true);
        } else if ((!item.enabled && item.startsOn && item.endsOn) || item.enabled) {
          arr.push(false);
        }
      }
      console.log(arr);
      const flag = arr.length ? !arr.every((item) => item) : true;
      console.log(flag);
      nextTick(() => {
        setModalProps({
          okButtonProps: {
            disabled: flag,
          },
        });
      });
    },
    {
      deep: true,
    }
  );

  const [registerModal, { closeModal, setModalProps }] = useModalInner((data) => {
    watch([timeState, basicFormRef.value.formModel], ([timeState, formModel]) => {
      setModalProps({
        okButtonProps: {
          disabled:
            timeState.startsOn === null ||
            timeState.endsOn === null ||
            !formModel.daysOfWeek?.length,
        },
      });
      watch(
        () => formModel.schedule,
        () => {
          timeState.startsOn = null;
          timeState.endsOn = null;
        }
      );
    });
    const { value, currentIndex, isUpdate, scheduleData } = data;
    index.value = currentIndex;
    const dayZenoTime = Math.round(new Date(new Date().toLocaleDateString()).getTime());
    // 编辑
    setFieldsValue({
      schedule: value,
    });
    if (isUpdate) {
      nextTick(() => {
        // 回显定时启用
        if (scheduleData.type === 'SPECIFIC_TIME') {
          setFieldsValue({
            daysOfWeek: scheduleData.daysOfWeek,
          });
          timeState.startsOn = scheduleData.startsOn + dayZenoTime + '';
          timeState.endsOn = scheduleData.endsOn + dayZenoTime + '';
        }
        // 回显自定义启用
        if (scheduleData.type === 'CUSTOM') {
          for (let [index, item] of scheduleData?.items.entries()) {
            if (item.enabled) {
              options.value[index].enabled = item.enabled;
              options.value[index].startsOn = item.startsOn + dayZenoTime + '';
              options.value[index].endsOn = item.endsOn + dayZenoTime + '';
            }
          }
        }
      });
    }
  });
  const scheduleData = ref({
    type: 'ANY_TIME',
  });
  const handleOk = () => {
    const { schedule: type, timezone, daysOfWeek } = getFieldsValue();
    // 获取当天0时时间戳
    const dayZenoTime = Math.round(new Date(new Date().toLocaleDateString()).getTime());
    if (type === 'CUSTOM') {
      const items = options.value.map((item) => {
        return {
          startsOn: item.startsOn ? item.startsOn - dayZenoTime : 0,
          endsOn: item.endsOn ? item.endsOn - dayZenoTime : 0,
          dayOfWeek: item.dayOfWeek,
          enabled: item.enabled,
        };
      });
      scheduleData.value = {
        type,
        timezone,
        items,
      };
    } else if (type === 'SPECIFIC_TIME') {
      scheduleData.value = {
        type,
        timezone,
        daysOfWeek,
        startsOn: timeState.startsOn - dayZenoTime,
        endsOn: timeState.endsOn - dayZenoTime,
      };
    }
    closeModal();
  };
  const handleCancel = () => {
    emit('cancel', index.value);
  };

  defineExpose({
    scheduleData,
  });
</script>

<style lang="less" scoped></style>