<template>
  <div class="GoodsPromotionTypeSelectorContainer">
    <span class="option" @click="select(item.id)" v-for="(item, index) in options" :key="index" :class="{selected: item.id == selected}">
      {{item.label}} 
    </span>
    <!-- <Button type="primary" @click="save">保存</Button> -->
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: "1"
    }
  },
  watch: {
    value(val) {
      this.selected = val;
    },
    selected(val) {
      this.$emit('input', val);  
    }
  },
  methods: {
    select(id) {
      this.selected = id;
    }
  },
  data() {
    return {
      options: [
        {id: '1', label: '左一带五'},
        {id: '2', label: '右一带五'},
        {id: '3', label: '左二带四'},
        {id: '4', label: '右二带四'},
      ],
      selected: 0
    }
  },
  created() {
    this.selected = this.value;
  }
}
</script>
<style scoped lang="less">
.option{
  cursor: pointer;
  border-radius: 4px;
  line-height:normal;
  display: inline-block;
  padding: 3px 5px;
  border: 1px solid #dddee1;
  margin: 0 2px;
  user-select: none;
  &.selected, &:hover{
    border-color: #57a3f3;
    box-shadow: 0px 0px 0px 2px rgb(45 140 240 / 20%)
  }
}
</style>
