<template>
  <div class="app-container">
    <el-calendar v-loading="loading">
      <template slot="dateCell" slot-scope="{ data }">
        <div class="calendar-cell">
          <strong class="text">{{ data.day.split("-").slice(1)[1] }}</strong>
          <span class="rest">{{ findUser(data.day) }}</span>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import { getCalendar } from "@/api/oa/leave/annual";

export default {
  name: "AnnualCalendar",
  components: {},
  data() {
    return {
      loading: false,
      calendarData: [],
    };
  },
  computed: {},
  mounted() {
    this.getList();
  },
  methods: {
    /**
     * 查找指定日期对应的请假人员名称
     * @param {string} targetDay - 目标日期，格式为 YYYY-MM-DD
     * @returns {string} 返回请假人员名称，未找到则返回空字符串
     */
    findUser(targetDay) {
      try {
        // 遍历日历数据，查找匹配的日期
        for (let dateObj of this.calendarData) {
          if (dateObj[targetDay]) {
            return dateObj[targetDay];
          }
        }
        return "";
      } catch (error) {
        console.error("查找请假人员失败:", error);
        return "";
      }
    },

    /**
     * 加载年假日历数据
     */
    getList() {
      this.loading = true;
      getCalendar()
        .then((response) => {
          this.calendarData = response;
          this.loading = false;
        })
        .catch((error) => {
          console.error("获取日历数据失败:", error);
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .calendar-cell {
  display: flex;
  flex-direction: column;
  .text {
    font-size: 16px;
    font-weight: 500;
  }
  .rest {
    font-size: 14px;
    color: #409eff;
  }
}

::v-deep .el-calendar__title {
  font-size: 18px;
}

::v-deep .el-calendar-table {
  border-spacing: 0;
  border-collapse: collapse;
  thead {
    th {
      background-color: #f5f5f5;
      border: 1px solid #dcdfe6;
    }
  }
  tbody {
    td {
      border: 1px solid #dcdfe6;
    }
  }
}
</style>
