<!--
用法注意:
 如需要返显，则加上  selectedItems 属性
 其中传入的如果是String，格式为 ids|names 或 codes?names，ids表示传入的是id，codes表示传入的是code，英文逗号隔开
 如果是数组,格式为 [{id: "", title: ""},...] 或 [{code: "", title: ""},...]
-->
<template>
  <Input
    v-bind="$attrs"
    :value="value"
    :placeholder="this.$t('请输入')"
    :searchInputPlaceholder="searchInputPlaceholder"
    :title="value"
    :icon="showClose ? 'ios-close-circle':'md-search'"
    :clearable="showClose"
    readonly
    :disabled="disabled"
    v-on="$listeners"
    @click.native="showEmployeeTree"
    @on-click.stop="handleIconClick"
    @mouseenter.native="handleInputMouseenter"
    @mouseleave.native="handleInputMouseleave"
  />
</template>
<script>
/**
 * 选择员工
 */
import OrgTree from '../orgTree/OrgTree';
export default {
  name: 'SelectEmployee',
  components: {},
  directives: {},
  props: {
    size: {
      type: String,
      default: 'default'
    },
    // 弹出框标题
    title: {
      type: String,
      default() {
        return '';
      }
    },
    value: {
      type: String,
      default() {
        return '';
      }
    },
    // 搜索框默认显示字段
    searchInputPlaceholder: {
      type: String,
      default() {
        return '';
      }
    },
    // 限制选择几个(用于可以多选但是限制选择个数)
    len: {
      type: [String, Number],
      default: 99999
    },
    // 是否显示checkbox
    isShowCheckbox: {
      type: Boolean,
      default: true
    },
    // 是否多选
    isMultiple: {
      type: Boolean,
      default: false
    },
    // 部门ID  如果有传入，则只能选择该部门下的员工
    departmentId: {
      type: String,
      default: ''
    },
    // 增加了一个接口用来查人，baseUrl / claimURL
    queryFrom: {
      type: String,
      default: 'base'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 选中的选项
    selectedItems: {
      type: [Array, String, Boolean],
      default() {
        return [];
      }
    },
    clearable: {
      type: Boolean,
      default: false
    },
    groupCode: {
      type: [String, Number],
      default: ''
    },
    isdisAbledMessage: {
      type: String,
      default: ''
    },
    departmentId_wdz: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      showClose: false
    };
  },
  computed: {},
  watch: {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    handleInputMouseenter() {
      if (!!this.value && this.clearable) {
        this.showClose = true;
      }
    },
    handleInputMouseleave() {
      this.showClose = false;
    },
    handleIconClick(e) {
      this.showEmployeeTree(e);
    },
    showEmployeeTree(e) {
      if (this.disabled) {
        return false;
      }
      if (!this.groupCode && this.isdisAbledMessage) {
        this.$Message.info(this.isdisAbledMessage);
        return;
      };
      if (e.target.tagName === 'I' && this.showClose) {
        this.$emit('handleSelect');
        this.showClose = false;
        return;
      }
      new this.$pageModal(
        OrgTree,
        {
          props: {
            treeType: 'employee',
            title: this.title,
            len: this.len,
            groupCode: this.groupCode,
            searchInputPlaceholder: this.searchInputPlaceholder,
            isShowCheckbox: this.isShowCheckbox,
            isMultiple: this.isMultiple,
            departmentId: this.departmentId,
            queryFrom: this.queryFrom,
            selectedItems: this.selectedItems,
            departmentId_wdz: this.departmentId_wdz
          }
        },
        data => {
          if (data) {
            this.$emit('handleSelect', data);
          }
        }
      );
    }
  }
};
</script>
<style>
.ems-select-employee /deep/ .ivu-input {
  height: 30px;
}
</style>
