<template>
  <div
    class="input-select-container"
    :class="{'is-multiple': multiple, 'is-readonly': readonly}"
  >
    <div class="input-select-val" v-if="multiple">
      <el-tag
        v-for="(item, index) in selectData"
        :key="index"
        :closable="!readonly"
        type="info"
        size="small"
        @close="clearTag(index)"
        disable-transitions
      >
        <span class="tags-text"> {{ item[label] }}</span>
      </el-tag>
    </div>
    <el-input
      ref="reference"
      clearable
      :value="inputValue"
      :placeholder="placeholder"
      :readonly="readonly"
      :disabled="disabled"
      @clear="clearTag"
      @focus="(e) => e.target.blur()"
    >
      <el-button
        v-if="!disabled"
        slot="append"
        icon="el-icon-search"
        @click="open"
      ></el-button>
    </el-input>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
    },
    selectData: {
      required: true,
      // multiple为 true 时，可传{name:"",id:""}
      // multiple为 false 时，可传字符串
    },
    label: {
      type: String,
      default: 'name',
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      inputValue: '',
    }
  },
  watch: {
    selectData: {
      handler(newVal) {
        console.log(newVal, 'newVal')
        this.inputValue =
          newVal && newVal.length
            ? this.multiple
              ? newVal[0][this.label]
              : newVal
            : ''

        console.log(this.inputValue)
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    clearTag(index) {
      this.$emit('delTags', index)
    },
    open() {
      this.$emit('click')
    },
  },
}
</script>

<style lang="scss"
  scoped>
.input-select-container {
  position: relative;
  &.is-multiple {
    padding: 3px 0 3px 9px;
    min-height: 40px;
    box-sizing: border-box;
    .input-select-val {
      position: relative;
      z-index: 1;
      min-height: 32px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      z-index: 1;
      max-width: calc(100% - 86px);
      box-sizing: border-box;

      ::v-deep .el-tag--info {
        margin: 2px 0 2px 6px;
        display: flex;
        max-width: 100%;
        align-items: center;
        transform: none;

        span {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .el-tag__close {
          background-color: #c0c4cc;
        }
      }
    }

    ::v-deep .el-input {
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;

      .el-input__inner {
        height: 100%;
        color: #fff;
      }
    }
  }
  &.is-readonly {
    padding-right: 30px;
    .input-select-val {
      max-width: 100% !important;
    }
  }
}
</style>