<template>
  <div style="overflow: auto" :style="{ height }">
    <CheckboxGroup v-model:value="checkedData">
      <div class="checked-box" :style="{ width: checkBoxWidth }">
        <ul>
          <RoleTreeMenu :tree="props.tree" :index="0" />
        </ul>
      </div>
    </CheckboxGroup>
  </div>
</template>
<script setup>
  import { ref, watch } from 'vue';
  import { useRoleStore } from '@jdlinker/func';
  import RoleTreeMenu from '../RoleTree/RoleTreeMenu.vue';
  import { CheckboxGroup } from 'ant-design-vue';

  let props = defineProps({
    tree: {
      type: Array
    },
    height: {
      type: String,
      default: '318px'
    },
    checkBoxWidth: {
      type: String,
      default: '600px'
    }
  });
  defineEmits(['update:value']);

  const roleStore = useRoleStore();
  const checkedData = ref();
  watch(
    () => roleStore.checkedData,
    (e) => {
      checkedData.value = e;
    },
    { immediate: true, deep: true }
  );
</script>
<style scoped lang="less">
  @import './index.less';
</style>
