<template>
  <div class="single-question">
    <div class="option-list">
      <div
        v-for="opt in item.taskQainfoAnswerList"
        class="option"
        :class="[{isChecked},{isActive:activeId===opt.qainfoAnswerId}]"
        :key="opt.qainfoAnswerId"
        @click="handleChoose(opt)"
      >
        {{ opt.qainfoAnswerName }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    isChecked: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      activeId: ''
    };
  },
  methods: {
    handleChoose(opt) {
      // 如果已经判卷，不要再可以选择
      if (this.isChecked) return false;
      this.activeId = opt.qainfoAnswerId;
      this.$emit("change", opt.qainfoAnswerId);
    }
  },
};
</script>
<style lang="scss" scoped>
.single-question {
  width: 100%;

  .option-list {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    // 选项
    .option {
      width: 100%;
      height: 0.53rem;
      line-height: 0.53rem;
      font-size: 0.28rem;
      color: #464646;
      margin-bottom: 0.16rem;
      border-radius: 0.26rem;
      background: #eaebf0;
      text-align: left;
      text-indent: 0.46rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
    }

    // 选中的状态
    .option.isActive {
      background-color: #495975;
      color: #fff;
    }
  }
}
</style>
