<template>
  <ul class="uif-option-items" :class="'uif-option-items-size-' + size">
    <template v-for="item in options">
      <li :key="item.value" class="uif-option-item" :class="getClasses(item)" @click="handleClick(item)">
        <span>{{item.label}}</span>
      </li>
    </template>
    <template v-if="options.length <= 0">
      <li class="uif-option-empty">暂无数据</li>
    </template>
  </ul>
</template>
<script>
import {oneOf} from '@uif/hq/src/utils/assist'
import {some} from '@uif/hq/src/utils/array'

export default {
  name: 'u-options',
  components: {
  },
  props: {
    values: {
      type: Array,
      default () {
        return []
      }
    },
    options: {
      type: Array,
      default () {
        return []
      }
    },
    size: {
      validator (value) {
        return oneOf(value, ['small', 'default', 'large'])
      },
      default: 'default'
    }
  },
  data () {
    return {
    }
  },
  methods: {
    // 选择
    handleClick (item) {
      this.$emit('click', item)
    },
    getClasses (item) {
      return {
        active: some(this.values, it => it.value === item.value)
      }
    }
  }
}
</script>
