<template>
  <div class="option-list">
    <!-- <scroller show-scrollbar="false" scroll-direction="horizontal" class="scroller">
      <div
        class="option-item"
        :class="[item.checked && 'option-item-current']"
        @click="checkChange(item)"
        v-for="(item, $index) in oList"
        :key="$index"
      >
        <text class="text">{{ item.title }}</text>
      </div>
    </scroller> -->
    <div
      class="option-item"
      :class="[item.checked && 'option-item-current']"
      @click="checkChange(item)"
      v-for="(item, $index) in oList"
      :key="$index"
    >
      <text class="text">{{ item.title }}</text>
    </div>
  </div>
</template>
<style scoped>
.option-list {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 96px;
  background-color: #fff;
  border-top-color: #e2e2e2;
  border-top-width: 1px;
}
.option-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 29px;
  background-color: #c7c7cc;
  overflow: hidden;
}

.option-item-current {
  background-color: #00A4F2;
}
.text {
  font-size: 28px;
  color: #ffffff;
}
</style>
<script>
export default {
  components: {},
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      oList: []
    }
  },
  watch: {
    list() {
      this.buildList()
    }
  },
  computed: {},
  created() {
    this.buildList()
  },
  methods: {
    buildList() {
      this.oList = this.list.map(item => {
        Vue.set(item, 'checked', item.checked || false)
        return item
      })
    },
    checkChange(e) {
      e.checked = !e.checked
      const checkedList = []
      this.oList.forEach(item => {
        item.checked && checkedList.push(item.value)
      })
      this.$emit('optionClick', { checkedList })
    }
  }
}
</script>

<style scoped></style>
