<template>
    <div class="report-variety">
        <div v-for="itemGroup,index in opts" :key="index" class="group-list">
            <div style="flex-shrink: 0;margin-right:30px;width:100px">
                <el-checkbox 
                    class="item-group" 
                    :value="isCheckedAll(itemGroup)" 
                    :indeterminate="isIndeterminate(itemGroup)" 
                    @change="groupChange(itemGroup,$event)"
                    :disabled="disabled"
                >{{itemGroup.EnPermissionName}}:</el-checkbox>
            </div>
            <div style="flex:1">
                <el-checkbox 
                    style="margin-bottom:15px" 
                    v-model="checkedItems" 
                    v-for="item in itemGroup.Child" 
                    :key="item.EnPermissionId" 
                    :label="item.EnPermissionId"
                    :disabled="disabled"
                >{{item.EnPermissionName}}</el-checkbox>
            </div>
        </div>
    </div>
</template>

<script>
import { reportVarietyENInterence } from '@/api/api.js'
export default {
    props:{
        checked:[],
        disabled:false
    },
    data() {
        return {
            opts:[],
            checkedItems:this.checked||[],
        }
    },
    computed: {
        // 计算是否全选
        isCheckedAll(){
            return itemGroup=>itemGroup.Child.every(item=>this.checkedItems.includes(item.EnPermissionId))
        },
        // 计算是否模糊
        isIndeterminate(){
            return itemGroup=>!itemGroup.Child.every(item=>this.checkedItems.includes(item.EnPermissionId)) && itemGroup.Child.some(item=>this.checkedItems.includes(item.EnPermissionId))
        }
    },
    created(){
        this.getOpts()
    },
    methods:{
        getOpts(){
            reportVarietyENInterence.filterVarietyOpts({}).then(res=>{
                this.opts=res
            })
        },
        // 大项复选框改变
        groupChange(itemGroup,val){
            if(val){
                // 大项选中,将组中所有小项选中
                itemGroup.Child.forEach(item=>{
                    if(!this.checkedItems.includes(item.EnPermissionId)) this.checkedItems.push(item.EnPermissionId)
                })
            }else{
                // 大项取消,将组中所有小项取消
                this.checkedItems=this.checkedItems.filter(item=>!itemGroup.Child.map(item=>item.EnPermissionId).includes(item))
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.group-list{
    // line-height: 80px;
    margin-bottom: 20px;
    display: flex;
    .item-group{
        font-weight: 600;
    }
}
</style>