<template>
  <div class="mc-select" 
    :class="[{'is-disabled': disabled}]"
    :multiple="multiple"
    @click="showOption"
  >
    <input class="mc-select_inner" type="text" :value="labs" :title="labs" :name="name" readonly="readonly" :disabled="disabled" placeholder="请选择" />
    <transition v-if="!disabled" name="slideDown">
      <div class="mc-select_content" v-show="show">
        <input v-if="search" v-model="selectSearch" placeholder="搜索" class="mc-select_search" type="text" @focus="focusInput" @click="touchInput" @change="changeInput">
        <ul class="mc-select_option" :class="[{'is-multiple': multiple}]">
          <li 
            @click="setValue(option)" 
            @click.stop="showOption"
            v-for="option in list"
            :class="{
              'is-selected': option.selected,
              'is-disabled': option.disabled
            }">{{option.label}}</li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    options:{
      type: Array
    },
    value: [String, Number],
    label: String,
    search:{type:Boolean,default: false},
    disabled:Boolean,
    name: String,
    disabled: Boolean,
    multiple:Boolean,
  },
  data () {
    return {
      vals: [],
      labs:[],
      show: false,
      selectSearch: '',
      selectLabs:this.labs,
    }
  },
  computed: {
    list(){
      if (this.selectSearch) {
        const reg = new RegExp(this.selectSearch, 'g')
        let list = this.options.filter(item => {return reg.test(item.label)})
        if (list.length === 0) {
          return [{
            selected: false,
            disabled: true,
            label: '无法找到',
            id: ''
          }]
        }
        return list
      }
      return this.options
    },
  },
  mounted (e) {
    window.addEventListener('click', this.close)
    this.multiple = this.multiple || false;
    this.setDisplayValue(this.options);
  },
  methods: {
    close (e) {
        if(!this.$el.contains(e.target)){
            this.show = false;
        };
        this.selectSearch = ''
    },
    showOption(e) {
      if (this.disabled) {return};
      this.show = !this.show;
    },
    setValue (option) {
      this.searchSelect = '';
      if (this.disabled) {return};
      if (option.disabled) {
        this.show = false;
        return
      };
      if (!this.multiple) {
        // 取消选中
        this.options.forEach(op => {
          op.selected = false
        })
        // 选中
        option.selected = true
        // 赋值
        this.labs = option.label;
        this.vals = option.value;
      } else {
        let index = this.labs.indexOf(option.label)
        option.selected ? this.labs.splice(index, 1) : this.labs.push(option.label);
        option.selected ? this.vals.splice(index, 1) : this.vals.push(option.value);
        option.selected = !option.selected;
        this.show = false;
      }
      this.$emit('change', this.labs,this.vals);
    },
    setDisplayValue (options) {
      const selected = options.filter(option => {
        return option.selected
      });
      // console.log("set1:"+JSON.stringify(selected));
      for (var i = 0; i < selected.length; i++) {
        this.labs.push(selected[i].label);
        this.vals.push(selected[i].value);
      }
    },
    touchInput (e) {
      e.stopPropagation()
    },
    leaveInput (e) {
      this.selectSearch = '';
      this.valueShow = true
    },
    focusInput () {
      this.show = true;
    },
    changeInput (e) {
      e.stopPropagation()
    },
  }
}
</script>