<style lang="less" scoped>
.tag-input-single {
  min-height: 32px;
  width: 100%;
  position: relative;

  .ivu-input-default {
    padding-right: 25px;
  }
}

.tag-input-multiple {
  min-height: 32px;
  width: 100%;
  background: white;
  border: 1px solid rgb(215, 221, 228);
  border-radius: 6px;
  position: relative;
}

.tag-input-multiple-disabled {
  background-color: #f3f3f3;
  opacity: 1;
  cursor: not-allowed;
  color: #ccc;
}

.tag-input-multiple-disabled:hover {
  border: 1px solid rgb(215, 221, 228);
}

.tag-input-shade {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  height: 100%;
  position: absolute;
  background: #ccc;
  opacity: 0.2;
  z-index: 1;
  cursor: not-allowed;
}

.tag-input-container {
  float: left;
  overflow: hidden;
  padding-left: 5px;
  cursor: text;
}

.tag-input-arrow {
  position: absolute;
  top: 50%;
  right: 8px;
  line-height: 1;
  transform: translateY(-50%);
  font-size: 14px;
  color: #808695;
  transition: all 0.2s ease-in-out;
}

.tag-input-button-container {
  overflow: hidden;
  background-color: #eee;
  height: 100%;
  width: 35px;
  border-left: 1px solid rgb(215, 221, 228);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  position: absolute;
  right: 0px;
  padding-left: 10px;
  button {
    border-color: rgba(0, 0, 0, 0);
    background-color: #eee;
    font-size: 13px;
  }
}
</style>
<template>
  <div>
    <div
      v-if="!multiple"
      class="tag-input-single"
      :id="singleInputId"
      @click="openModal"
      @mouseenter="hasMouseHover = true"
      @mouseleave="hasMouseHover = false"
    >
      <Input
        :value="selection ? getInputLable(inputLabel, selection) : ''"
        style="width:100%; height:100%;"
        readonly
        :disabled="disabled"
        :placeholder="placeholder"
      />
      <i
        class="ivu-icon ivu-icon-ios-close-circle tag-input-arrow"
        v-if="resetSelect"
        @click.stop="onClear"
      />
      <i
        class="ivu-icon ivu-icon-ios-more tag-input-arrow"
        style="font-size: 15px;"
        v-if="!resetSelect"
        @click="openModal"
      />
    </div>
    <div
      v-else
      :class="multipleClass"
      :disabled="disabled"
      @click="openModal"
      @blur="handleBlur"
    >
      <div
        class="tag-input-container"
        style="width: calc(100% - 25px);"
      >
        <div style="width: 100%">
          <Tag
            v-for="(item,index) in showSelections"
            :key="index"
            :name="item.id"
            closable
            :fade="false"
            @on-close="onTagClose"
            style="margin-bottom:5px; position: relative; float: left;"
          >{{getInputLable(inputLabel, item)}}</Tag>
          <Tag
            v-if="maxTagCount !== undefined && selection.length > maxTagCount"
            style="margin-bottom:5px; position: relative; float: left;"
          >+ {{ selection.length - maxTagCount }}...</Tag>
        </div>
      </div>
      <i
        class="ivu-icon ivu-icon-ios-more tag-input-arrow"
        style="font-size: 15px;"
        @click="openModal"
      />
      <div style="clear:both"></div>
    </div>
  </div>
</template>
<script>
import Emitter from 'view-design/src/mixins/emitter'
import Locale from 'view-design/src/mixins/locale'
export default {
  mixins: [Emitter, Locale],
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    selection: {
      type: [Array, Object],
      default: () => [],
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    maxTagCount: {
      type: Number,
    },
    placeholder: {
      type: String,
    },
    inputLabel: {
      type: String,
      default: 'name',
      validator: (value) => {
        return value === 'code' || value === 'name' || value === 'codeName'
      }
    }
  },
  data() {
    return {
      singleInputId: 'tag-input-single',
      // singleInputId: "tag-input-single" + SEDU.Util.newId(),
      hasMouseHover: false, // 是否可以显示close图标
    }
  },
  computed: {
    multipleClass: {
      get: function () {
        let _class = ['tag-input-multiple']
        if (this.disabled) {
          _class.push('tag-input-multiple-disabled')
        }
        return _class.join(' ')
      },
    },
    resetSelect: {
      get: function () {
        if (this.multiple) {
          return false
        }
        return this.selection && this.clearable && this.hasMouseHover && !this.disabled
      },
    },
    showSelections: {
      get: function () {
        let size = this.selection.length
        if (this.maxTagCount === undefined || size <= this.maxTagCount) {
          return this.selection
        }
        let result = []
        for (let i = 0; i < this.maxTagCount; i++) {
          result.push(this.selection[i])
        }
        return result
      },
    },
  },
  mounted() {
    this.$nextTick(() => this.listernSingleDiv())
  },
  methods: {
    listernSingleDiv() {
      let elm = document.getElementById(this.singleInputId)
      if (!elm) {
        return
      }
      elm.onmouseover = () => (this.hasMouseHover = true)
      elm.onmouseout = () => (this.hasMouseHover = false)
    },
    openModal() {
      if (this.disabled) return
      this.$emit('on-button-click')
    },
    onTagClose(event, name) {
      if (this.disabled) return
      this.$emit('on-tag-close', event, name)
    },
    handleBlur() {
      this.$emit('on-blur', event)
      this.dispatch && this.dispatch('FormItem', 'on-form-change', value)
    },
    onClear() {
      this.$emit('on-clear', event, name)
    },
    getInputLable(prop, value) {
      let result = ''
      if(prop === 'codeName') {
        result = value.code + ' ' + value.name
      } else {
        result = value[prop]
      }
      return result
    }
  },
  watch: {},
}
</script>