<template>
  <div class="el-bio-select">
    <el-popover
      ref="selectPop"
      v-if="form && form.selector"
      placement="bottom-start"
      trigger="click"
      :visible-arrow="false"
      :popper-options="popOptions"
      :width="width"
      popper-class="bts-select-pop"
      @hide="hide">
      <div class="bts-mselect__box">
        <div class="bts-mselect__search">
          <el-input
            v-model="searchKey"
            prefix-icon="el-icon-search"
            class="bts-mselect__search__input"
            @input="filterHandler"/>
        </div>

        <div v-if="!selectorData.length" class="no-search-data">
          {{ t('bio.bioError.noMatching') }}
        </div>

        <div class="select-group">
          <div
            v-for="(item, index) in selectorData"
            :key="index"
            class="select-group__item"
            :class="{'is-selected': form.value && item.codevalue === form.value}"
            @click="chooseValue(item)">
            {{ item.codedesp }}

            <i v-if="form.value && item.codevalue === form.value" class="el-icon-check"></i>
          </div>
        </div>
      </div>

      <template slot="reference">
        <div
          class="bts-item bts-select"
          :class="{hasValue: !!showValue}">
          <div class="bts-item__label">
            {{ form.fieldname }}
          </div>

          <i
            v-if="form.custom"
            class="bts-item__delete el-icon-error"
            @click="$emit('deleteSearchItem')"></i>

          <div class="bts-select__wrap">
            <div class="bts-select__value" v-title="showValue">
              {{ showValue }}
              <i class="el-icon-arrow-down icon"></i>

              <i
                v-if="showValue"
                class="el-icon-circle-close icon"
                @click="clear"></i>
            </div>
          </div>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script>
import {find} from 'lodash-es';
import {debounce} from 'throttle-debounce';
import Locale from 'bio-ui-vue2/src/mixins/locale';
import title from '../../../src/directives/bioknow/overflowTitle';

export default {
  name: 'BioSelect',
  directives: {
    title
  },
  props: {
    form: Object
  },
  mixins: [Locale],

  data() {
    return {
      searchKey: '',
      showValue: '',
      width: 200,
      selectorData: [],
      popOptions: {
        removeOnDestroy: true
      }
    };
  },

  watch: {
    'form.value': {
      immediate: true,
      handler(e) {
        if (e) {
          const selected = find(this.form.selector, row => row.codevalue === e);

          if (selected && selected.codedesp) {
            this.showValue = selected.codedesp;
          }
        } else {
          this.showValue = '';
        }
      }
    }
  },

  created() {
    this.selectorData = this.form.selector;

    // 将中文转成两个英文字符再计算 length
    const lens = this.form.selector.map(item => {
      return item[this.form.labelKey || 'codedesp'].replace(/[\u0391-\uFFE5]/g, 'aa').length;
    });
    const maxLen = Math.max(...lens) * 6 + 80;

    if (maxLen > 200) this.width = maxLen;
  },

  methods: {
    clear() { // 会触发hide
      this.$set(this.form, 'value', '');
    },

    filterHandler: debounce(300, false, function(e) {
      this.selectorData = this.form.selector.filter(row => row[this.form.labelKey || 'codedesp'].indexOf(e) > -1);
    }),

    chooseValue(e) {
      this.$set(this.form, 'value', e.codevalue);
      this.$refs.selectPop.doClose();
    },

    hide() {
      this.$emit('blur');
    }
  }
};
</script>
