<template>
    <div style="margin: 0 auto; width: 1240px">
      <el-row :gutter="20">
        <el-col :span="24">
            <el-card>
                    <div class="grid-content bg-purple-dark">
                      停止接单：
                      <el-switch
                        v-model="value1"
                        active-text="开启后，将不再接预约单"
                      >
                      </el-switch>
                    </div>
            </el-card>

        </el-col>
        <br>

        <el-col :span="24">
          <el-card>
            接单间隔时长:
            <el-select v-model="params.serverGrap" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-card>
        </el-col>

        <el-col>
          <el-card>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <el-checkbox-group v-model="checkedDays" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="(Day,index) in DaysOptions" :label="Day" :key="Day" :disabled="Days[index].checked!=true">{{Day}}</el-checkbox>
            </el-checkbox-group>
            <el-time-select
                      placeholder="起始时间"
                      v-model="params.hoursFrom"
                      :picker-options="{
              start: params.hoursFrom,
              step: '00:30',
              end: params.hoursEnd
            }">
            </el-time-select>
            <el-time-select
                    placeholder="结束时间"
                    v-model="params.hoursEnd"
                    :picker-options="{
            start: params.hoursFrom,
            step:'00:30',
            end: params.hoursEnd,
            minTime:params.hoursFrom
          }">
                  </el-time-select>
          </el-card>
        </el-col>
        <el-col>
            <add-index
              ref="children"
              v-for="(item,index) in items"
              :key="index"
              :index="index"
              :items="items"
              :serverTimeList="serverTimeList "
              @deleteIndex="del"
              @handleCheckedCitiesChange="updateWeeks"

            >
            </add-index>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-button @click="addMore">+ 再添加一个时间</el-button>
        </el-col>
      </el-row>

      <el-button @click="UDateServerTime">保存</el-button>

      <el-checkbox v-model="checked">允许此服务人员自己修改服务时间</el-checkbox>
    </div>
</template>

<script>
  import AddIndex from './addIndex'
  import { getTime, listTime, updateTime } from '../../../api/system/serverTime'
  import { delSection, listSection, updateSection } from '../../../api/system/serverTimeSection'
  export default {
    name: 'index',
    components: { AddIndex },
    data(){
      return{
        value1: true,
        options: [
          {
          value: '选项1',
          label: '0.5',
        }, {
          value: '选项2',
          label: '1.0',
        }, {
          value: '选项3',
          label: '1.5',
        }, {
          value: '选项4',
          label: '2.0',
        }, {
          value: '选项5',
          label: '2.5',
        },
          {
            value: '选项6',
            label: '3.0',
          },
          {
            value: '选项7',
            label: '3.5',
          },
          {
            value: '选项8',
            label: '4.0',
          }
          ],
        Days:[
          {
            day:'周日',
            index:'0',
            checked:false,
          },
          {
            day: '周一',
            index:'1',
            checked:false,
          },
          {
            day:'周二',
            index:'2',
            checked:false,
          },
          {
            day:'周三',
            index:'3',
            checked:false,
          },
          {
            day:'周四',
            index:'4',
            checked:false,
          },
          {
            day:'周五',
            index:'5',
            checked:false,
          },
          {
            day:'周六',
            index:'6',
            checked:false,
          },
        ],
        DaysOptions:['周日','周一', '周二', '周三', '周四','周五','周六',],
        checkAll: false,
        isIndeterminate: true,
        items: [{}],
        dataRec: [],
        checkedDays:[],
        params:{
          serverId:'',
          hoursFrom:'',
          hoursEnd:'',
          weeks:'',
          sectionId:'',
          serverGrap:'',
          allowEdit:'',//不允许自己修改时间
          stopOrder:'',//0表示正常接单
          isEnable:'',//0表示不启用
          step:''
        },
        serverTimeList:[],
        checked:true,
        param:{},
      }
    },
    created(){
      this.params.serverId=this.$route.query.serverId;
      this.getServerTime();
      this.del();
    },
    methods:{
      getServerTime(){
        listTime(this.params).then(res=>{
          this.serverTimeList=res.rows;
          //默认填充第一条服务时间 记录，如果有记录
          if(this.serverTimeList.length>0){
            let list =this.serverTimeList[0].weeks.split(',')
            this.params.hoursFrom=this.serverTimeList[0].hoursFrom;
            this.params.hoursEnd=this.serverTimeList[0].hoursEnd;
            this.params.sectionId=this.serverTimeList[0].sectionId
            this.params.serverGrap=this.serverTimeList[0].serverGrap
           //初始化工作日
            for(let i in list){
              for(let index in this.Days){
                if(list[i]==this.Days[index].index){
                  this.checkedDays.push(this.Days[index].day)
                  this.Days[index].checked=true;
                }
                if(res.total==1){
                  this.Days[index].checked=true;
                }
              }
            }

            for(let i=1;i<this.serverTimeList.length;i++){
              if(this.items.length+1<this.serverTimeList.length){
                this.add()
              }

            }
          }
        })
      },
      UDateServerTime(){
        for(let i in this.checkedDays){
          for(let j in this.Days){
            if(this.checkedDays[i]==this.Days[j].day){
              this.checkedDays[i]=this.Days[j].index;
            }
          }
        }
        this.params.weeks=this.checkedDays.toString()
        if(this.checked==false){
          this.params.allowEdit='0'
        }
        if(this.checked==true){
          this.params.allowEdit='1'
        }
        if(this.value1==false){
          //0表示正常接单
          this.params.stopOrder='0'
          this.params.isEnable='1'
        }
        if(this.value1==true){
          this.params.stopOrder='1'
          this.params.isEnable='0'
        }
        //保存第一条
        updateTime(this.params).then(res=>{
          if(res.code=='200'){
            updateSection(this.params).then(ress=>{
              this.$modal.msgSuccess('修改成功')
            })
          }
        })
        //如果有多条
        if(this.items.length>0){
          let Weeks=this.params.weeks.split(',')
          for(let index in this.items){
            if(this.items.length<=2){
              let chilrdenParams=this.$refs.children[index].emitData();
              let temp=chilrdenParams.weeks.split(',')
              for(let j in temp){
                for(let tt in Weeks){
                  if(temp[j]==Weeks[tt]){
                    temp.splice(j,1)
                  }
                }
              }
              chilrdenParams.weeks=temp.toString()
              updateSection(chilrdenParams).then(r=>{
              })
            }
          }
        }
      },
      handleCheckAllChange(val){
        this.checkedDays = val ? this.DaysOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount ;
        this.checkAll = checkedCount === this.DaysOptions.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.DaysOptions.length;
        //更改时间子组件的工作日
        this.$refs.children[0].childernUpdateWeeks(value)
      },


      //  添加时间组件
      add: function () {
            this.items.push({index:''})
      },
      addMore(){
        //长度可以判断是否可以继续添加
        let justifyArr=[];
        listTime(this.params).then(res=>{
          let obj=res.rows;
          let arr=[];
          for(let i in obj){
            arr.push(obj[i].weeks.split(','))
          }
          for(let index in arr){
            for(let j in arr[index]){
              justifyArr.push(arr[index][j])
            }
          }
          if(justifyArr.length<7){
            this.items.push({index:''})
          }
          else {
            this.$modal.msgError('该服务人员档期已安排满')
          }

        })
      },
      // 删除时间组件
      del: function (index) {
          this.items.splice(index, 1)
          console.log('deleted:', JSON.stringify(this.items))
        if(this.serverTimeList.length>1){
          delSection(this.serverTimeList[index+1].sectionId).then(res=>{
          })
        }


      },

      //更改工作日
      updateWeeks(val){
        let arr=[];
        if(val.length>=this.checkedDays.length){
          for(let i=this.checkedDays.length;i<val.length;i++){
            for(let index in this.Days){
              if(val[i]===this.Days[index].day){
                arr.push(this.Days[index].index);
              }
            }

          }
          for(let index in this.Days){
            for(let i in this.checkedDays){
              if(this.Days[index].day!==this.checkedDays[i]&&this.Days[index].checked===false){
                this.Days[index].checked=true
              }
            }
            for(let j in arr){
              this.Days[arr[j]].checked=false
            }
          }

        }


      },

    }
  }
</script>

<style scoped>
  .el-card{
    margin-bottom: 20px;
  }

</style>
