<template>
  <next-tree
      ref="nextTreeRef"
      check-strictly
      func-mode="radio"
      select-parent
      :if-search="false"
      :tree-data="treeData"
      :is-show-clear="isShowClear"
      theme-color="#3377ff"
      page-height="92vh"
      label-key="name"
      value-key="id"
      children-key="children"
      @confirm="fnTreeConfirm"
      @cancel="visible = false"
  />
</template>

<script>
import {getDepartmentTree} from "@/api";

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    value: {
      type: String,
      default: "",
    },
    isShowClear: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      treeData: []
    }
  },
  async mounted() {
    await this.fnGetData();
    this.$watch("visible", (newVal) => {
      if (newVal) {
        this.$refs.nextTreeRef && this.$refs.nextTreeRef._show();
        this.$refs.nextTreeRef && this.$refs.nextTreeRef.checkedFunc(this.value);
      } else this.$refs.nextTreeRef && this.$refs.nextTreeRef._hide();
    }, {immediate: true})
  },
  methods: {
    fnTreeConfirm(event) {
      this.$emit("confirm", event);
      this.$emit("update:visible", false);
    },
    async fnGetData() {
      const resData = await getDepartmentTree({
        loading: false,
        postMethod: 'application/json',
      });
      this.treeData = JSON.parse(resData.zTreeNodes);
    }
  },
}
</script>

<style scoped lang="scss"></style>
