/*
 * @Author: Anmin
 * @Email:changanmin1@crc.com.hk
 * @Date: 2019-03-13 10:46:37
 * @Last Modified by: Anmin
 * @Last Modified time: 2019-08-14 17:53:46
 * @description:  统一文本框弹出组件 引入ems-plugin中的插件，通过传值 重写SelectInput 中的方法实现加载本地项目的组件
 */
<template>
  <Input
    v-if="$attrs.eleType !='btn'"
    v-bind="$attrs"
    :value="value"
    :title="value"
    :icon="(getDisabled || showClearable) && showClear ? '':'md-search'"
    :clearable="showClearable && showClear"
    readonly
    :disabled="getDisabled"
    :placeholder="placeholder"
    v-on="$listeners"
    @click.native="handleClick"
    @on-click.stop="handleIconClick"
    @mouseenter.native="handleInputMouseenter"
    @mouseleave.native="handleInputMouseleave"
  />
  <Button
    v-else
    v-bind="$attrs"
    :value="value"
    v-on="$listeners"
    @click.native="handleClick"
  >
    {{ value }}
  </Button>
</template>

<script>
export default {
  name: 'SelectInput',
  props: {
    width: {
      type: [Number, String],
      default: 1000
    },

    zIndex: {
      type: Number,
      default: 1011
    },
    // 是否禁用 文本框
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    // 需要清除文本内容么
    clearable: {
      type: Boolean,
      default: false
    },
    // 要显示在文本框的值
    value: {
      type: String,
      default: ''
    },
    // 标题内容
    title: {
      type: String
    },
    placeholder: {
      type: String,
      default: ''
    },
    // 要加载的组件名称，名称必须和文件名字一致
    component: {
      type: [String, Object, Function],
      default: ''
    },
    /*
      modules: 值为空 或者 ems-plugin.
       值为ems-plugin:表示加载当前ems-plugin 中的组件
       值为""表示加载当前运行项目中的@/components/SelectInput/${this.componet}.vue 下的文件
     */
    modules: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'default'
    },
    showClear: {
      type: Boolean,
      default: true
    },
    groupTypeCode: {
      type: [String, Number],
      default: ''
    },
    isdisAbledMessage: {
      type: String,
      default: ''
    }
  },
  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;
    }
  },
  methods: {
    handleClick(e) {
      if (this.getDisabled || this.readonly) return;
      if (!this.groupTypeCode && this.isdisAbledMessage) {
        this.$Message.info(this.isdisAbledMessage);
        return;
      };
      if (e && e.target.tagName === 'I') {
        this.$emit('handleSelect');
      } else {
        const attrs = this.$attrs;
        new this.$pageModal(
          resolve => {
            require([`./${this.component}.vue`], resolve);
          },
          {
            width: this.width,
            zIndex: this.zIndex,
            props: {
              title: this.title,
              ...attrs
            }
          },
          data => {
            if (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;
    }
  }
};
</script>