<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">
        <td class="selectTions">
            <el-checkbox :true-label="1" :false-label="0" v-model="setParams.monday" @change="judgeAll"></el-checkbox>
        </td>
        <td class="t1">周一</td>
        <td class="t2">
            <span>{{setParams.mondayClassId?setParams.mondayClassName:'未设置'}}</span>
            <el-tag v-for="(item,index) in setParams.mondayClassTime.attendanceClassDetailList" :key="index" class="ml10">
                {{item.goWorkDate}}~{{item.offWorkDate}}</el-tag>
        </td>
        <td class="t1">
            <el-button type="text" @click="changebanci('monday')">更改班次</el-button>
        </td>
    </tr>

    <tr class="flex flex-align-center flex-pack-justify">
        <td class="selectTions">
            <el-checkbox :true-label="1" :false-label="0" v-model="setParams.tuesday" @change="judgeAll"></el-checkbox>
        </td>
        <td class="t1">周二</td>
        <td class="t2">
            {{setParams.tuesdayClassId?setParams.tuesdayClassName:'未设置'}}
            <el-tag class="ml10" v-for="(item,index) in setParams.tuesdayClassTime.attendanceClassDetailList" :key="index">{{item.goWorkDate}}~{{item.offWorkDate}}</el-tag>
        </td>
        <td class="t1">
            <el-button type="text" @click="changebanci('tuesday')">更改班次</el-button>
        </td>
    </tr>

    <tr class="flex flex-align-center flex-pack-justify">
        <td class="selectTions">
            <el-checkbox :true-label="1" :false-label="0" v-model="setParams.wednesday" @change="judgeAll"></el-checkbox>
        </td>
        <td class="t1">周三</td>
        <td class="t2">
            {{setParams.wednesdayClassId?setParams.wednesdayClassName:'未设置'}}
            <el-tag class="ml10" v-for="(item,index) in setParams.wednesdayClassTime.attendanceClassDetailList" :key="index">{{item.goWorkDate}}~{{item.offWorkDate}}</el-tag>
        </td>
        <td class="t1">
            <el-button type="text" @click="changebanci('wednesday')">更改班次</el-button>
        </td>
    </tr>

    <tr class="flex flex-align-center flex-pack-justify">
        <td class="selectTions">
            <el-checkbox :true-label="1" :false-label="0" v-model="setParams.thursday" @change="judgeAll"></el-checkbox>
        </td>
        <td class="t1">周四</td>
        <td class="t2">
            {{setParams.thursdayClassId?setParams.thursdayClassName:'未设置'}}
            <el-tag class="ml10" v-for="(item,index) in setParams.thursdayClassTime.attendanceClassDetailList" :key="index">{{item.goWorkDate}}~{{item.offWorkDate}}</el-tag>
        </td>
        <td class="t1">
            <el-button type="text" @click="changebanci('thursday')">更改班次</el-button>
        </td>
    </tr>

    <tr class="flex flex-align-center flex-pack-justify">
        <td class="selectTions">
            <el-checkbox :true-label="1" :false-label="0" v-model="setParams.friday" @change="judgeAll"></el-checkbox>
        </td>
        <td class="t1">周五</td>
        <td class="t2">
            {{setParams.fridayClassId?setParams.fridayClassName:'未设置'}}
            <el-tag class="ml10" v-for="(item,index) in setParams.fridayClassTime.attendanceClassDetailList" :key="index">{{item.goWorkDate}}~{{item.offWorkDate}}</el-tag>
        </td>
        <td class="t1">
            <el-button type="text" @click="changebanci('friday')">更改班次</el-button>
        </td>
    </tr>

    <tr class="flex flex-align-center flex-pack-justify">
        <td class="selectTions">
            <el-checkbox :true-label="1" :false-label="0" v-model="setParams.saturday" @change="judgeAll"></el-checkbox>
        </td>
        <td class="t1">周六</td>
        <td class="t2">
            {{setParams.saturdayClassId?setParams.saturdayClassName:'休息'}}
            <el-tag class="ml10" v-for="(item,index) in setParams.saturdayClassTime.attendanceClassDetailList" :key="index">{{item.goWorkDate}}~{{item.offWorkDate}}</el-tag>
        </td>
        <td class="t1">
            <el-button type="text" @click="changebanci('saturday')">更改班次</el-button>
        </td>
    </tr>

    <tr class="flex flex-align-center flex-pack-justify">
        <td class="selectTions">
            <el-checkbox :true-label="1" :false-label="0" v-model="setParams.sunday" @change="judgeAll"></el-checkbox>
        </td>
        <td class="t1">周日</td>
        <td class="t2">
            {{setParams.sundayClassId?setParams.sundayClassName:'休息'}}
            <el-tag class="ml10" v-for="(item,index) in setParams.sundayClassTime.attendanceClassDetailList" :key="index">{{item.goWorkDate}}~{{item.offWorkDate}}</el-tag>
        </td>
        <td class="t1">
            <el-button type="text" @click="changebanci('sunday')">更改班次</el-button>
        </td>
    </tr>
 </table>
</template>

<script>
export default {
    props:{
        setParams:{
            type:Object,
            default:{}
        }
    },
    data(){
        return{
            selectAll:false
        }
    },
    mounted(){
        // 判断全选
        this.judgeAll()
    },
    methods:{
        changebanci(from){
            this.$emit('changebanci',from)
        },
        allhandler(){
               if(this.selectAll){
                   this.setParams.monday = true
                   this.setParams.tuesday = true
                   this.setParams.wednesday = true
                   this.setParams.thursday = true
                   this.setParams.friday = true
                   this.setParams.saturday = true
                   this.setParams.sunday = true
               }else{
                   this.setParams.monday = false
                   this.setParams.tuesday = false
                   this.setParams.wednesday = false
                   this.setParams.thursday = false
                   this.setParams.friday = false
                   this.setParams.saturday = false
                   this.setParams.sunday = false
               }
        },
        judgeAll(){
            if(!this.setParams.monday){
                this.selectAll = false
                return
            }
            if(!this.setParams.tuesday){
                this.selectAll = false
                return
            }
            if(!this.setParams.wednesday){
                this.selectAll = false
                return
            }
            if(!this.setParams.thursday){
                this.selectAll = false
                return
            }
            if(!this.setParams.friday){
                this.selectAll = false
                return
            }
            if(!this.setParams.saturday){
                this.selectAll = false
                return
            }
            if(!this.setParams.sunday){
                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: 50px;
        line-height: 50px;
        padding: 0 20px;
    }
    .t1{
       flex: 1
    }
    .t2{
       flex: 2;
       color:gray;
    }
}
</style>