<template>
  <div class="answer-list">
    <div class="answer-item" v-for="(item, index) in list" :key="index" @click="handleClick(item)">
      <!-- <span v-if="!multiple">{{item.selection[0].label}}</span> -->
      <!-- <ul v-else>
        <li v-for="(it, idx) in item.selection" :key="idx">{{it.label}}</li>
      </ul> -->
      <template v-if="!multiple">
        <span>{{ item.selection[0] ? item.selection[0].subject : ''}}</span>
      </template>
      <template v-else>
        <el-tag v-show="item.selection.includes(it)" size="small" v-for="(it, idx) in item.options" :key="idx">{{it.label}}</el-tag>
      </template>
    </div>
    <!-- <div class="answer-item">双皮奶</div> -->
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    handleClick(item) {
      this.$emit('select', item)
    }
  }
}
</script>
<style scoped>
.answer-list{
  display:flex;
  /* justify-content:space-around; */
  flex-wrap:wrap;
  padding:20px 0;
}
.answer-item{
  border-radius: 4px;
  border: 1px solid #c3e3db;
  box-sizing: border-box;
  background: #f0f8f6;
  color: #68b8a4;
  display: inline-block;
  font-size: inherit;
  min-width:225px;
  min-height: 36px;
  line-height: 34px;
  outline: none;
  padding: 0 10px;
  margin:0 8px 15px 7px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  cursor:pointer;
}
.answer-item-inner{
  height:34px;
  vertical-align: top;
}
.el-tag{
  margin-right:10px;
  margin-top:-5px;
  vertical-align: middle;
}
</style>
