 <!--
   @Author: husanfeng
   @qq:1136014061
   @Date: 2018-09-25
   @Last Modified by: husanfeng
   @Last Modified time: 2018-09-25
   @desc
    2018/10/17 changanmin1@crc.com.hk
    1.修改成本中心查询接口 /mdCostCenter/findPageBySecurity改为 /mdCostCenter/findPageBySecurityReceivableClaim
    2.修改查询条件：去掉  所属单位编码 条件
    3.隐藏table列：所属单位编码
 -->
<template>
  <Input
    v-bind="$attrs"
    :value="value"
    :icon="!disabled ? 'log-in' : ''"
    readonly
    :clearable="!disabled"
    :disabled="disabled"
    v-on="$listeners"
    @on-click.stop="handleIconClick"
    @click.native="handleInputClick"
    @mouseenter.native="handleInputMouseenter"
    @mouseleave.native="handleInputMouseleave"
  ></Input>
</template>
<script>
import SelectmdCostCenterList from './list.vue';
export default {
  name: 'SelectmdCostCenter',
  components: {},
  directives: {},
  props: {
    title: {
      type: String,
      default() {
        return '请选择客户';
      }
    },
    value: {
      type: String,
      default() {
        return '';
      }
    },
    compCode: {
      type: String,
      default() {
        return '';
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const showClose = !!this.value;
    return {
      showClose: showClose
    };
  },
  computed: { },
  watch: {},
  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(
          SelectmdCostCenterList,
          {
            props: {
              title: this.title,
              compCode: this.compCode
            }
          },
          data => {
            if (data) {
              this.$emit('handleSelect', data);
              this.showClose = false;
            }
          }
        );
      }
    }
  }
};
</script>
<style lang='less' scoped>
.close-div {
  width: 100%;
  position: relative;
  display: inline-block;
  .close-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -7px;
    font-size: 14px;
    color: #ff0000;
    display: none;
    cursor: pointer;
  }
  &:hover {
    .close-btn {
      display: inline-block;
      background: #fff;
    }
  }
}
</style>
