<!-- 日历组件 -->
<template>
  <div class="calender-select" :style="{width: width}">

    <el-date-picker
      class="time-select"
      v-model="selectDate"
      type="month"
      value-format="yyyy-MM"
      :picker-options="pickerOptions"
      popper-class='my-date-picker'
      @change="timerChange"
    >
    </el-date-picker>

    <el-calendar
      v-model="selectCalender"
      @input="dayChange"

    >
      <template slot="dateCell" slot-scope="{date, data}">
        <div
          class="day-tag"
        >
          {{ data.day.split('-')[2] }}
          <div class="day-status">{{ getStatus(data.day) }}</div>
        </div>
      </template>
    </el-calendar>
  </div>

</template>

<script>
  import moment from "moment";
  export default {
    name: "calender-index",
    props:{
      value: {
        type: String,
        default: "",
      },
      scheduleData: {
          type: Array,
          default: ()=>[],
      },
      width: {
        type: [Number, String],
        default: '30%'
      }
    },
    data(){
      return{
        selectCalender: new Date(),
        selectDate: new Date(),
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
      }
    },
    mounted(){
      this.setDisabledDayClass();
    },
    methods:{
      timerChange(time){
        this.selectCalender = time;
        this.$emit("input", time + "-01");
        this.$emit('dateChange',0);
        this.$nextTick(()=>{
            this.setDisabledDayClass();
        })
      },
      dayChange(value){
        this.selectDate = moment(value).format("YYYY-MM");
        this.$emit("input", moment(value.getTime()).format("YYYY-MM-DD"));
        this.$emit('dateChange',1);
        this.$nextTick(()=>{
            this.setDisabledDayClass();
        })
      },
      getStatus(date){
        const data = this.scheduleData.find(item => item.date == date);
        return data ? data.content : "";
      },
      //限制今天后时间不可选
      setDisabledDayClass() {
        let disabledDayNode = document.getElementsByTagName('td');
        const jArr=JSON.parse(JSON.stringify(disabledDayNode) );
        const Array = [];
        for(let item in jArr){
          Array.push(disabledDayNode[item]);
        }
        let toIndex = Array.findIndex(item=>item.className&&item.className.includes('is-today'));
        Array.forEach((element,index) => {
          if( toIndex >= index || toIndex<0){
            element.className =element.className&& element.className.replaceAll("is-pervDay","");
          }else {
            element.className += ' is-pervDay'
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  .calender-select{
    //width: 30%;
    position: relative;
    .time-select{
      position: absolute;
      right: 20px;
      width: 190px;
    }
    .el-calendar__button-group{
      display: none;
    }

    .el-calendar-table__row td {
      // 去掉边框
      border: none !important;
      // 缩小高度
      .el-calendar-day {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        margin: 2px auto;
        text-align: center;
        display: flex;
      }
    }

    // 自定义选中、悬浮颜色
     .el-calendar-table .el-calendar-day:hover {
      color: #fff;
      background-color: #1890ff !important;
    }
    .el-calendar-table .is-today .el-calendar-day{
      color: #1890ff;
      //background-color: dodgerblue !important;
    }
    .el-calendar-table .is-selected{
      background-color: transparent;
    }
    .el-calendar-table .is-selected .el-calendar-day{
      color: #fff;
      background-color: #1890ff;
    }

   /* .current .el-calendar-day{
      background-color: rgba(255, 151, 10, 0.23);
      //border: 1px solid;
    }*/

    .day-tag{
      margin: auto auto;
    }

    .day-status{
      font-size: 9px;
      font-weight: 500;
    }

    .is-pervDay {
      pointer-events: none;
      background-color: #f5f5f5;
      color: #00000040 !important;
      /*.el-calendar-day{
        background-color: transparent;
      }*/
    }

  }

  //时间选择器
  .my-date-picker{
    width: 220px !important;

    .el-picker-panel__content{
      width: 200px !important;
    }
    .el-month-table td .cell {
      width: 40px !important;
    }
  }


</style>
