/*
 * @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:23:59
 * 选择收款公司 和 收款账号
 */
<template>
  <div>
    <Input
      v-bind="$attrs"
      :value="formatVal"
      :icon="!disabled ? 'md-log-in' : ''"
      readonly
      :clearable="!disabled"
      :disabled="disabled"
      v-on="$listeners"
      @on-click.stop="handleIconClick"
      @click.native="handleInputClick"
      @mouseenter.native="handleInputMouseenter"
      @mouseleave.native="handleInputMouseleave"
    ></Input>
  </div>
</template>

<script>
import SelectCompCodeList from './list.vue';
import extend from 'extend';
export default {
  name: 'SelectCompCode',
  components: {},
  directives: {},
  props: {
    title: {
      type: String,
      default() {
        return '请选择公司';
      }
    },
    value: {
      type: String,
      default() {
        return '';
      }
    },
    coaCodeType: {
      type: String,
      default() {
        return '';
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showClose: false
    };
  },
  computed: {
    formatVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.formatVal = val;
      }
    }
  },
  watch: {},
  created: function() {
    this.disabled && (this.showClose = false);
  },
  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 false;
      }
      if (e.target.tagName === 'I' && this.showClose) {
        this.$emit('handleSelect');
        this.showClose = false;
      } else {
        this.showList(e);
      }
    },
    showList(e) {
      new this.$pageModal(
        SelectCompCodeList,
        {
          props: {
            title: this.title
          }
        },
        data => {
          if (data) {
            this.showClose = false;
            this.$emit('handleSelect', extend({}, data));
          }
        }
      );
    }
  }
};
</script>