<template>
  <div :class="classes">
    <div v-if="hasLabel" class="input-label">
      <label>{{ label }}{{multiple?'(多选)':'(单选)'}}</label>
      <span v-if="required" class="is-required">*</span>
    </div>
    <div class="input-wrapper" style="padding-top:10px">
      <span v-for="(item,index) in options" :key="index" @click="selectClick(item,index)">
        <span :style="styles(item)" class="select-button">{{item[nameKey]}}</span>
        <rt-icon
          name="rt-xrm-buttonselected"
          size="15"
          v-if="isMultipleSelected(item)"
          class="selecticon"
        ></rt-icon>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rtSelectButton',
  props: {
    zIndex: Number,
    options: {
      type: Array,
      default: () => []
    },
    value: {
      type: Object,
      default: () => {
        return {};
      }
    },
    required: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    },
    nameKey: {
      type: String,
      default: 'Name'
    },
    valueKey: {
      type: String,
      default: 'Value'
    }
  },
  data() {
    return {
      selectedList: [],
      currentValue: this.value
    };
  },
  computed: {
    hasLabel() {
      return !!this.label;
    },
    classes() {
      return ['rt-form-select-area', 'input-area', `is-top`];
    }
  },
  mounted() {},
  methods: {
    selectClick(item, index) {
      if (this.multiple) {
        if (this.selectedList.some(element => element[this.valueKey] === item[this.valueKey])) {
          this.selectedList = this.selectedList.filter(element => element[this.valueKey] !== item[this.valueKey]);
        } else {
          this.selectedList.push(item);
        }
        this.$emit('is-selected', this.selectedList);
      } else {
        if (this.currentValue[this.valueKey] === item[this.valueKey]) {
          this.currentValue = {};
        } else {
          this.currentValue = item;
        }
        this.$emit('input', this.currentValue);
      }
    },
    styles(item) {
      if (this.multiple) {
        if (this.selectedList.some(element => element[this.valueKey] === item[this.valueKey])) {
          return {
            backgroundColor: '#53a4fc',
            color: '#FFFFFF',
            marginRight: '0px'
          };
        } else {
          return {
            backgroundColor: '#F7F8FA',
            color: '#B4BDCF',
            marginRight: '15px'
          };
        }
      } else {
        if (this.currentValue[this.valueKey] === item[this.valueKey]) {
          return {
            backgroundColor: '#53a4fc',
            color: '#FFFFFF',
            marginRight: '15px'
          };
        } else {
          return {
            backgroundColor: '#F7F8FA',
            color: '#B4BDCF',
            marginRight: '15px'
          };
        }
      }
    },
    isMultipleSelected(item) {
      if (this.multiple) {
        if (this.selectedList.some(element => element[this.valueKey] === item[this.valueKey])) {
          return true;
        } else {
          return false;
        }
      }
      return false;
    }
  }
};
</script>

<style scoped>
.select-button {
  padding: 6px 16px 6px 16px;
  border-radius: 5px;
  font-size: 13px;
  display: inline-block;
  margin-bottom: 5px;
}
.selecticon {
  position: relative;
  left: -10px;
  top: -13px;
}
</style>