<template>
  <div :class="wrapClasses">
    <TreeNode
      :id="(id)?(id+item.id):''"
      v-for="(item,index) in tree"
      :key="index"
      :node="item"
      :level="0"
      :action="item.action"
      :data_id="item.id"
      :data_name="item[titleKey]"
      :disabled="item.disabled"
      :expand="item.expand"
      :check="item.check"
    ></TreeNode>
  </div>
</template>
<script>
import TreeNode from "../tree/tree-node";
import { prefix } from "../var";
const treePrefix = prefix + "tree";
export default {
  name: "Tree",
  components: { TreeNode },
  props: {
    id:{
      type:String,
      default:''
    },
    value:[Array,String,Number,Object],
    tree: {
      type: Array,
      default() {
        return [];
      }
    },
    selectTree:{
      type:Boolean,
      default:false
    },
    parentSelectDisabled:{
      type:Boolean,
      default:false
    },
    familySelect:{
      type:Boolean,
      default:false
    },
    type: {
      type: String,
      default: "single"
    },
    checkable: {
      type: Boolean,
      default: false
    },
    checkPosition: {
      type: String,
      default: "left"
    },
    defaultLeft:{
      type:Number,
      default:0
    },
    // accordion:{
    //     type:Boolean,
    //     default:false
    // },
    // minChecked:{
    //     type:Number
    // },
    // maxChecked:{
    //     type:Number
    // },
    iconType: {
      type: String,
      default: "triangle-down"
    },
    unCheckIcon: {
      type: String | Boolean,
      default: false
    },
    loadData: [Function,Boolean],
    loadIcon: {
      type: String,
      default: "loading"
    },
    multiDisabledChild: {
      type: Boolean,
      default: false
    },
    titleKey: {
      type: String,
      default: "title"
    },
    childKey: {
      type: String,
      default: "childs"
    },
    editable:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      //data:this.tree,
      checkid: [],
      checkArray: [],
      selected: "",
    };
  },
  watch: {
    value:{
      handler(val){
        this.handleChangeValue()
      },
      deep:true
    }
  },
  computed: {
    wrapClasses() {
      return `${treePrefix}`;
    }
  },
  methods: {
    handleChangeValue(){
      let val = this.value
      if(this.type==='single'){
        if(typeof val === 'object'){
          this.selected = val.id;
          this.findChild(child => {
            if (child.node.id == val.id) {
              child.selected = true;
            }else{
              child.selected = false;
            }
          });
        }else{
          this.selected = val;
          this.findChild(child => {
            if (child.node.id == val) {
              child.selected = true;
            }else{
              child.selected = false;
            }
          });
        }
      }else{
        this.checkid = val;
        this.checkArray = [];
        this.findChild(child => {
          if (val.indexOf(child.node.id)>-1) {
            this.checkArray.push(child.node)
            child.checked = true;
          }else{
            child.checked = false;
          }
        });
      }
    },
    // 以下方法先禁掉，当前业务无需此功能，并且此功能没有写完全
    // 寻找当前节点下符合条件的所有节点
    findChild(cb) {
      const find = function(child) {
        const name = child.$options.componentName;
        if (name) {
          cb(child);
        }
        if (child.$children.length) {
          child.$children.forEach(innerChild => {
            find(innerChild, cb);
          });
        }
      };
      this.$children.forEach(child => {
        find(child);
      });
    },
    // handleClickNode(node){//点击节点时，选中当前节点
    //     this.findChild((child) => {
    //         child.selected = false;
    //     });
    //     node.selected = true;
    //     this.$emit("on-click-node",node.data);
    // },
    handleCheckNode(node) {
      if (node.data) {
        //更新选中
        if (node.checked) {
          //选中
          if (this.checkid.indexOf(node.data.id) < 0 && !node.forbided) {
            this.checkid.push(node.data.id);
            this.checkArray.push(node.data);
          } else if (this.checkid.indexOf(node.data.id) > -1 && node.forbided) {
              let index = this.checkid.indexOf(node.data.id);
            this.checkArray.splice(index, 1);
            this.checkid.splice(index, 1);
          }
        } else if (this.checkid.indexOf(node.data.id) > -1) {
              let index = this.checkid.indexOf(node.data.id);
            this.checkArray.splice(index, 1);
            this.checkid.splice(index, 1);
        }
        this.$emit("on-check-node", {id:this.checkid,value:this.checkArray});
      }
    },
    handleSelectNode(node) {
      this.selected = node.node.id;
      this.findChild(child => {
        if (child.node.id !== node.node.id) {
          child.selected = false;
        }
      });

      this.$emit("on-select-node", node);
    },
    handleUpdateSelectedTree(selected){
      if(this.selectTree){
        this.$emit("on-select-tree",selected)
      }
    },
    handleActionNode(item){
      if(this.editable)
        this.$emit("on-action-node",item)

    }
  },
  mounted() {
    // 以下方法先禁掉，当前业务无需此功能，并且此功能没有写完全
    //this.$on('on-click', this.handleClickNode);
    this.$on("on-check", this.handleCheckNode);
    this.$on("on-action", this.handleActionNode);
    this.$on("on-select", this.handleSelectNode);
    this.$on("on-update-selectedtree", this.handleUpdateSelectedTree);
    // 初始化value
    this.handleChangeValue()
  }
};
</script>
