<template>
  <div id="">
    <div class="menu_tree" v-if="showtwo && isChecked == 'tree'">
      <p @click="treeClose"><a-icon type="down" /></p>
      <a-tree
        :tree-data="menuInfos"
        @select="handleNodeClick"
        :fieldNames="defaultProps"
        ref="trees" />
    </div>
    <div class="tree_menu" v-if="!showtwo && isChecked == 'tree'">
      <p @click="closeTree"><a-icon type="down" /></p>
      <a-tree :tree-data="treeInfos" @select="handleNodeClick" :fieldNames="defaultProps" ref="trees" />
    </div>
    <div v-if="isChecked == 'treeCheck'">
      <a-tree
        :tree-data="treeInfos"
        checkable
        :fieldNames="defaultProps"
        :checked-keys="selectedKeys"
        :check-Strictly="true"
        @select="handleNodeClick"
        @check="handleCheckChange"
        ref="trees" />
    </div>
  </div>
</template>

<script>
import request from '../utils/gw_ajax_request.js';
export default {
  props: ['menuInfo', 'isChecked', 'id', 'treeInfos', 'defaultProps', 'curIds'],
  data() {
    return {
      menuInfos: [],
      checkedIds: [],
      showtwo: 0,
      selectedKeys: [],
    };
  },
  created() {},
  mounted() {
    if (this.curIds) {
      this.selectedKeys = this.curIds;
    }
  },
  methods: {
    closeTree() {
      this.$emit('closeTree', 0);
    },
    treeClose() {
      this.$emit('closeTree', 0);
    },
    handleNodeClick(selectedKeys, e) {
      this.$emit('sendMenuInfo', e.node.dataRef);
    },
    handleCheckChange(checkedKeys, e) {
      // if(checked){
      // this.checkedIds.push(data.id)
      // console.log(this.checkedIds)
      // this.checkedIds = Array.from(new Set(this.checkedIds))
      // console.log(this.checkedIds)
      // }
      this.selectedKeys = checkedKeys;
      this.$emit('sendCheckedInfo', this.selectedKeys);
    },
  },
  watch: {
    curIds(val) {
      if (val) {
        this.selectedKeys = val;
      } else {
        this.selectedKeys = [];
      }
    },
  },
};
</script>

<style lang='less' scoped>

</style>
