<template>
  <div>
    <div style="position: relative" class="data-analysis">
      <span
        @click="goToMonthAll"
        style="
          position: absolute;
          left: 12.5vw;
          margin-top: 11px;
          font-size: 20px;
          color: #409eff;
          cursor: pointer;
          font-weight: 600;
        "
        >值班表</span
      >
      <el-calendar
        @prev="goToPreviousMonth"
        @next="goToNextMonth"
        v-model="calendarValue1"
      >
        <!--选中小红点-->
        <template v-slot:dateCell="{ date, data }">
          <div>
            <div v-for="(item, key) in activeday" :key="key">
              <el-badge
                style="color: red; margin-top: 12px"
                v-if="data.day == item.dat"
                class="item"
                >值班</el-badge
              >
            </div>
            <!---->
            <el-popover
              class="bg"
              placement="top-start"
              ref="popover"
              :width="470"
              trigger="click"
              @show="dayDatil(data.day)"
              v-model="showPopover"
            >
              <template #reference>
                <div style="cursor: pointer" class="spandate">
                  {{ data.day.split("-").slice(2).join("-") }}
                </div>
              </template>
              <div style="height: 150px">
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%; margin-top: 10px"
                >
                  <el-table-column align="center" prop="day" label="白天">
                  </el-table-column>
                  <el-table-column align="center" prop="night" label="夜晚">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="emergency"
                    label="应急值班"
                  >
                  </el-table-column>
                  <el-table-column align="center" prop="duty" label="值班司机">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="shiftLeader"
                    label="带班干部"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </el-popover>
          </div>
        </template>
      </el-calendar>
    </div>
    <!-- <el-dialog
      title="值班详细"
      v-model="dialogVisible"
      width="50%"
      :before-close="handleClose"
      style="height: 300px"
    >
      <div style="height: 150px">
        <div style="font-size: 16px; text-align: left">日期：{{ date }}</div>
        <el-table
          :data="tableData"
          border
          style="width: 100%; margin-top: 10px"
        >
          <el-table-column align="center" prop="day" label="白天">
          </el-table-column>
          <el-table-column align="center" prop="night" label="夜晚">
          </el-table-column>
          <el-table-column align="center" prop="emergency" label="应急值班">
          </el-table-column>
          <el-table-column align="center" prop="duty" label="值班司机">
          </el-table-column>
          <el-table-column align="center" prop="shiftLeader" label="带班干部">
          </el-table-column>
        </el-table>
      </div>
      <span
        style="position: absolute; right: 0; padding: 20px"
        slot:footer
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import { selectMyDuty, selectDutyInfoByDate } from "@/api/deskWork/dutyOn";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");
export default {
  name: "YinetoaDutyOn",

  data() {
    return {
      firstDayOfWeek: 1, // 设置每周第一天为星期一
      showPopover: false,
      CheckInfo: {
        num: "",
        peopleNum: "",
      },
      dialogVisible: false,
      date: "",
      tableData: [],
      shiftLeader: null,
      // 日历
      calendarValue1: new Date(),
      activeday: [
        // 日历组件选中的日期，小红点，时间格式必须为yyyy-MM-dd，比如3月5号要写成03-05而不是3-5
      ],
    };
  },
  watch: {},
  created() {
    // 当前时间
    this.formatDateTime(this.calendarValue1);
  },
  mounted() {
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", (e) => {
        this.calendarValue1 = new Date(
          this.calendarValue1.getFullYear(),
          this.calendarValue1.getMonth(),
          1
        );
        this.formatDateTime(this.calendarValue1);
      });
      //点击下一个月
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", (e) => {
        // 点击下个月按钮时执行的操作
        this.calendarValue1 = new Date(
          this.calendarValue1.getFullYear(),
          this.calendarValue1.getMonth(),
          1
        );
        this.formatDateTime(this.calendarValue1);
      });
    });
  },

  methods: {
    goToMonthAll() {
      this.$router.push({ path: "/beOnDuty/dutyArrangement" });
    },
    hidePopover() {
      this.showPopover = false;
    },
    // 转化年月日
    formatDateTime(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      this.calendarValue1 = y + "-" + m + "-" + d;
      this.selectMyDuty();
      return y + "-" + m + "-" + d;
    },
    async selectMyDuty() {
      this.calendarVal = this.calendarValue1.slice(0, 7);

      let res = await selectMyDuty(this.calendarVal);
      for (let i = 0; i < res.length; i++) {
        let date = res[i].dutyDate.split("-");
        let year = date[0];
        let month = date[1];
        let day = date[2];
        let date1 = year + "-" + month + "-" + day;
        let date2 = date1.slice(0, 10);
        this.activeday.push({ dat: date2 });
      }
    },
    async dayDatil(val) {
      this.date = val;
      this.tableData = [];
      let res = await selectDutyInfoByDate(val);
      this.shiftLeader = res
        .filter((v) => v.status == 3) // 过滤出状态为3的元素
        .map((v) => v.name) // 将符合条件的元素的name值映射出来
        .join(","); // 使用逗号连接数组元素
      this.day = res
        .filter((v) => v.status == 0)
        .map((v) => v.name)
        .join(",");

      this.night = res
        .filter((v) => v.status == 1)
        .map((v) => v.name)
        .join(",");

      this.emergency = res
        .filter((v) => v.status == 2)
        .map((v) => v.name)
        .join(",");

      this.duty = res
        .filter((v) => v.status == 4)
        .map((v) => v.name)
        .join(",");

      this.dialogVisible = true;
      this.tableData.push({
        shiftLeader: this.shiftLeader,
        day: this.day,
        night: this.night,
        emergency: this.emergency,
        duty: this.duty,
      });
      // 当弹出框显示时，添加全局事件监听，检查鼠标位置
      document.addEventListener("mousemove", this.handleMouseMove);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .data-analysis[data-v-489b0b84] .el-calendar-table td.is-today {
  color: #409eff;
  font-weight: 700;
  width: 20px !important;
  height: 20px !important;
  background-color: #e5f0fc !important;
}
::v-deep .el-calendar-table td.is-today {
  background-color: #e5f0fc !important;
}
.data-analysis {
  ::v-deep .el-calendar-table .el-calendar-day {
    width: 100%;
    height: 100%;
  }

  ::v-deep .el-button-group > .el-button:not(:first-child):not(:last-child) {
    display: none;
  }

  /*去掉原本背景颜色*/
  ::v-deep .el-calendar {
    background: transparent;
  }

  ::v-deep .el-calendar-table td:hover {
    // background: transparent;
    background-color: #e8edf3;
  }

  ::v-deep .el-calendar-table td.is-selected {
    background: transparent;
    // color: #409eff;
    // background-color: red;
  }
  ::v-deep .el-calendar-table td.is-today {
    // color: white !important;
    // background-color: #409eff !important;
    // width: 10px !important;
    // height: 10px !important;
    // border-radius: 50% !important;
  }
  ::v-deep .el-calendar-table .el-calendar-day {
    .spandate {
      height: 30px;
    }
    position: relative;
    padding: 0px 10px;
    margin: 8px 0;
    .el-badge {
      position: absolute;
      right: 10px;
      top: 0px;
    }
  }

  ::v-deep .el-calendar-table tr td:first-child {
    border-left: 1px solid #ebeef5;
  }

  ::v-deep .el-calendar-table tr:first-child td {
    border-top: 1px solid #ebeef5;
  }

  ::v-deep .el-calendar-table td {
    border-bottom: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
  }

  ::v-deep .el-calendar-table thead th {
    color: black;
  }

  ::v-deep .el-calendar__title {
    color: #409eff;
    font-size: 17px;
    font-weight: 700;
  }

  ::v-deep .el-calendar__header {
    border-bottom: 1px solid #ebeef5;
  }

  ::v-deep .el-calendar-table .el-calendar-day:hover {
    cursor: default;
    background: transparent;
  }

  ::v-deep .el-calendar-table:not(.is-range) td.next,
  .el-calendar-table:not(.is-range) td.prev {
    color: #6e6e6e;
    cursor: pointer;
  }
}
</style>
