<template>
  <div class="el-business-tag">
      <el-button-group :size='useSize'>
        <el-button
          :size='useSize'
          v-for='item in options'
          :key='item[useProps.value]'
          :class='{ "is-active": item[useProps.value] === value, "is-disabled": item[useProps.disabled] }'
          @click='change(item)'>
          {{item[useProps.label]}}
        </el-button>
      </el-button-group>
  </div>
</template>

<script>
import ElButtonGroup from '@ued_fpi/element-ui/packages/button-group';
import ElButton from '@ued_fpi/element-ui/packages/button';
export default {
  name: 'ElBusinessTag',
  props: {
    // 当前选中值
    value: {
      required: true
    },
    // 可选项
    options: {
      type: Array,
      default: []
    },
    // 属性字段名配置
    props: {
      type: Object
    },
    size: String
  },
  computed: {
    // 实际props
    useProps() {
      return {
        label: 'label',
        value: 'value',
        disabled: 'disabled',
        ...this.props
      };
    },
    // 实际的尺寸大小
    useSize() {
      return this.size || (this.$ELEMENT || {}).size;
    }
  },
  components: {
    ElButtonGroup,
    ElButton
  },
  methods: {
    change(item) {
      // 当前点击项为禁用项或当前选中项，不处理
      if (item.disabled || (item[this.useProps.value] === this.value)) return;
      // 将选中值抛出
      this.$emit('input', item[this.useProps.value]);
      this.$emit('change', item[this.useProps.value]);
    }
  }
};
</script>
