<template>
  <el-dialog :title="title" :class="`${prefixCls}`" width="30%" draggable v-model="drawerVisible" align-center :modal="false">
    <el-tree
      ref="elTreeRef"
      :data="data"
      nodeKey="key"
      show-checkbox
      check-on-click-node
      default-expand-all
      :default-checked-keys="defaultCheckedKeys"
      :expand-on-click-node="false"
      :props="treeProps"
    ></el-tree>
    <template #footer>
      <div class="flx-justify-between">
        <div class="footer-tips flx-start"></div>
        <div class="dialog-footer">
          <el-button @click="drawerVisible = false">{{ $t("common.cancelText") }}</el-button>
          <el-button type="primary" @click="confirm">
            {{ $t("common.okText") }}
          </el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="tsx" name="SelectorTree">
import { ref, reactive, provide, watch } from "vue";
import { useDesign } from "@/hooks/useDesign";
import { ElTree } from "element-plus";

interface SelectorTreeProps {
  title: string;
  /**
   * @description 展示数据
   */
  data?: any;
  /**
   * @description 默认勾选的节点的 key 的数组
   */
  defaultCheckedKeys: any;
}

const prop = withDefaults(defineProps<SelectorTreeProps>(), {
  title: "",
  defaultCheckedKeys: []
});

const { prefixCls } = useDesign("base-msg-from");
const dwname = "web_fx_saletaskmx_sel";
const drawerVisible = ref(false);
const selectList = ref([]);
const emit = defineEmits(["confirm"]);

const treeProps = {
  children: "children",
  label: "label"
};
const elTreeRef = ref<InstanceType<typeof ElTree>>();

// 展示
const show = () => {
  drawerVisible.value = true;
};

// 确认
const confirm = () => {
  emit("confirm", elTreeRef.value);
};
const close = () => {
  drawerVisible.value = false;
};

defineExpose({
  element: elTreeRef,
  show,
  close
});
</script>
