<template>
  <div class="radio">
    <ul class="radio-ul">
      <li
        class="radio-ul-li"
        v-for="(item, index) in list"
        :key="index">
        <drip-button
          :style="{
            width: width
          }"
          @click="checkButton(item)"
          :type="!item.disabled && values.includes(item.value) ? 'orange' : 'default'"
          :disabled="item.disabled"
          v-html="item.name">
        </drip-button>
      </li>
    </ul>
  </div>
</template>

<script>
import create from '../utils/create';
import dripButton from '../button'
export default create({
  name: 'select-button',

  props: {
    // 要求数据格式为[{name: '', value: ''}]
    list: {
      type: Array,
      required: true
    },
    // 要求是list某个元素的value值
    values: {
      type: Array,
      default: function () {
        return []
      },
      required: true
    },
    type: {
      type: String,
      default: 'radio'
    },
    width: {
      type: String
    }
  },
  methods: {
    checkButton (item) {
      const index = this.values.indexOf(item.value)
      if (index == -1) {
        if (this.type === 'radio') {
          this.values.length = []
        }
        this.values.push(item.value)
      } else {
        if (this.type !== 'radio' && this.values.length !== 1) {
          this.values.splice(index, 1)
        }
      }
      this.$emit('getValue', Object.assign(item, {
        isSelect: index === -1
      }))
    }
  },
  components: {
    dripButton
  }
})
</script>
