<template>
  <div class="el-bio-mselect">
    <el-popover
      ref="mselectPop"
      v-if="form && form.selector"
      placement="bottom-start"
      trigger="click"
      :visible-arrow="false"
      :popper-options="popOptions"
      :width="width"
      popper-class="bts-mselect-pop"
      @hide="hide">
      <div class="bts-mselect__box" tabindex="-1" @keyup.enter="enter">
        <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>

        <el-checkbox-group v-model="form.value">
          <el-checkbox v-for="(item, index) in selectorData" :key="index" :label="item.codevalue">
            {{item.codedesp}}
            <i class="el-icon-check"></i>
          </el-checkbox>
        </el-checkbox-group>
      </div>

      <template slot="reference">
        <div class="bts-item bts-mselect" :class="{hasValue: !!showValue}">
          <input type="text" hidden :value="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-mselect__wrap">
            <div class="bts-mselect__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 {debounce} from 'throttle-debounce';
import Locale from 'element-ui/src/mixins/locale';
import title from '../../../src/directives/bioknow/overflowTitle';

export default {
  name: 'BioMselect',
  props: {
    form: Object
  },

  directives: {
    title
  },

  mixins: [Locale],

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

  watch: {
    'form.value': {
      immediate: true,
      handler(e) {
        if (!e || !Array.isArray(e) || !e.length) {
          this.showValue = '';
          return;
        }

        let desps = [];

        for (let item of this.form.selector) {
          if (e.includes(item[this.form.valueKey || 'codevalue'])) {
            desps.push(item[this.form.labelKey || 'codedesp']);
          }
        }

        this.showValue = desps.join(';');
      }
    }
  },

  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() {
      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);
    }),

    hide() {
      this.$emit('blur');
    },

    enter() {
      // 关闭popper触发 hide
      this.$refs.mselectPop.doClose();
    }
  }
};
</script>
