<!--
 * @Date: 2024-01-15 13:35:51
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-30 15:21:55
 * @FilePath: /xysBooking/src/views/booking.vue
 * @Description: 预约页面
-->
<template>
  <div class="booking-page">
    <div class="calendar">
      <div class="choose-date">
        <div class="title">
          <div class="text">选择参访日期</div>
          <div @click="chooseDate" class="day">{{ currentDateText }} 月</div>
        </div>
        <div class="days-of-week">
          <div v-for="day in daysOfWeek" :key="day" class="item">{{ day }}</div>
        </div>
        <div class="weeks-wrapper">
          <div v-for="(week, index) in weeks" :key="week" class="weeks">
            <div v-for="date in week" :key="date"
              @click="chooseDay(date)"
              :class="[ 'item',
                checked_day === findDatesInfo(date).date ? 'checked' : '',
                findDatesInfo(date).reserve_full === ReserveStatus.FULL || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE ? 'disabled' : ''
              ]"
            >
              <div v-if="findDatesInfo(date).date">
                <p class="day-lunar">{{ findDatesInfo(date).lunar_date.IDayCn }}</p>
                <p class="day-text">{{ findDatesInfo(date).text }}</p>
                <!-- <p v-if="findDatesInfo(date).reserve_full === ReserveStatus.AVAILABLE" class="day-price">¥{{ findDatesInfo(date).price }}</p> -->
                <p v-if="findDatesInfo(date).reserve_full === ReserveStatus.INFINITY || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE" class="day-price"></p>
                <p v-else-if="findDatesInfo(date).reserve_full === ReserveStatus.FULL" class="day-no-booking">约满</p>
                <!-- <p v-else class="day-no-booking">¥{{ findDatesInfo(date).price }}</p> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="checked_day && checked_day_reserve_full === ReserveStatus.AVAILABLE" class="choose-time">
        <div class="title">
          <div class="text">选择参访时间段</div>
        </div>
        <div class="time-list">
          <div
            @click="chooseTime(item, index)"
            v-for="(item, index) in timePeriod"
            :key="index"
            :class="['time', item.rest_qty === QtyStatus.FULL ? 'disabled' : '']"
          >
            <div class="left">
              <van-icon v-if="checked_time !== index" :name="icon_select1" />&nbsp;
              <van-icon v-else :name="icon_select2" />&nbsp;
              {{ item.begin_time }}-{{ item.end_time }}
              &nbsp;&nbsp;<span class="price">¥&nbsp;{{ item.price }}</span>
            </div>
            <div class="right">
              <span v-if="item.rest_qty">余量：{{ item.rest_qty }}</span>
              <span v-else-if="item.rest_qty === QtyStatus.INFINITY">可约</span>
              <span v-else>已约满</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="checked_day_reserve_full === ReserveStatus.INFINITY" class="choose-time">
        <div class="title">
          <div class="text">选择参访时间段</div>
        </div>
        <div style="padding: 1.5rem 0.75rem; color: #A67939; text-align: center;">
          无需预约，请直接前往参观
        </div>
      </div>
    </div>
    <div style="height: 5rem;"></div>
    <div v-if="checked_day && checked_day_reserve_full === ReserveStatus.AVAILABLE" class="next">
      <div @click="nextBtn" class="button" style="background-color: #A67939;">下一步</div>
    </div>

    <van-popup v-model:show="showPicker" position="bottom">
      <van-date-picker
        v-model="currentDate"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :columns-type="columnsType"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>

    <van-toast v-model:show="show_error">
      <template #message>
        {{ error_message }}
      </template>
    </van-toast>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showSuccessToast, showFailToast, showToast } from 'vant';
import { Cookies, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import dayjs from 'dayjs';
import { useGo } from '@/hooks/useGo'
import icon_select1 from '@/assets/images/单选01@2x.png'
import icon_select2 from '@/assets/images/单选02@2x.png'
import { canReserveDateListAPI, canReserveTimeListAPI } from '@/api/index'
import calendar from 'xst-solar2lunar'

const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const go = useGo();

const dates_list = ref([]); // 当月日期列表信息
const dates = ref([]); // 当月日期集合

onMounted(async () => {
  const raw_date = new Date();
  const { code, data } = await canReserveDateListAPI({ month: `${raw_date.getFullYear()}-${(raw_date.getMonth() + 1).toString().padStart(2, '0')}` });
  if (code) {
    // 日期列表
    dates_list.value = data;
    // 今日之前都不可约
    dates_list.value.forEach((date) => {
      if (dayjs(date.month_date).isBefore(dayjs())) {
        date.reserve_full = ReserveStatus.OVERDUE;
      }
    });
    dates.value = dates_list.value.map(item => item.month_date);
  }
})

/**
 * @description: 根据日期获取信息
 * @param {string} date
 * @return {object} {text: 日期, date: 日期, reserve_full: 是否可约 1=可约，0=约满，-1=无需预约 overdue=过期日期 }
 */
const findDatesInfo = (date) => {
  const result = dates_list.value.find((item) => item.month_date === date);
  const currentDate = new Date(date);
  const lunarDate = calendar.solar2lunar(dayjs(date).format('YYYY-MM-DD'));
  return {
    text: currentDate.getDate().toString().padStart(2, '0'),
    date: result?.month_date,
    reserve_full: result?.reserve_full,
    lunar_date: lunarDate
  };
};

/**
 * @description: 预约状态
 * @return {object} {INFINITY: -1, FULL: 0, AVAILABLE: 1, OVERDUE: 'overdue' }
 */
const ReserveStatus = {
  INFINITY: -1, // 无需预约
  FULL: 0, // 约满
  AVAILABLE: 1, // 可约
  OVERDUE: 'overdue', // 过期日期
}

const daysOfWeek = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];

/**
 * @description: 每周日期列表
 * @return {array} [array]
 */
const weeks = computed(() => {
  const result = [];
  let currentWeek = [];
  let currentDate = new Date(dates.value[0]);

  // 确定第一个日期是星期几
  const firstDayOfWeek = currentDate.getDay() === 0 ? 7 : currentDate.getDay();

  // 添加空白的日期，直到第一个日期的星期一
  for (let i = 1; i < firstDayOfWeek; i++) {
    currentWeek.push('');
  }

  // 添加日期
  for (const date of dates.value) {
    currentDate = new Date(date);
    const dayOfWeek = currentDate.getDay() === 0 ? 7 : currentDate.getDay();

    // 如果当前星期一，开始新的一行
    if (dayOfWeek === 1 && currentWeek.length > 0) {
      result.push(currentWeek);
      currentWeek = [];
    }

    // currentWeek.push(currentDate.getDate()); // 仅将日期部分作为字符串添加到当前星期数组
    currentWeek.push(date); // 仅将日期部分作为字符串添加到当前星期数组
  }

  // 添加最后一行
  if (currentWeek.length > 0) {
    result.push(currentWeek);
  }

  return result;
});

const checked_day = ref('');
const checked_day_price = ref(0);
const checked_day_reserve_full = ref(null);
const checked_time = ref(-1);
const timePeriod = ref([]); // 当前时间段信息

const chooseTime = (item, index) => { // 选择时间段回调
  if (item.rest_qty || item.rest_qty === QtyStatus.INFINITY) { // 余量等于-1为不限制数量
    checked_time.value = index;
    checked_day_price.value = item.price; // 当前价格
  }
};

/**
 * @description: 数量状态
 * @return {object} {FULL: 0, INFINITY: -1 }
 */
const QtyStatus = {
  FULL: 0, // 无余量
  INFINITY: -1, // 无限制
}

const chooseDay = async (date) => { // 点击日期回调
  if (findDatesInfo(date).reserve_full === ReserveStatus.AVAILABLE || findDatesInfo(date).reserve_full === ReserveStatus.INFINITY) { // 状态 1可约 || -1不限制
    checked_day.value = date; // 当前日期
    checked_day_reserve_full.value = findDatesInfo(date).reserve_full; // 当前状态
    if (findDatesInfo(date).reserve_full === ReserveStatus.AVAILABLE) {
      // 选择日期后，查询时间段信息
      const { code, data } = await canReserveTimeListAPI({ month_date: checked_day.value});
      if (code) {
        // rest_qty >0表示有余量，可约；=0表示没有余量，不可约；<0表示不限，可约；
        timePeriod.value = data;
        checked_time.value = -1; // 重置已选择的时间段
      }
    }
  }
};

const showPicker = ref(false);
const chooseDate = () => {
  showPicker.value = true;
}

const raw_date = new Date();
const currentDate = ref([raw_date.getFullYear(), raw_date.getMonth()]);
const columnsType = ['year', 'month'];
const minDate = new Date();
const maxDate = new Date(2050, 11, 1);
const currentDateText = ref((raw_date.getMonth() + 1).toString().padStart(2, '0'));

const onConfirm = async ({ selectedValues, selectedOptions }) => { // 选择日期回调
  showPicker.value = false;
  currentDateText.value = selectedValues[1].toString();
  // 清空选择
  checked_day.value = '';
  checked_time.value = -1;
  checked_day_reserve_full.value = null;
  // 选择日期后，查询月份信息
  const { code, data } = await canReserveDateListAPI({ month: `${selectedValues[0]}-${selectedValues[1]}` });
  if (code) {
    // 日期列表
    dates_list.value = data;
    // 今日之前都不可约
    dates_list.value.forEach((date) => {
      if (dayjs(date.month_date).isBefore(dayjs())) {
        date.reserve_full = ReserveStatus.OVERDUE;
      }
    });
    dates.value = dates_list.value.map(item => item.month_date);
  }
}

const onCancel = () => {
  showPicker.value = false;
}

const show_error = ref(false);
const error_message = ref('');
const nextBtn = () => {
  if (!checked_day.value || checked_time.value === -1) {
    show_error.value = true;
    error_message.value = '请选择日期和时间段';
  } else {
    go('/submit', { date: checked_day.value, time: `${timePeriod.value[checked_time.value]['begin_time']}-${timePeriod.value[checked_time.value]['end_time']}`, price: checked_day_price.value });
  }
}
</script>

<style lang="less" scoped>
.booking-page {
  position: relative;
  .calendar {
    padding: 1rem 0.5rem;
    .choose-date {
      border-radius: 5px;
      background-color: #FFFFFF;


      .title {
        padding: 0.5rem 0.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text {
          &::before {
            content: '';
            border: 2px solid #A67939;
            margin-right: 0.5rem;
          }
        }
        .day {
          background-color: #FFFBF3;
          border-radius: 7px;
          border: 1px solid #A67939;
          padding: 0.2rem 0.5rem;
          color: #A67939;
        }
      }
      .days-of-week {
        background-color: #EAEAEA;
        display: flex;
        padding: 0.75em 1%;
        font-size: 0.85rem;
        .item {
          width: 14.5%;
          text-align: center;
        }
      }
      .weeks-wrapper {
        padding: 0.5rem 0;
      }
      .weeks {
        display: flex;
        padding: 0 1%;
        .item {
          width: 11.5%;
          text-align: center;
          margin: 0 0.3rem;
          padding: 0.5rem 0;
          border: 1px solid #FFF;
          .day-lunar {
            color: #1E1E1E;
            font-size: 0.85rem;
            margin-bottom: 5px;
          }
          .day-text {
            color: #1E1E1E;
            font-weight: bold;
            font-size: 1.05rem;
          }
          .day-price {
            color: #A67939;
            font-size: 0.85rem;
          }
          &.checked {
            border: 1px solid #A67939;
            border-radius: 5px;
            background-color: #FFFBF3;
          }
          &.disabled {
            .day-lunar {
              color: #C7C7C7;
              margin-bottom: 5px;
            }
            .day-text {
              color: #C7C7C7;
            }
            .day-price {
              color: #C7C7C7;
            }
            .day-no-booking {
              color: #C7C7C7;
              font-size: 0.75rem;
            }
          }
        }
      }
    }
    .choose-time {
      margin-top: 1rem;
      .title {
        padding: 0.5rem 0.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text {
          &::before {
            content: '';
            border: 2px solid #A67939;
            margin-right: 0.5rem;
          }
        }
      }
      .time-list {
        .time {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background-color: #FFF;
          border-radius: 5px;
          padding: 0.85rem;
          margin: 1rem 0;
          .left {
            display: flex;
            align-items: center;
            color: #1E1E1E;
            .price {
              color:#A67939;
            }
          }
          .right {
            color: #A67939;
          }
          &.disabled {
            background-color: #E0E0E0;
            .left {
              color: #C7C7C7;
              .price {
                color:#C7C7C7;
              }
            }
            .right {
              color: #C7C7C7;
            }
          }
        }
      }
    }
  }
  .next {
    position: fixed;
    bottom: 0;
    height: 5rem;
    width: 100vw;
    display: flex;
    left: 0;
    background-color: #FFF;
    align-items: center;
    justify-content: center;
    box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
    .button {
      color: #FFF;
      padding: 0.85rem 0;
      border-radius: 8px;
      font-size: 1.1rem;
      text-align: center;
      flex-grow: 1;
      margin: 1rem;
    }
  }
}

:deep(.van-picker__confirm) {
  color: #A67939;
}
</style>