<template>
  <div class="multiple-choice">
    <p class="title" v-if="choice.subject">{{choice.index}}、{{choice.subject}}</p>
    <ul class="options">
      <li :class="{ active: selection.includes(item) }" v-for="item in choice.options" :key="item.value" @click="handleSelect(item)">{{item.subject}}</li>
    </ul>
    <div class="btn-bar">
      <div>
        <slot name="btn-prev" />
      </div>
      <div>
        <slot name="btn-center" />
      </div>
      <div>
        <slot name="btn-next" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    choice: {
      type: Object,
      default () {
        return {}
      }
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selection: []
    }
  },
  watch: {
    choice: {
      handler(nv) {
        if (nv.id) {
          this.selection = nv.selection
        }
      },
      immediate: true
    }
  },
  methods: {
    handleSelect(item) {
      if (this.selection.includes(item)) {
        const index = this.selection.indexOf(item)
        this.selection.splice(index, 1)
      } else {
        if (this.multiple) {
          this.selection.push(item)
        } else {
          this.selection.splice(0, 1, item)
        }
      }
      this.$emit('select')
    }
  }
}
</script>
<style scoped>
.multiple-choice{
  padding:5px 25px;
}
.title{
  font-size:16px;
  line-height:40px;
  color:#333;
  user-select: none;
}
.options{
  display:flex;
  /* justify-content:space-around; */
  flex-wrap:wrap;
  padding-top:20px;
}
.options li{
  width:200px;
  height:40px;
  background:#f3f3f3;
  border-radius:20px;
  font-size:16px;
  line-height:40px;
  color:#666;
  text-align:center;
  cursor:pointer;
  user-select: none;
  margin:0 10px 20px 15px;
}
.options li.active{
  background:#68b8a4;
  color:#fff;
}
.btn-bar{
  padding-top:30px;
  display:flex;
}
.btn-bar>div{
  width:33.3%;
  text-align:center;
}
.btn-bar .el-button{
  padding:8px 30px;
}
</style>
