<template>
  <table class="table mt10">
    <th class="heads flex flex-align-center flex-pack-justify">
        <td class="selectTions">
            <el-checkbox v-model="selectAll" @change="allhandler"></el-checkbox>
        </td>
        <td class="t1">工作日</td>
        <td class="t2">班次时间段</td>
        <td class="t1">操作</td>
    </th>
    <tr class="flex flex-align-center flex-pack-justify" v-for="(item,index) in typeList" :key="index">
        <td class="selectTions">
            <el-checkbox :true-label="1" :false-label="0" v-model="setParams[item.value]" @change="judgeAll"></el-checkbox>
        </td>
        <td class="t1">{{item.name}}</td>
        <td class="t2">
            <span>{{setParams[item.value+'ClassId']?setParams[item.value+'ClassName']:'未设置'}}</span>

            <el-tag v-for="(item,index) in setParams[item.value+'ClassTime'].attendanceClassDetailList" :key="index"
            class="ml10">
            {{item.goWorkDate}}~{{item.offWorkDate}}</el-tag>

        </td>
        <td class="t1">
            <el-button type="text" @click="changebanci(item.value)">更改班次</el-button>
        </td>
    </tr>
 </table>
</template>

<script>
export default {
    props:{
        setParams:{
            type:Object,
            default:{}
        }
    },
    data(){
        return{
            selectAll:false,
            typeList:[
                {
                    name:'周一',
                    value:'monday'
                },
                {
                    name:'周二',
                    value:'tuesday'
                },
                {
                    name:'周三',
                    value:'wednesday'
                },
                {
                    name:'周四',
                    value:'thursday'
                },
                {
                    name:'周五',
                    value:'friday'
                },
                {
                    name:'周六',
                    value:'saturday'
                },
                {
                    name:'周日',
                    value:'sunday'
                }
            ]
        }
    },
    watch:{
        setParams:{
            handler(newval){
                this.$forceUpdate()
            },
            deep:true
        }
    },
    mounted(){
        // 判断全选
        this.judgeAll()
    },
    methods:{
        changebanci(from){
            this.$emit('changebanci',from)
        },
        allhandler(){
               if(this.selectAll){
                   for(let item of this.typeList){
                    let key = item.value
                    this.setParams[key] = 1
                   }
               }else{
                   for(let item of this.typeList){
                    let key = item.value
                    this.setParams[key] = 0
                    this.setParams[key+'ClassTime'] = []
                    this.setParams[key+'ClassName'] = ''
                    this.setParams[key+'ClassId'] = ''
                   }
               }
        },
        judgeAll(){
            for(let item of this.typeList){
                let key = item.value
                if(!this.setParams[key]){
                    this.setParams[key+'ClassTime'] = []
                    this.setParams[key+'ClassName'] = ''
                    this.setParams[key+'ClassId'] = ''
                    this.selectAll = false
                    return
                }                
            }
            this.selectAll = true
        }
    }
}
</script>

<style lang="scss" scoped>
.table{
    width: 90%;
    .selectTions{
        margin-right: 10px;
    }
    .heads{
        background-color: #cae4fd;
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
    }
    tr{
        height: 90px;
        line-height: 30px;
        padding: 0 20px;
    }
    .t1{
       flex: 1
    }
    .t2{
       flex: 2;
       color:gray;
    }
}
</style>