<template>
  <div class="page-card">
    <div style="display:flex; justify-content: space-between; align-items:center;">
      <h3>排班管理</h3>
      <el-button type="primary" @click="openCreate">新增排班</el-button>
    </div>
    <div class="schedule-toolbar">
      <el-date-picker v-model="monthPicker" type="month" placeholder="选择月份" @change="handleMonthChange" />
      <el-button @click="jumpToday">回到今天</el-button>
    </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">
                  {{ formatBadge(item) }}
                </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 label="护工" width="120">
              <template slot-scope="scope">
                {{ nurseName(scope.row.nurseId) }}
              </template>
            </el-table-column>
            <el-table-column prop="shift" label="班次" width="90" />
            <el-table-column prop="task" label="任务" />
            <el-table-column label="操作" width="160" class-name="action-col">
              <template slot-scope="scope">
                <div class="action-inline">
                  <el-button size="mini" @click="openEdit(scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="remove(scope.row)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="排班信息" :visible.sync="showDialog">
      <el-form :model="form" label-width="120px">
        <el-form-item label="护工">
          <el-select v-model="form.nurseId" placeholder="选择护工">
            <el-option v-for="nurse in nurses" :key="nurse.id" :label="nurse.name" :value="nurse.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="日期"><el-date-picker v-model="form.date" type="date"/></el-form-item>
        <el-form-item label="班次">
          <el-select v-model="form.shift" placeholder="选择班次">
            <el-option label="早班" value="早班" />
            <el-option label="中班" value="中班" />
            <el-option label="晚班" value="晚班" />
            <el-option label="夜班" value="夜班" />
          </el-select>
        </el-form-item>
        <el-form-item label="任务"><el-input v-model="form.task"/></el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { schedulesByRange, scheduleCreate, scheduleUpdate, scheduleDelete, adminUsers } from "../../api";
import { formatDate } from "../../utils/date";

export default {
  data() {
    const today = new Date();
    return {
      calendarDate: today,
      monthPicker: today,
      selectedDate: formatDate(today),
      daySchedules: [],
      scheduleMap: {},
      nurses: [],
      nurseMap: {},
      showDialog: false,
      form: { id: null, nurseId: "", date: "", shift: "", task: "" }
    };
  },
  created() {
    this.loadMonth(this.monthPicker);
    this.loadNurses();
  },
  methods: {
    async loadNurses() {
      try {
        const res = await adminUsers("NURSE");
        this.nurses = res.data.data;
        const map = {};
        this.nurses.forEach((nurse) => {
          map[nurse.id] = nurse.name;
        });
        this.nurseMap = map;
      } catch (e) {
        this.$message.error(e.message || "加载护工失败");
      }
    },
    nurseName(id) {
      return this.nurseMap[id] || `护工${id}`;
    },
    formatBadge(item) {
      const shift = item.shift || "班次";
      const name = this.nurseName(item.nurseId);
      return `${shift}·${name}`;
    },
    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 schedulesByRange(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 || "加载失败");
      }
    },
    openCreate() {
      this.form = { id: null, nurseId: "", date: new Date(this.selectedDate), shift: "", task: "" };
      this.showDialog = true;
    },
    openEdit(row) {
      this.form = { ...row, date: new Date(row.date) };
      this.showDialog = true;
    },
    async save() {
      try {
        const payload = { ...this.form, date: formatDate(this.form.date) };
        if (payload.id) {
          await scheduleUpdate(payload);
        } else {
          await scheduleCreate(payload);
        }
        this.showDialog = false;
        this.loadMonth(this.monthPicker);
      } catch (e) {
        this.$message.error(e.message || "保存失败");
      }
    },
    async remove(row) {
      try {
        await scheduleDelete(row.id);
        this.loadMonth(this.monthPicker);
      } 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;
}
.action-inline {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}
.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>
