<template>
  <uni-popup ref="popupRef" :is-mask-click="false" animation type="bottom">
    <view class="popup_box">
      <CustomCalender
        ref="calenderRef"
        :canSeletion="canSeletion"
        :auto="false"
        :selectedDay="currentDay"
        @selectedDay="selectedDay"
      >
        <template #header="{ date }">
          <view class="header">
            <text>选择日期</text>
            <view>
              <wd-icon
                name="arrow-left"
                size="30rpx"
                color="#A9AAB5"
                @click="changeMonth('prev')"
              ></wd-icon
              >{{ date.monthDate }}
              <wd-icon
                name="arrow-right"
                size="30rpx"
                color="#A9AAB5"
                @click="changeMonth('next')"
              ></wd-icon
            ></view>
          </view>
        </template>
        <template #cell="{ date }">
          <view v-for="item of canlender" :key="item.courseId">
            <view v-if="date.date === item.courseDate" class="state-group">
              <view class="mode">{{ item.mode === 1 ? '1v1' : '1vN' }}督学</view>
              <view v-if="item.planState === 1" class="state-primary">督学中</view>
              <view v-else-if="item.planTaskCount > 0" class="plan"
                >{{ item.planTaskCount }}个计划</view
              >
              <view v-else-if="item.planTaskCount === 0" class="stay-plan">待发计划</view>
              <view v-else-if="item.planState === 2" class="state-primary">已完成</view>
            </view>
          </view>
        </template>
      </CustomCalender>
      <view class="operation">
        <button class="confirm_btn" @click="tapConfirmBtn">确定</button>
      </view>
    </view>
  </uni-popup>
</template>
<script setup lang="ts">
import { ref, watch, nextTick, computed } from 'vue';
import dayjs from 'dayjs';
import CustomCalender from '@/components/customCalender/index.vue';
interface canlenderType {
  courseDate: string;
  courseId?: string;
  planState: number;
  planTaskCount: number;
  mode: number;
}
const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    titleText?: string;
    cancelBtnText?: string;
    confirmBtnText?: string;
    currentDay?: string;
    canlender: canlenderType[];
  }>(),
  {
    modelValue: false,
    titleText: '',
    cancelBtnText: '取消',
    confirmBtnText: '确定',
    canlender: () => [
      {
        courseDate: '',
        courseId: '',
        planState: 0,
        planTaskCount: 0,
        mode: 1,
      },
    ],
  },
);
const emits = defineEmits(['update:modelValue', 'handleConfirmBtn', 'handleCancelBtn']);
const popupRef = ref();
const calenderRef = ref();
const currentDate = ref();
const today = ref(dayjs().format('YYYY-MM-DD'));
interface dateType {
  date: string;
  day: number;
  mounth: number;
  year: number;
  disable: boolean;
}
const canSeletion = computed(() => {
  let arr = [];
  props.canlender.forEach(item => {
    if (item.planTaskCount === 0 && item.planState === 0 && today.value <= item.courseDate) {
      arr.push(item.courseDate);
    }
  });

  return arr;
});
// 选择日期
function selectedDay(val: dateType) {
  currentDate.value = val.date;
}
function changeMonth(type: string) {
  switch (type) {
    case 'prev':
      calenderRef.value.prevMonth();
      break;
    case 'next':
      calenderRef.value.nextMonth();
      break;
  }
}
// 确认
function tapConfirmBtn() {
  if (!currentDate.value) {
    return uni.showToast({
      title: '请选择日期',
      icon: 'none',
      duration: 3000,
    });
  }
  const selectObj = {
    courseId: props.canlender.find(e => e.courseDate === currentDate.value)?.courseId,
    courseDate: currentDate.value,
  };
  emits('handleConfirmBtn', selectObj);
  tapCancelBtn();
}
// 取消
function tapCancelBtn() {
  popupRef.value.close();
  emits('update:modelValue', false);
  emits('handleCancelBtn');
}
watch(
  () => props.currentDay,
  val => {
    if (val) {
      currentDate.value = val;
    }
  },
);
watch(
  () => props.modelValue,
  () => {
    if (props.modelValue) {
      nextTick(() => {
        popupRef.value.open();
      });
    } else {
      nextTick(() => {
        popupRef.value && popupRef.value.close();
      });
    }
  },
  {
    immediate: true,
    deep: true,
  },
);
</script>
<style lang="scss" scoped>
.popup_box {
  position: relative;
  max-height: 90vh;
  min-height: 300rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  padding-bottom: 110rpx;

  .header_title {
    color: #0a1f13;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 32rpx;
    padding: 30rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
  }
  .container {
    padding: 40rpx 30rpx;
    box-sizing: border-box;
  }
  .operation {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 16rpx;
    border-top: 1px solid #eeeeee;
    bottom: 16rpx;
    .confirm_btn {
      height: 90rpx;
      width: 440rpx;
      color: #fff;
      background-color: #615dff;
    }
  }
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 30rpx;
}
.state-group {
  width: 100%;
  font-size: 20rpx;
  .mode {
    color: #666;
    line-height: 32rpx;
  }
  .plan {
    color: #ff8d5f;
    line-height: 32rpx;
  }
  .stay-plan {
    color: #ff2828;
  }
  .state-info {
    color: #ccc;
  }
  .state-primary {
    color: #21d17a;
  }
}
</style>
