<template>
    <div :class="{ column: true, 'has-more': showMore === false }">
      <div class="tags">
        <span v-if="enableAll" :key="allOption[valueKey]" :class="{selected:tagAllClass}" @click="clickAll">{{allOption[textKey]}}</span>
        <span v-for="option in options" :key="option[valueKey]" :class="tagCLass(option)" @click="selectItem(option)">
          {{ option[textKey] }}
        </span>
      </div>
      <span v-if="showMore" class="more" @click.prevent="openMore = !openMore">
        {{ showMoreText }}
      </span>
    </div>
</template>

<script>
export default {
  name: 'PlatSelect',
  props: {
    /**
     * 是否多选，默认否
     */
    multiple: Boolean,
    /**
     * 是否至少选择一项，默认否
     */
    mandatory: Boolean,
    /**
     * 是否显示更多,如果关闭,默认会一直显示所有,如果打开,组件会根据需要进行处理
     */
    showMore:{type:Boolean,default:false},
    /**
     * 选项值属性名
     */
    valueKey: { type: String, default: 'value' },
    /**
     * 选项文本属性名
     */
    textKey: { type: String, default: 'label' },
    /**
     * 选项数组 {label,value,actived}
     */
    options: { type: Array, default: () => [] },
    enableAll:{type:Boolean,default:false},
    allOption:{
      type:Object,
      default(){return {label:"全部",value:"default-all"}}
    },
    /**
     * 已选中的选项
     */
    value: { type: [String, Number, Array], default: () => null },
  },
  data: () => ({
    internalValue: null,
    openMore:false
  }),
  created(){
    if(this.multiple) {
      this.internalValue = [];
    }
    if (this.mandatory&& this.options.length)
      this.selectItem(this.options[0]);
  },
  computed: {
    tagAllClass(){
        return this.isSelectAll();
    },
    /**
     * 显示 ”更多“ 或 ”收起“
     */
    showMoreText() {
      return this.openMore?'收起':'更多';
    },
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal;
    },internalValue(newVal) {
      this.$emit("input",newVal);
    }
  },
  methods: {
    clickAll() {
      let temp = []
      if (!this.isSelectAll()) {
        for (let i in this.options) {
          temp.push(this.options[i][this.valueKey])
        }
      }
      this.internalValue = temp;
    },isSelectAll(){
      return this.internalValue.length&&this.internalValue.length==this.options.length;
    },
    /**
     * 选项样式类
     * @param {Object} option 选项
     */
    tagCLass(option) {
      const selected =this.multiple ? this.internalValue.indexOf(option[this.valueKey]) !== -1 : option[this.valueKey] === this.internalValue
      return {
        'item': true,
        'is-primary': !!selected,
        'set-color-primary': !selected && !!option.actived,
        'set-bgcolor-transparent': !selected,
      }
    },
    /**
     * 选项状态变更
     * @param {Object} option 选项
     */
    selectItem(option) {
      if(this.multiple) {
        let ind = this.internalValue.indexOf(option[this.valueKey]);
        if (ind == -1) {
          this.internalValue.push(option[this.valueKey]);
          option.selected=true;
        } else {
          if (!this.mandatory||this.internalValue.length > 1) {
            option.selected=false;
            this.internalValue.splice(ind, 1);
          }else
            return;
        }
      }else{
        let lastSelected= this.options.find((item)=>{return item.selected===true});
        if(lastSelected)
          lastSelected.selected=false;
        option.selected=true;
        this.internalValue=option[this.valueKey];
      }
      this.$emit("changed",this.internalValue,option);
    },
    getSelctedItem(){
      if(this.multiple){
          let result=[]
          for(let i in this.internalValue){
            let val=this.internalValue[i];
            result.push(this.options.find(item=>item[this.valueKey]==val));
          }
          return result;
      }else{
         return this.options.find(item=>item[this.valueKey]==this.internalValue);
      }
    }

  }
}
</script>

<style lang="scss" scoped>
  .column {
    &.has-more {
      height: 28px;
      overflow: hidden;
    }
    .is-primary{
      background-color: #3fc3c7;
    }
    .set-color-primary{
      color: red;
    }
  }
</style>
