<template>
  <el-card>
    <el-date-picker
      v-model="monthValue"
      type="month"
      style="width: 120px"
      value-format="yyyy-MM"
      format="yyyy-MM"
      placeholder="选择月"
      @change="changeMonth"
      :clearable="false"
      :editable="false"
    ></el-date-picker>
    <el-calendar v-model="nowDate">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ date, data }">
        <!-- <p> -->
        <div class="date-day" :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split("-").slice(2).join("-") }}
        </div>

        <div
          class="subject-box scrollbar-out"
          v-for="(item, index) in formatSchedule(data)"
          :key="index"
        >
          <div
            v-if="item.list == '安全生产,大吉大利'"
            style="
              width: 100%;
              hight: 100%;
              font-size: 19px;
              font-weight: 400;
              color: #333333;
              text-align: center;
              line-height: 75px;
            "
          >
            <i
              class="el-icon-star-on"
              style="font-size: 19px; color: #0d85f4"
            ></i
            >{{ item.list }}
          </div>
          <div class="subject" v-else v-for="(list, index) in item.list">
            <p class="subject_info">
              <template>
                <span v-if="list.planType == 1">巡检记录</span>
                <span v-if="list.planType == 2">人工观测</span>
                <span v-if="list.planType == 3">设备校准</span>
              </template>
            </p>
            <p class="subject_info">
              责任人:{{ list.planName }}
              <el-tag
                class="subject-btn"
                type="warning"
                v-if="list.planStatus == 0"
                >未开始</el-tag
              >
              <el-tag
                class="subject-btn"
                type="success"
                v-if="list.planStatus == 1"
                >完成</el-tag
              >
              <el-tag
                class="subject-btn"
                type="error"
                v-if="list.planStatus == 2"
                >未完成</el-tag
              >
            </p>
          </div>
        </div>
      </template>
    </el-calendar>
  </el-card>
</template>
<script>
import { planList } from "@/api/lclApi/lclapi";

var moment = require("moment");
// moment().format();
export default {
  dicts: ["slope_ins_plan", "slope_ins_plan_status"],
  data() {
    return {
      schedule: [
        {
          date: "2023-03-01",
          list: [
            {
              id: 1,
              planDate: "2023-04-23",
              planType: "1",
              planName: "测试责任人",
              planStatus: 0,
            },
          ],
        },
        {
          date: "2023-03-03",
          list: "安全生产,大吉大利",
        },
      ],
      nowDate: "",
      nowMonth: "",
    };
  },
  computed: {
    formatSchedule() {
      return (data) => {
        return this.schedule.filter((ele) => {
          let time = ele.date; // 将时间戳转格式
          return moment(time).isSame(data.day); // 日历的时间是否和返回数据里的数据一样,返回的是布尔值
        });
      };
    },
    monthValue: {
      get: function () {
        return this.nowDate;
      },
      //当我筛选时间的时候调用set方法，赋值给日历组件绑定的v-model
      set: function (newValue) {
        this.nowDate = newValue;
      },
    },
  },
  watch: {
    currentDate(nVal) {
      this.schedule = [{ date: "2023-03-23" }, { date: "2023-03-25" }]; // 这个是后台返回的数据,在initList()里面赋值过,就不再赘述了
      this.schedule.time = this.$moment(nVal).format("YYYY-MM-DD");
      // this.initList();
    },
  },
  created() {
    let date = new Date();
    let year = date.getFullYear();
    let month =
      date.getMonth() + 1 < 10
        ? `0${date.getMonth() + 1}`
        : date.getMonth() + 1;

    let day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
    this.nowDate = `${year}-${month}-${day}`;
    this.nowMonth = `${year}-${month}`;
  },
  mounted() {
    this.$nextTick(() => {
      this.getList();
      console.log(this.dictionaryService.getDictLabels("slope_ins_plan"));
    });
  },
  methods: {
    getList() {
      let param = { planDate: `${this.nowMonth}-01` };
      planList(param).then((res) => {
        if (res && res.code === 200 && res.rows) {
          this.schedule = res.rows;
        }
      });
    },

    handleSelected(nowDate) {
      this.schedule.forEach((item) => {
        if (item.date == nowDate) {
          return item;
        }
      });
    },

    changeMonth(month) {
      this.nowMonth = month;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.is-selected {
  color: #1989fa;
}
.el-calendar {
}
::v-deep .el-calendar__header {
  display: none;
}
::v-deep .el-calendar-table .el-calendar-day {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  height: 105px;
  overflow: hidden;
  // height: auto;
  p {
    margin: 0;
  }
}
::v-deep .el-calendar__body {
  padding: 12px 0;
}
::v-deep .el-calendar-table {
  thead {
    th {
      border: 1px solid #c7d8ee;
      box-sizing: border-box;
      background-color: #cbe5fd;
      color: #333;
      height: 52px;
      font-size: 26px;
    }
  }
}
.date-day {
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: #f8f8f8;
  border-bottom: 1px solid #c7d8ee;
  text-align: center;
  font-size: 20px;
}
.subject-box {
  width: 100%;
  height: 75px;
  overflow: hidden;
  overflow-y: scroll;

  .subject {
    position: relative;
    overflow: hidden;
    margin-top: 4px;
    width: 100%;
    background: #eff6fc;
    border: 1px solid #ceddf0;
    box-sizing: border-box;
    padding-left: 5px;
    p {
      font-size: 20px;
      line-height: 30px;
    }
    .subject_info {
      width: 100%;
      position: relative;

      .subject-btn {
        position: absolute;
        right: 10px;
        top: 0;
      }
    }
  }
}

::v-deep .el-tag--medium {
  font-size: 12px;
  border-radius: 3px;
  font-size: 12px;
}

.scrollbar-out::-webkit-scrollbar {
  /*滚动条整体样式*/

  width: 2px; /*高宽分别对应横竖滚动条的尺寸*/

  height: 1px;
}

.scrollbar-out::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/

  border-radius: 10px;

  // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  background: #0cabdb;
}

.scrollbar-out::-webkit-scrollbar-track {
  /*滚动条里面轨道*/

  // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  // border-radius: 10px;

  // background: #ededed;
}
.is-selected {
  background-color: #1989fa;
  color: #fff;
  transition-duration: 0.5s;
}
</style>