<template>
  <div>
    <el-calendar v-model="value" ref="calendar" @cell-click="handleCellClick">
      <template #header="{ date }">
        <span>{{ date }}</span>
        <el-button size="small" @click="syncHolidays()"> 同步节假日 </el-button>
        <el-button-group>
          <el-button size="small" @click="selectDate('prev-year')">
            上一年
          </el-button>
          <el-button size="small" @click="selectDate('prev-month')">
            上一月
          </el-button>
          <el-button size="small" @click="selectDate('today')">今天</el-button>
          <el-button size="small" @click="selectDate('next-month')">
            下一月
          </el-button>
          <el-button size="small" @click="selectDate('next-year')">
            下一年
          </el-button>
        </el-button-group>
      </template>
      <template #date-cell="{ data }">
        <!--        <div @click="onClickCalendarCell(data.day)" v-bind:class="{'holidays': holidayMap[data.day]!=null}">
          {{data.day.split('-')[2]}}
          <p v-if="holidayMap[data.day]">
            {{holidayMap[data.day].typeDes}}
          </p>
        </div>-->
        <div
          style="height: 100%"
          :class="
            holidayMap[data.day] != null ? 'lar-is-selected' : 'lar-no-selected'
          "
          @click="onClickCalendarCell(data.day)"
        >
          <span v-if="holidayMap[data.day] == null">班</span>
          <span v-else-if="holidayMap[data.day] != null" style="color: #f73131"
            >休</span
          >
          <span v-else>&nbsp;</span>
          <div
            :style="
              holidayMap[data.day] != null
                ? 'color:#F73131;text-align:center'
                : 'text-align:center'
            "
          >
            {{ data.day.split("-").slice(1).join("-") }}
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, computed, ref, nextTick } from "vue";
import {
  getByYear,
  delHolidays,
  addHolidays,
  syncToYearHolidays,
} from "../../api/holidays/holidays";
import type { CalendarDateType, CalendarInstance } from "element-plus";
import { ElMessageBox } from "element-plus";

const value = ref(new Date());
// 节假日Map
const holidayMap = ref({});

// 获取某年的节假日列表
async function getYearList() {
  const { data: holidaysList } = await getByYear(value.value.getFullYear());
  holidayMap.value = {};
  for (let holiday of holidaysList) {
    holidayMap.value[holiday.date] = holiday;
  }
}

// 同步节假日
async function syncHolidays() {
  ElMessageBox.confirm(
    "确定重新同步节假日，已经存在的节假日信息会被清空!",
    "确认"
  ).then(async () => {
    await syncToYearHolidays(value.value.getFullYear());
    getYearList();
  });
}

// 点击日历单元格事件
function onClickCalendarCell(day) {
  // 取消节假日
  if (holidayMap.value[day] != null) {
    ElMessageBox.confirm("确定取消该节假日吗?", "确认").then(async () => {
      await delHolidays(holidayMap.value[day].id);
      await getYearList();
    });
    return;
  }

  // 新增节假日
  ElMessageBox.confirm("确定设置为放假吗?", "确认").then(async () => {
    await addHolidays({
      date: day,
      type: 2,
      typeDes: "节假日",
    });
    await getYearList();
  });
}

onMounted(async () => {
  await getYearList();
});

const calendar = ref<CalendarInstance>();
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return;
  calendar.value.selectDate(val);
  getYearList();
};

function handleCellClick(date) {
  //console.log(date)
}
</script>

<style lang="scss" scoped>
.lar-el-calendar {
  .el-calendar-table td.is-selected {
    background-color: #a2e5a2 !important;
  }
  .el-calendar-table td .el-calendar-day:hover {
    background-color: #a2e5a2 !important;
  }
  .current.is-today {
    background: green;
    color: #fff;
  }
}
</style>
