/*
 * @Author: Anmin 
 * @Email:changanmin1@crc.com.hk 
 * @Date: 2018-09-08 14:13:39 
 * @Last Modified by: Anmin
 * @Last Modified time: 2018-12-28 16:24:40
 * 选择客户
 */ 
<template>
  <!-- <div class="close-div">
    <Input ref="ipt" size="small" :value="value" @input="handleInput" icon="log-in" @click.native="showList" readonly></Input>
    <Icon type="close" class="close-btn" @click.native="clean" v-show="isShowCloseIcon"></Icon>
  </div>-->
  <Input
    v-bind="$attrs"
    v-on="$listeners"
    :value="value"
    :icon="!disabled ? 'log-in' : ''"
    readonly
    @on-click.stop="handleIconClick"
    @click.native="handleInputClick"
    @mouseenter.native="handleInputMouseenter"
    @mouseleave.native="handleInputMouseleave"
    :clearable="!disabled"
    :disabled="disabled"
  ></Input>
</template>
<script>
import SelectCustomerEdit from "./list.vue";
export default {
  name: "SelectCustomer",
  components: {},
  props: {
    title: {
      type: String,
      default() {
        return "请选择客户";
      }
    }, 
    value: {
      type: String,
      default() {
        return "";
      }
    },
    compCode: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    let showClose = !!this.value;
    return {
      showClose: showClose
    };
  },
  computed: { 
  },
  created: function() {},
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: { 
    handleInputMouseenter() {
      if (this.value) {
        this.showClose = true;
      }
    },
    handleInputMouseleave() {
      this.showClose = false;
    },
    handleIconClick(e) {
      this.handleInputClick(e);
    },
    handleInputClick(e) {
      if(this.disabled){
        return
      }
      if (e.target.tagName === "I" && this.showClose) {
        this.$emit("handleSelect");
        this.showClose = false; 
      } else {
        new this.$pageModal(
          SelectCustomerEdit,
          {
            props: {
              title: this.title,
              compCode: this.compCode
            }
          },
          data => {
            if (data) {
              this.showClose = false; 
              this.$emit("handleSelect", data);
            }
          }
        );
      }
    }
  },
  watch: {},
  directives: {}
};
</script> 