<template>
  <div class="periodCard">
    <div class="dayRrange">
      <el-select class="daySelect" v-model="startDay" placeholder="开始日期">
        <el-option
          v-for="item in dayOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="endDay && item.value > endDay"
        >
        </el-option>
      </el-select>
      <div class="divider">-</div>
      <el-select class="daySelect" v-model="endDay" placeholder="结束日期">
        <el-option
          v-for="item in dayOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="startDay && item.value < startDay"
        >
        </el-option>
      </el-select>
    </div>
    <div class="timeRange" v-for="(item, index) in timeRangeList">
      <el-time-picker
        v-model="item.startTime"
        format="HH:mm"
        value-format="HH:mm"
        :teleported="false"
        :editable="true"
        placeholder="开始时间"
        :disabled-hours="() => disabledHours(index, false)"
        :disabled-minutes="(hour:number)=>disabledMinutes(hour, index, false)"
      />
      <div class="divider">-</div>
      <el-time-picker
        v-model="item.endTime"
        format="HH:mm"
        value-format="HH:mm"
        :teleported="false"
        :editable="true"
        placeholder="结束时间"
        :disabled-hours="() => disabledHours(index, true)"
        :disabled-minutes="(hour:number)=>disabledMinutes(hour, index, true)"
      />
      <div v-if="index == timeRangeList.length - 1" class="timeAdd" @click="handleAddTimeRange">
        <el-icon color="#d0d0d0"><Plus /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { TimePeriodItem } from './types';
  import { Plus } from '@element-plus/icons-vue';

  const props = defineProps<{ periodData: TimePeriodItem }>();

  const dayOptions = [
    {
      value: 1,
      label: '周一',
    },
    {
      value: 2,
      label: '周二',
    },
    {
      value: 3,
      label: '周三',
    },
    {
      value: 4,
      label: '周四',
    },
    {
      value: 5,
      label: '周五',
    },
    {
      value: 6,
      label: '周六',
    },
    {
      value: 7,
      label: '周日',
    },
  ];

  const makeRange = (start: number, end: number): number[] => {
    let result: number[] = [];
    for (let i = start; i <= end; i++) {
      result.push(i);
    }
    return result;
  };

  const startDay = ref(props.periodData.startDay);
  const endDay = ref(props.periodData.endDay);
  const timeRangeList = ref<{ startTime: Date | string; endTime: Date | string }[]>(
    props.periodData.timeRangeList,
  );

  const handleAddTimeRange = () => {
    if (!timeRangeList.value.find((item) => item.startTime === '' || item.endTime === '')) {
      timeRangeList.value.push({ startTime: '', endTime: '' });
      console.log(timeRangeList.value);
    }
  };

  const disabledHours = (index: number, isEnd: boolean) => {
    const newList = timeRangeList.value.filter(
      (item, i) => item.startTime && item.endTime && i !== index,
    );
    let result: number[] = [];
    // 选开始时间，结束时间被约束
    if (!isEnd && timeRangeList.value[index].endTime) {
      const curEnd = timeRangeList.value[index].endTime;
      const cureh = Number(String(curEnd).split(':')[0]);
      const curem = Number(String(curEnd).split(':')[1]);
      if (newList.length == 0) {
        if (curem == 0) {
          result = result.concat(makeRange(cureh, 23));
        } else {
          result = result.concat(makeRange(getH(cureh + 1), 23));
        }
      }
      for (let i = 0; i < newList.length; i++) {
        if (compareHM(newList[i].startTime, curEnd)) {
          if (i == 0) {
            if (curem == 0) {
              result = result.concat(makeRange(cureh, 23));
              break;
            } else {
              result = result.concat(makeRange(getH(cureh + 1), 23));
              break;
            }
          } else {
            let sh = 0;
            const lastEnd = newList[i - 1].endTime;
            const lasteh = Number(String(lastEnd).split(':')[0]);
            const lastem = Number(String(lastEnd).split(':')[1]);
            if (lastem == 59) {
              sh = lasteh;
            } else {
              sh = getH(lasteh - 1);
            }
            let eh = 0;
            if (curem == 0) {
              eh = cureh;
            } else {
              eh = getH(cureh + 1);
            }
            result = result.concat(makeRange(0, sh)).concat(makeRange(eh, 23));
            break;
          }
        }
        if (i == newList.length - 1) {
          let sh = 0;
          const lastEnd = newList[i].endTime;
          const lasteh = Number(String(lastEnd).split(':')[0]);
          const lastem = Number(String(lastEnd).split(':')[1]);
          if (lastem == 59) {
            sh = lasteh;
          } else {
            sh = getH(lasteh - 1);
          }
          let eh = 0;
          if (curem == 0) {
            eh = cureh;
          } else {
            eh = getH(cureh + 1);
          }
          result = result.concat(makeRange(0, sh)).concat(makeRange(eh, 23));
        }
      }
    }
    // 选结束时间，开始时间被约束
    if (isEnd && timeRangeList.value[index].startTime) {
      const curStart = timeRangeList.value[index].startTime;
      const cursh = Number(String(curStart).split(':')[0]);
      const cursm = Number(String(curStart).split(':')[1]);
      if (newList.length == 0) {
        if (cursm == 59) {
          result = result.concat(makeRange(0, cursh));
        } else {
          result = result.concat(makeRange(0, getH(cursh - 1)));
        }
      }
      for (let i = 0; i < newList.length; i++) {
        if (compareHM(curStart, newList[i].endTime)) {
          if (i == newList.length - 1) {
            if (cursm == 59) {
              result = result.concat(makeRange(0, cursh));
              break;
            } else {
              result = result.concat(makeRange(0, getH(cursh - 1)));
              break;
            }
          } else {
            let sh = 0;
            if (cursm == 59) {
              sh = cursh;
            } else {
              sh = getH(cursh - 1);
            }
            let eh = 0;
            const nextStart = newList[i + 1].startTime;
            const nextsh = Number(String(nextStart).split(':')[0]);
            const nextsm = Number(String(nextStart).split(':')[1]);
            if (nextsm == 0) {
              eh = nextsh;
            } else {
              eh = getH(nextsh + 1);
            }
            result = result.concat(makeRange(0, sh)).concat(makeRange(eh, 23));
            break;
          }
        }
        if (i == newList.length - 1) {
          let sh = 0;
          if (cursm == 59) {
            sh = cursh;
          } else {
            sh = getH(cursh - 1);
          }
          let eh = 0;
          const nextStart = newList[0].startTime;
          const nextsh = Number(String(nextStart).split(':')[0]);
          const nextsm = Number(String(nextStart).split(':')[1]);
          if (nextsm == 0) {
            eh = nextsh;
          } else {
            eh = getH(nextsh + 1);
          }
          result = result.concat(makeRange(0, sh)).concat(makeRange(eh, 23));
        }
      }
    }
    // 另一个时间为空
    if (
      (!isEnd && !timeRangeList.value[index].endTime) ||
      (isEnd && !timeRangeList.value[index].startTime)
    ) {
      for (let i = 0; i < newList.length; i++) {
        const timeRange = newList[i];
        const s = timeRange.startTime;
        const e = timeRange.endTime;
        const sh = Number(String(s).split(':')[0]);
        const sm = Number(String(s).split(':')[1]);
        const eh = Number(String(e).split(':')[0]);
        const em = Number(String(e).split(':')[1]);
        if (eh - sh > 1) {
          result = result.concat(makeRange(getH(sh + 1), getH(eh - 1)));
          if (sm == 0) result.push(sh);
          if (em == 59) result.push(eh);
        }
        if (sm == 0 && em == 59) result.push(sh);
      }
    }

    return result;
  };

  const disabledMinutes = (hour: number, index: number, isEnd: boolean) => {
    const newList = timeRangeList.value.filter(
      (item, i) => item.startTime && item.endTime && i !== index,
    );
    let result: number[] = [];
    for (let i = 0; i < newList.length; i++) {
      const timeRange = newList[i];
      const s = timeRange.startTime;
      const e = timeRange.endTime;
      const sh = Number(String(s).split(':')[0]);
      const sm = Number(String(s).split(':')[1]);
      const eh = Number(String(e).split(':')[0]);
      const em = Number(String(e).split(':')[1]);
      if (hour == sh) {
        if (sh == eh) {
          result = result.concat(makeRange(sm, em));
        } else {
          result = result.concat(makeRange(sm, 59));
        }
        continue;
      }
      if (hour == eh) {
        result = result.concat(makeRange(0, em));
      }
    }
    // 选开始时间，结束时间被约束
    if (!isEnd && timeRangeList.value[index].endTime) {
      const curEnd = timeRangeList.value[index].endTime;
      const cureh = Number(String(curEnd).split(':')[0]);
      const curem = Number(String(curEnd).split(':')[1]);
      if (hour === cureh) {
        result = result.concat(makeRange(curem, 59));
      }
    }
    // 选结束时间，开始时间被约束
    if (isEnd && timeRangeList.value[index].startTime) {
      const curStart = timeRangeList.value[index].startTime;
      const cursh = Number(String(curStart).split(':')[0]);
      const cursm = Number(String(curStart).split(':')[1]);
      if (hour === cursh) {
        result = result.concat(makeRange(0, cursm));
      }
    }

    return result;
  };

  const getH = (h) => {
    if (h < 0) {
      return 0;
    } else if (h > 23) {
      return 23;
    } else {
      return h;
    }
  };

  const getM = (m) => {
    if (m < 0) {
      return 0;
    } else if (m > 59) {
      return 23;
    } else {
      return m;
    }
  };

  const compareHM = (s, e) => {
    const sh = Number(String(s).split(':')[0]);
    const sm = Number(String(s).split(':')[1]);
    const eh = Number(String(e).split(':')[0]);
    const em = Number(String(e).split(':')[1]);

    if (sh === eh) {
      return sm - em > 0 ? true : false;
    } else if (sh > eh) {
      return true;
    } else {
      return false;
    }
  };
</script>

<style scoped lang="scss">
  .periodCard {
    width: 294px;
    max-height: 174px;
    background: #0000000a;
    border-radius: 5px;
    border: 1px solid #e8ecf2;
    padding: 3px;
    margin: 0 5px 5px 5px;
  }

  .dayRrange {
    display: flex;
    align-items: center;
  }

  .timeRange {
    display: flex;
    align-items: center;
  }

  .divider {
    color: #00000040;
  }

  .daySelect {
    width: 112px;
    margin: 5px;
  }

  .timeAdd {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ebebeb;
    border: 1px dashed #00000026;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  :deep(.el-date-editor) {
    width: 112px;
    margin: 5px;

    .el-input__prefix {
      order: 1;
    }

    .el-input__icon {
      margin: 0;
    }
  }

  :deep(.el-time-panel__footer) {
    display: none;
  }
</style>
