<script setup>
const props = defineProps({
  autharr: {
    type: Array
  }
})
/* 选择全选或取消全选 */
function handleCheckAll(item) {
  // 取到所有的子菜单id
  let ids = item.Items.map(item => {
    return item.ChartPermissionId
  })
  item.CheckList = item.checkAll ? ids : [];
  item.isIndeterminate = false;
}
/* 复选框組选中时 */
function handleChecked(item) {
  let len = item.CheckList.length;
  item.checkAll = len === item.Items.length;
  item.isIndeterminate = len > 0 && len < item.Items.length;
}


</script>

<template>
  <!-- 申请解冻/申请领取权限列表 -->
  <div class="authContainer">
    <h3>请选择需要开通试用的品种：</h3>
    <ul class="menu_lists">
      <li
        v-for="item in props.autharr"
        :key="item.ClassifyName"
        class="menu_item"
      >
        <el-checkbox
          :indeterminate="item.isIndeterminate"
          v-model="item.checkAll"
          :disabled="item.ClassifyName === '宏观经济'"
          style="marginright: 30px; fontweight: bold; minwidth: 90px"
          @change="handleCheckAll(item)"
          >{{ item.ClassifyName + ":" }}</el-checkbox
        >
        <el-checkbox-group
          v-model="item.CheckList"
          @change="handleChecked(item)"
        >
          <el-checkbox
            v-for="list in item.Items"
            :label="list.ChartPermissionId"
            :key="list.ChartPermissionId"
            class="list_item"
            :disabled="list.ChartPermissionId === 1"
            >{{ list.PermissionName }}</el-checkbox
          >
        </el-checkbox-group>
      </li>
    </ul>
  </div>
</template>

<style lang='scss' scoped>
.authContainer {
  padding-top: 20px;
  border-top: 1px dashed #dcdcdc;
  .menu_lists {
    padding: 20px 0 0;
    border-radius: 4px;
    .menu_item {
      display: flex;
      // align-items: center;
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
      .list_item {
        margin-right: 20px;
        margin-bottom: 10px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>