<template>
  <div class="page-card">
    <div style="display:flex; justify-content: space-between; align-items:center;">
      <h3>我的排班</h3>
      <el-button @click="jumpToday">回到今天</el-button>
    </div>
    <div class="schedule-toolbar">
      <el-date-picker v-model="monthPicker" type="month" placeholder="选择月份" @change="handleMonthChange" />
    </div>
    <el-row :gutter="16">
      <el-col :span="16">
        <el-calendar v-model="calendarDate" @input="handleDateChange">
          <template slot="dateCell" slot-scope="{ data }">
            <div class="calendar-cell">
              <div class="cell-date">{{ data.day.split('-')[2] }}</div>
              <div class="cell-badges">
                <span v-for="item in getDaySchedules(data.day).slice(0, 2)" :key="item.id" class="badge">
                  {{ item.shift || "班次" }}
                </span>
                <span v-if="getDaySchedules(data.day).length > 2" class="more">
                  +{{ getDaySchedules(data.day).length - 2 }}
                </span>
              </div>
            </div>
          </template>
        </el-calendar>
      </el-col>
      <el-col :span="8">
        <div class="schedule-panel">
          <div class="schedule-title">当天排班：{{ selectedDate }}</div>
          <el-table :data="daySchedules" stripe>
            <el-table-column prop="shift" label="班次" width="100" />
            <el-table-column prop="task" label="任务" />
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { nurseSchedulesRange } from "../../api";
import { formatDate } from "../../utils/date";

export default {
  data() {
    const today = new Date();
    return {
      calendarDate: today,
      monthPicker: today,
      selectedDate: formatDate(today),
      daySchedules: [],
      scheduleMap: {}
    };
  },
  created() {
    this.loadMonth(this.monthPicker);
  },
  methods: {
    handleMonthChange() {
      if (!this.monthPicker) return;
      const firstDay = new Date(this.monthPicker.getFullYear(), this.monthPicker.getMonth(), 1);
      this.calendarDate = firstDay;
      this.loadMonth(this.monthPicker);
    },
    handleDateChange(date) {
      this.selectedDate = formatDate(date);
      this.daySchedules = this.getDaySchedules(this.selectedDate);
    },
    getDaySchedules(dayStr) {
      return this.scheduleMap[dayStr] || [];
    },
    async loadMonth(date) {
      const year = date.getFullYear();
      const month = date.getMonth();
      const start = new Date(year, month, 1);
      const end = new Date(year, month + 1, 0);
      try {
        const res = await nurseSchedulesRange(formatDate(start), formatDate(end));
        const map = {};
        res.data.data.forEach((item) => {
          if (!map[item.date]) {
            map[item.date] = [];
          }
          map[item.date].push(item);
        });
        this.scheduleMap = map;
        this.daySchedules = this.getDaySchedules(this.selectedDate);
      } catch (e) {
        this.$message.error(e.message || "加载失败");
      }
    },
    jumpToday() {
      const today = new Date();
      this.monthPicker = today;
      this.calendarDate = today;
      this.selectedDate = formatDate(today);
      this.loadMonth(today);
    }
  }
};
</script>

<style scoped>
.schedule-toolbar {
  margin: 12px 0 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.schedule-panel {
  background: #f6fbf7;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #d9efe3;
}
.schedule-title {
  font-weight: 600;
  margin-bottom: 10px;
}
.calendar-cell {
  min-height: 58px;
}
.cell-date {
  font-size: 12px;
  color: #6b7b6f;
}
.cell-badges {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.badge {
  background: #e1f3ea;
  color: #2f7d59;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
}
.more {
  color: #7b8b7f;
  font-size: 11px;
}
</style>
