<template>
  <div class="sy-input-more" :class="{ 'is-active': isActive }" @mouseleave="isActive = false">
    <!-- <input type="text" :title="str" :value="str" :placeholder="placeholder" :maxlength="maxlength" readonly @focus="open" /> -->
    <span class="span-input" :title="str" @click="open" @mouseenter="isActive = true">
      <span class="span-content" v-if="!!str">{{ str }}</span>
      <span v-else class="span-content placeholder">{{ placeholder }}</span>
      <i class="el-icon-circle-close" v-if="!!str && isActive" @click.stop="clearChoosed"></i>
    </span>
    <i class="el-icon-more more-icon" @click="open"></i>
  </div>
</template>

<script>
export default {
  name: 'SyInputMore',
  props: {
    placeholder: {
      type: String,
      default: '请选择'
    },
    str: {
      type: String,
      default: ''
    },
    maxlength: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    clearChoosed() {
      this.$emit('clear')
    },
    open() {
      this.isActive = true
      this.$emit('open')
    }
  }
}
</script>

<style lang="scss" scoped>
.sy-input-more {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-right: 4px;
  height: 32px;
  line-height: 30px;
  border-radius: 2px;
  border: 1px solid #dcdfe6;
  &.is-active {
    border-color: #027aff;
  }
  .el-input__inner {
    border: none;
    height: 30px;
    line-height: 30px;
  }
  .span-input {
    width: 0;
    flex: 1;
    padding-left: 10px;
    padding-right: 18px;
    position: relative;
    .span-content {
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .el-icon-circle-close {
      position: absolute;
      right: 2px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
    }
    .placeholder {
      color: #c0c4cc;
    }
  }
  > .el-icon-more {
    cursor: pointer;
  }
}
</style>
