<!--
组织树用法:

1、只要叶子节点数据
<SelectOrganization @handleSelect="handleXX" selectType="leaf"></SelectOrganization>
2、有父节点返回父节点&没有则返回本身的数据
<SelectOrganization @handleSelect="handleXX" selectType="parent" :isShowCheckbox="false" :isMultiple="true"></SelectOrganization>
3、原始数据，自己处理
<SelectOrganization @handleSelect="handleXX"></SelectOrganization>
4、单选
<SelectOrganization @handleSelect="handleXX" :isShowCheckbox="false" :isMultiple="false"></SelectOrganization>
5、多选，但要控制数量
 1）<SelectOrganization @handleSelect="handleXX" :isShowCheckbox="true" selectType="leaf/parent" :len="5"></SelectOrganization>
 2）<SelectOrganization @handleSelect="handleXX" :isShowCheckbox="true" selectType="leaf/parent" :len="5"></SelectOrganization>

 如需要返显，则加上  selectedItems 属性
 其中传入的如果是String，格式为 ids|names 或 codes?names，ids表示传入的是id，codes表示传入的是code，英文逗号隔开
 如果是数组,格式为 [{id: "", title: ""},...] 或 [{code: "", title: ""},...]
-->
<template>
  <Input
    v-show="isShowTemplate"
    v-bind="$attrs"
    v-on="$listeners"
    :value="value"
    :title="value"
    :icon="getDisabled || showClearable ? false:'log-in'"
    :clearable="showClearable"
    readonly
    :disabled="getDisabled"
    @click.native="handleClick"
    @on-click.stop="handleIconClick"
    @mouseenter.native="handleInputMouseenter"
    @mouseleave.native="handleInputMouseleave"
  />
</template>
<script>
/**
 * 选择组织机构(部门)
 */
import OrgTree from "../orgTree/OrgTree";
export default {
  name: "SelectOrganization",
  components: {},
  props: {
    isShowTemplate: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ""
    },
    title: {
      type: String
    },
    component: {
      type: String,
      default: ""
    },
    // 搜索框默认显示字段
    searchInputPlaceholder: {
      type: String,
      default() {
        return "请输入";
      }
    },
    // 限制选择几个(用于可以多选但是限制选择个数)
    len: {
      type: [String, Number],
      default: 99999
    },
    // 是否显示checkbox
    isShowCheckbox: {
      type: Boolean,
      default: true
    },
    // 是否多选
    isMultiple: {
      type: Boolean,
      default: false
    },
    // 选中的选项：其中传入的如果是String，格式为 ids|names
    selectedItems: {
      type: [Array, String],
      default() {
        return [];
      }
    },
    // 返回数据的类型：leaf-只返回叶子节点, parent-只返回父级, all-全部
    selectType: {
      type: String,
      default: "all"
      // validator(val){
      //   return ["leaf", "parent", "all"].indexOf(val) !== -1
      // }
    },
    hideNoChildArrow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showClearable: false
    };
  },
  computed: {
    /*
     * 设置文本框 禁用启用
     *  0.默认不启用
     *  1.使用组件，增加 props:disabled ，不传值 或者值不为false。则文本框状态都为 disabled:true;
     */
    getDisabled() {
      if (this.disabled === false) {
        return false;
      }
      return true;
    },
    /**
     * 设置文本框 是否需要清楚内容icon。
     */
    getClearable() {
      if (this.clearable || this.clearable === "") {
        return true;
      }
      return false;
    }
  },
  created: function() {},
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    handleClick(e) {
      if (this.getDisabled) return;
      if (e && e.target.tagName === "I") {
        this.$emit("handleSelect");
      } else {
        // new this.$pageModal(
        //   resolve => {
        //     require([`./${this.component}.vue`], resolve);
        //   },
        //   {
        //     props: {
        //       title: this.title
        //     }
        //   },
        //   data => {
        //     if (data) {
        //       this.$emit("handleSelect", data);
        //     }
        //   }
        // );
        new this.$pageModal(
          OrgTree,
          {
            props: {
              treeType: "department",
              title: this.title,
              len: this.len,
              searchInputPlaceholder: this.searchInputPlaceholder,
              isShowCheckbox: this.isShowCheckbox,
              isMultiple: this.isMultiple,
              hideNoChildArrow: this.hideNoChildArrow,
              selectedItems: this.selectedItems,
              selectType: this.selectType
            }
          },
          data => {
            if (data) {
              if (this.selectType === "parent") {
                data = this.selectParent(data);
              }
              this.$emit("handleSelect", data);
            }
          }
        );
      }
    },
    handleIconClick() {
      this.handleClick();
    },
    handleInputMouseenter() {
      if (this.getDisabled) return;
      if (this.getClearable && this.value) {
        this.showClearable = true;
      } else {
        this.showClearable = false;
      }
    },
    handleInputMouseleave() {
      if (this.getDisabled) return;
      this.showClearable = false;
    },
    selectParent(checkNodes) {
      if (checkNodes.length > 1) {
        let getResult = function (item, arr) {
          let result = [];
          arr.forEach(element => {
            if (item.id == element.id) {
              result.push(element);
            } else if (
              item.id != element.id &&
              element.orgPath != item.orgPath &&
              element.orgPath.indexOf(item.orgPath) < 0
            ) {
              result.push(element);
            }
          });
          return result;
        }
        let result = checkNodes;
        for (let i = 0; i < result.length; i++) {
          result = getResult(result[i], result);
        }
        return result;
      } else {
        return checkNodes;
      }
    }
  },
  watch: {},
  directives: {}
};
</script>
