
<template>
  <div class="business">
    <Head :headText="headText"></Head>
    <!-- <div class="count-top-right">
      <month-temp @pickerVal="pickerVal"></month-temp>
    </div> -->
    <el-calendar class="doBusinessContainer" v-model="value" :first-day-of-week="7">
      <template slot="dateCell" slot-scope="{date, data}">
        <template v-for="item in content" >
          <div 
          class="time-duration" 
          :key="item.id"
          v-if="showTimeDuration(date, item)"
          >
          <el-time-picker
            is-range
            v-model="item.timeRange"
            size="mini"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="HH:mm"
            value-format="timestamp"
            @change="setHours"
            placeholder="选择时间范围">
          </el-time-picker>
        </div>
        </template>

        <div class="dataJoin">{{ data.day.split('-').slice(2).join('')}}</div>
      </template>
    </el-calendar>
  </div>
</template>
<script>
import Head from "../main/index";
import MonthTemp from "./monthTemp";
import {queryHours,updateHours} from '@/api/doBusiness/business.js'
import {toTimestamp,timestamp2String} from '@/utils/helper.js'
export default {
  data() {
    return {
      headText: "营业时间调整",
      content:[],
      date:timestamp2String(+new Date()),
      value: new Date(),
    };
  },
  components: {
    Head,
    MonthTemp
  },
  computed:{
    gte(){
      let date = timestamp2String(+this.value)
      let month = parseInt(date.slice(4,6))-1
      return date.slice(0,4) + (month > 10 ? month : ('0'+month) )+ date.slice(6,8)
     
    },
    lt(){
       let date = timestamp2String(+this.value)
       let month = parseInt(date.slice(4,6))+1
       return date.slice(0,4) + (month > 10 ? month : ('0'+month) )+ date.slice(6,8)
    },
  },
  watch:{
    value(newVal, oldVal){
      if(newVal.getMonth() != oldVal.getMonth()) {
        this.getHours()
      }
    }
  },
  methods: {
    translate(){
      this.content.forEach(el=>{
        this.$set(el, 'timeRange', [new Date(toTimestamp(el.date+''+el.openTime)), new Date(toTimestamp(el.date+''+el.endTime))])
      })
    },
    pickerVal(val) {
      this.date = val
      console.log(this.date)
      
    },
    getHours(){
      this.content = []
      let params = {
        postParams:{
          criteria:{
            projectId:this.$store.state.projectId,
            date:{
              "$gte":this.gte,
              "$lt": this.lt
            }
          }
        }
      }
      queryHours(params).then(res=>{
        this.content= res.content?res.content:[]
        if(this.content.length>0){
            this.translate()
        }
       
      })
    },
    setHours(val){
      console.log(val)
      let params = {
        postParams:{
          projectId:this.$store.state.projectId,
          // 这里val[0]月份已经 +1 了, 
          date: timestamp2String(val[0], true).substr(0,8),
          openTime:timestamp2String(val[0]).substr(8,6),
          endTime: timestamp2String(val[1]).substr(8,6),
        }
      }
      updateHours(params).then(res=>{
        console.log(res)
      })
    },
    // 只展示当前月份的
    showTimeDuration(date, item) {
      const currentMonth = this.value.getMonth() + 1
      const nodeMonth = date.getMonth() + 1
      return currentMonth == nodeMonth && timestamp2String(+date).substr(0, 8) == item.date
    }
  },
  mounted(){
    this.getHours()
  }
};
</script>
<style lang="scss" scoped>
.count-top-right {
  width: 148px;
  padding: 16px;
}
.doBusinessContainer {
  margin-top: 20px;
  background: #fff;
  .time-duration {
    .el-input__inner {
      width: 134px;
      padding: 0;
      border: none;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(100, 108, 115, 1);
      line-height: 24px;
      padding: 1px 12px;
      height: 24px;
      background: rgba(245, 246, 247, 1);
      border-radius: 12px;
      margin-right: 17px;
    }
    .el-range-editor .el-range-input {
      border: none;
      background: rgba(245, 246, 247, 1);
    }
  }

}
</style>
<style lang="scss">
.business {
  .el-calendar-table thead th {
    text-align: right;
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(100, 106, 115, 1);
    line-height: 20px;
    padding-right: 15px;
  }
  // .el-calendar__header {
  //   display: none;
  // }
  .el-range-editor--mini .el-range-input {
    background: #f5f6f7;
  }
  .el-calendar-table .el-calendar-day {
    display: flex;
  }
}
</style>