<script setup>
import { computed, ref } from 'vue'
import { reportVarietyENInterence } from '@/api/api.js'

const props = defineProps({
  checked:{
    type: Array
  },
  disabled:{
    type: Boolean
  }
})

// 计算是否全选
const isCheckedAll = computed(()=>{
    return itemGroup=>itemGroup.Child.every(item=>checkedItems.value.includes(item.EnPermissionId))
})
// 计算是否模糊
const isIndeterminate = computed(()=>{
    return itemGroup=>!itemGroup.Child.every(item=>checkedItems.value.includes(item.EnPermissionId)) && itemGroup.Child.some(item=>checkedItems.value.includes(item.EnPermissionId))
})


const opts = ref([])
const checkedItems = ref(props.checked||[])
function getOpts(){
    reportVarietyENInterence.filterVarietyOpts({}).then(res=>{
        opts.value=res
    })
}
getOpts()

// 大项复选框改变
function groupChange(itemGroup,val){
    if(val){
        // 大项选中,将组中所有小项选中
        itemGroup.Child.forEach(item=>{
            if(!checkedItems.value.includes(item.EnPermissionId)) checkedItems.value.push(item.EnPermissionId)
        })
    }else{
        // 大项取消,将组中所有小项取消
        checkedItems.value=checkedItems.value.filter(item=>!itemGroup.Child.map(item=>item.EnPermissionId).includes(item))
    }
}

defineExpose({
  checkedItems
})

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