<template>
  <li v-for="module in props.tree" :key="module.key">
    <div class="menu" :style="{ marginLeft: `${props.index * 24}px` }">
      <span class="checked-box-label">{{ module.slotTitle }}</span>
      <div v-if="module.children && module.children.some((e) => e.menuType === 2)">
        <RoleTreePoint :tree="module.children" @select-checkbox="selectCheckbox" />
      </div>
    </div>
    <template v-if="module.children && !module.children.some((e) => e.menuType === 2)">
      <RoleTreeMenu :tree="module.children" :index="props.index + 1" />
    </template>
  </li>
</template>
<script setup>
  import { useRoleStore } from '@jdlinker/func';
  import RoleTreePoint from './RoleTreePoint.vue';
  import RoleTreeMenu from '../RoleTree/RoleTreeMenu.vue';

  const props = defineProps({
    tree: {
      type: Array
    },
    index: {
      type: Number,
      default: 0
    }
  });
  defineEmits(['update:value']);
  const roleStore = useRoleStore();
  function selectCheckbox(module) {
    if (!module.key) {
      return;
    }
    // 是否勾选
    const checkedData = roleStore.checkedData;
    const findIndex = checkedData.indexOf(module.key);
    // 选中
    if (findIndex === -1) {
      // 选中本级以及子级
      roleStore.addCheckedDataAndChildren(module);
      // 选中上级
      roleStore.selectUpperLevel(module);
    } else {
      // 取消选中本级以及子级
      roleStore.deleteCheckedDataAndChildren(module);
    }
  }
</script>
