<template>
  <div class="middle-event">
    <el-select type="primary" v-model="workType" @change="changeWorkType" v-show="!isRestDay(data)" style="width: 50%;">
      <el-option value="0" key="0" label="白班" />
      <el-option value="1" key="1" label="二班" />
      <el-option value="2" key="2" label="夜班" />
      <el-option value="3" key="3" label="双班(白+夜)" />
    </el-select>
    <el-button type="primary" @click="changeDay(data)"   plain >{{ isRestDay(data)?'休息':'工作' }}日</el-button>
  </div>
</template>
<script>
import {update} from "@/api/sjzx/gcrlWH";

export default {
  name:"GcrlProperties",
  props:{
    data:{
      type:Date,
      default:{}
    },
    restDays:{
      type:Array,
      default: []
    },
    eb:{
      type:Array,
      default: []
    },
    yb:{
      type:Array,
      default: []
    },
    sb:{
      type:Array,
      default: []
    },
  },
  data(){
    return{
      workType:null,
    }
  },
  mounted(){
    this.handler()
  },
  methods:{
    handler(){
      const data=this.dateFormat(this.$props.data)
      if (this.$props.eb.includes(data)){
        this.workType='1'
        return
      }
      if (this.$props.yb.includes(data)){
        this.workType='2'
        return
      }
      if (this.$props.sb.includes(data)){
        this.workType='3'
        return
      }
      this.workType='0'
    },
    changeWorkType(val){
      const dateF=this.dateFormat(this.$props.data);
      update({pb:this.workType,gl:dateF})
    },
    changeDay(date){
      var  dateF=this.dateFormat(date);
      if (this.$props.restDays.includes(dateF)){
        update({xxr:'1',gl:dateF}).then((res)=>{
          this.$props.restDays.splice(this.$props.restDays.indexOf(dateF) , 1)
        })
      }else {
        update({xxr:'0',gl:dateF}).then((res)=>{
          this.$props.restDays.push(dateF)
        })
      }
    },
    isRestDay(date){
      const dateF=this.dateFormat(date);
      return this.$props.restDays.includes(dateF)
    },
    dateFormat(date){
      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const day = ('0' + date.getDate()).slice(-2);
      var dateF=year+'/'+month+'/'+day;
      return dateF;
    },
    isHidden(date){
      // let today = new Date(Date.UTC(2024, 5, 18));
      let today = new Date();
      if (today.getDate()<21){
        return !(this.$props.data < today);
      }else {
        var lastDay= new Date(today.getFullYear(), today.getMonth()+1, 1);
        return !(date < lastDay);
      }

    },
  }
}
</script>
