<template>
  <div class="account-container" v-loading="loading">
    <div class="top" style="margin-bottom: 40px">
      <div class="account-title">{{ this.$t('trainList.preview') }}</div>
      <div class="button-group">
        <el-button @click="cancel" icon="el-icon-remove-outline">
          {{ $t('common.cancel') }}
        </el-button>
      </div>
    </div>
    <div class="content">
      <div class="card card-full">
        <div class="test-title">{{ assessmentPlanForm.testPaperName }}</div>

        <el-form ref="form" :model="form" label-position="top" style="margin: 0 0 0 200px">
          <el-form-item
            :label="index + 1 + '. ' + item.questionContext + '('+item.questionTypeName + ',' + $t('question.score') + item.score + $t('trainList.scoreUnit')+')'"
            v-for="(item,index) in questionList" :key="index">
<!--            单选/判断--><!--v-model="demo['radio' + index]"-->
            <el-radio-group disabled v-if="item.questionType === '01' || item.questionType === '03'" v-model="checkList[index]">
              <el-radio v-for="(option,optionIndex) in optionListFiltered(item)" :key="optionIndex" :label="option">
                {{ letterFromIndex(optionIndex) }}. {{ option }}</el-radio>
            </el-radio-group>
<!--            多选-->
            <el-checkbox-group v-else-if="item.questionType === '02'" v-model="checkList" disabled>
              <el-checkbox v-for="(option,optionIndex) in optionListFiltered(item)" :key="optionIndex">
                {{ letterFromIndex(optionIndex) }}. {{ option }}</el-checkbox>
            </el-checkbox-group>

<!--            填空题-->
            <el-input v-else type="textarea" style="width: 50%;" disabled/>

          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      demo: {

      },
      checkList:[],
      loading: false,
      questionList: [],
      form: {},
      assessmentPlanForm: {
        testPaperName: '试卷模板'
      },
    };
  },
  created() {
    this.getList()
  },
// Vue实例中的computed属性
  computed: {
    letterFromIndex() {
      const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
      return (index) => {
        if (index >= 0 && index <= letters.length - 1) {
          return letters[index];
        } else {
          return '';
        }
      };
    }
  },
  methods: {
    getList() {
      // 模拟传递的数组数据
      this.questionList = this.$route.query.data
      this.assessmentPlanForm = this.$route.query.assessmentPlanForm
      console.log("this.questionList", this.questionList)
    },
    // 预览返回
    cancel() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.replace("/train/trainlist/detail/addTrain")
    },
    // 获取选项
    optionListFiltered: function(item) {
      const optionList = [];
      for (let i = 1; i <= 10; i++) {
        const option = item[`option${i}`];
        if (option !== null) {
          optionList.push(option);
        }
      }
      return optionList;
    }
  }
};
</script>

<style scoped>

.account-container {
  padding: 16px 1vw;

  .account-title {
    font-family: Arial, Arial;
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
  }

  .question-content {
    text-align: center; /* 水平居中 */
    display: flex;
    justify-content: center;
  }

  .test-title {
    display: flex;
    justify-content: center; /* 水平居中，也可以使用 text-align */
    align-items: center; /* 垂直居中 */
    font-size: 20px;
    height: 50px; /* 设置高度以确保垂直居中生效 */
  }

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .button-group {
    display: flex;
  }

  .content {
    width: 100%;
    display: flex;

    & > div {
      align-self: stretch;
    }

    .card {
      background: #FFFFFF;
      box-shadow: 0px 2px 10px 0px #CED6DD;
      border-radius: 6px;
      padding: 20px;
      margin: 0 auto; /* 实现水平居中 */
      width: 60%; /* 设置元素宽度 */
    }

    .card-full {
      width: 80vw;
    }

  }

}

</style>
