<template>
  <div class="VerticalAdStyleSelectorContainer">
    <span class="options" v-for="(item, index) in list" :class="{selected: item.id == styleType}" :key="index" @click="changeSelect(item.id)">{{item.title}}</span>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: '1'
    }
  },
  watch: {
    value(val) {
      this.styleType = val;
    },
    styleType(val) {
      this.$emit('input', val);  
    }
  },
  components: {
  },
  data() {
    return {
      list: [
        {
          id: '1',
          title: '一行一组'
        },
        {
          id: '2',
          title: '两行一组'
        }
      ],
      styleType: ''
    }
  },
  created() {
    this.styleType = this.value;
  },
  methods: {
    changeSelect(id) {
      if (id == this.styleType) return;
      this.styleType = id;
    }
  }
}
</script>
<style scoped lang="less">
.options{
  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>
