<template>
  <div class="bx-mail-input">
    <bxs-input
      v-bind="$attrs"
      v-model.trim="currentValue"
      ref="input"
      @focus="onFocus"
      @blur="onBlur"
      >
      <div
        slot="extra"
        class="bx-popper-hint bx-hairline--surround"
        v-show="showPopperHint"
        ref="popperHint"
        >
        <div
          class="bx-popper-hint--wrap"
          >
          <div
            class="bx-popper-hint--left"
            >
            <div
              class="bx-popper-hint-list bx-hairline--bottom"
              v-for="(item, index) in suffixList"
              :key="'popper_' + index"
              @touchstart.prevent="clickItem(item)"
              >
              {{ value | filterEmailValue }}
            </div>
          </div>
          <div
            class="bx-popper-hint--right"
            >
            <div
              class="bx-popper-hint-list bx-hairline--bottom"
              v-for="(item, index) in suffixList"
              :key="'popper_' + index"
              @touchstart.prevent="clickItem(item)"
              >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </bxs-input>
  </div>
</template>
<script>
import Input from '../input/index'
import { create } from '../utils/index'

const getName = value => value.substring(0, value.indexOf('@'))
const getSuffix = value => value.substring(value.indexOf('@'))

export default create({
  name: 'mail-input',
  filters: {
    filterEmailValue(email) {
      if (email.indexOf('@') > -1) {
        return getName(email)
      }
      return email
    },
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    emailArr: {
      type: Array,
      default() {
        return ['@qq.com', '@163.com', '@126.com', '@139.com']
      },
      validator(emails) {
        return emails.every(
          email =>
            typeof email === 'string' &&
            /^@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email),
        )
      },
    },
  },
  data() {
    return {
      hintShow: false,
      isFocus: false,
      suffixList: [...this.emailArr],
    }
  },
  computed: {
    currentValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
    showPopperHint() {
      return this.hintShow && this.isFocus && this.suffixList.length
    },
  },
  watch: {
    currentValue(val) {
      if (!val) {
        this.hintShow = false
        return
      }
      this.hintShow = true
      const suffix = getSuffix(val)
      this.suffixList =
        val.indexOf('@') > -1
          ? this.emailArr.filter(
              item => item.includes(suffix) && item.length > suffix.length,
            )
          : [...this.emailArr]
    },
  },
  methods: {
    clickItem(data) {
      const index = this.currentValue.indexOf('@')
      const html =
        index > -1
          ? getName(this.currentValue) + data
          : this.currentValue + data
      this.currentValue = html
      this.$emit('select', html)
      this.hintShow = false
    },
    onFocus(event) {
      this.isFocus = true
      this.$emit('focus', event)
    },
    onBlur(event) {
      this.isFocus = false
      this.hintShow = false
      this.$emit('blur', event)
    },
  },
  components: {
    [Input.name]: Input,
  },
})
</script>
<style lang="postcss">
@import './index.css';
</style>
