<template>
  <div class="hello">

    <el-row :gutter="20">
      <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="endTime"
            :picker-options="{
            start: params.hoursFrom,
            step:'00:30',
            end: params.hoursEnd,
            minTime:params.hoursFrom
          }">
          </el-time-select>
            <el-button @click="deleteStudent" size="small" style="color: red">删除</el-button>


        </el-card>
      </el-col>


    </el-row>




  </div>
</template>

<script>
  import { delSection, listSection, updateSection } from '../../../api/system/serverTimeSection'
  import { listTime } from '../../../api/system/serverTime'

  export default {
    name: 'addIndex',
    props: {
      index: {
        type: Number,
        required: true
      },
      items: {
        type: Array,
        default: Array
      },
      serverTimeList: {
        type: Array,
        required: true
      }
    },
    data () {
      return {
        intervalTime: '',
        checkedDays:[],
        checkAll: false,
        DaysOptions:['周日','周一', '周二', '周三', '周四','周五','周六',],
        isIndeterminate: true,
        startTime:'',
        endTime:'',
        item:this.items,
        index1:this.index,
        serverTime:this.serverTimeList,
        params:{
          serverId:'',
          hoursFrom:'',
          hoursEnd:'',
          weeks:'',
          sectionId:'',
          serverGrap:'',
          allowEdit:'',//不允许自己修改时间
          stopOrder:'',//0表示正常接单
          isEnable:'',//0表示不启用
          step:''
        },
        options: [
          {
          value: '选项1',
          label: '0.5',
        },
          {
          value: '选项2',
          label: '1.0',
        },
          {
          value: '选项3',
          label: '1.5',
          step:'01:30'
        },
          {
          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:true,
          },
          {
            day: '周一',
            index:'1',
            checked:true,
          },
          {
            day:'周二',
            index:'2',
            checked:true,
          },
          {
            day:'周三',
            index:'3',
            checked:true,
          },
          {
            day:'周四',
            index:'4',
            checked:true,
          },
          {
            day:'周五',
            index:'5',
            checked:true,
          },
          {
            day:'周六',
            index:'6',
            checked:true,
          },
        ],


      }
    },
    watch: {

    },
    mounted(){
      this.dateCreate();
    },
    created(){

    },
    methods: {
      dateCreate(){
        let list =this.serverTime[0].weeks.split(',')
        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=false
            }
          }
        }
        if(this.serverTime.length>1){
            let listEnd=this.serverTime[this.index1+1].weeks.split(',')
            for(let j in listEnd){
              for(let index in this.Days){
                if(listEnd[j]===this.Days[index].index){
                  this.checkedDays.push(this.Days[index].day)
                  this.Days[index].checked=true
                }
              }
            }
          this.params.hoursFrom=this.serverTime[this.index1+1].hoursFrom;
          this.params.hoursEnd=this.serverTime[this.index1+1].hoursEnd;
          this.params.sectionId=this.serverTime[this.index1+1].sectionId
        }
      },
      deleteStudent: function () {
        this.$emit('deleteIndex', this.index1)
      },
      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.$emit('handleCheckedCitiesChange',value);

      },
      childernUpdateWeeks(val) {
        this.checkedDays=[];
        this.dateCreate();
        let arr=JSON.parse(JSON.stringify(this.checkedDays))
        for(let index in val){
          for (let indee in arr){
            if(arr[indee]==val[index]){
             arr.splice(indee,1)
            }

          }
        }
        console.log(arr)
        for(let j in arr){
        for(let i in this.Days){
            if(arr[j]===this.Days[i].day&&this.Days[i].checked===false){
              this.Days[i].checked=true;
            }
          }
        }
      },
      emitData(){
        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()
        return this.params
      }
    }
  }
</script>

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

</style>
