<template>
  <div class="container">
    <Header title="试题" />

    <ul class="ul_box">
      <li v-if="questionListSingle.length > 0" class="question_box">
        <h2 style="text-align: left; margin-top: 20px">单选题</h2>
        <div
          v-for="(item, index) in questionListSingle"
          :key="index"
          class="questionList_box"
        >
          <div class="title_box">
            {{ index + 1 }}. {{ item.questionTitle }} (
            {{ item.questionScore }}分 )
          </div>
          <div class="list_box">
            <van-radio-group
              style="margin-top: 8px"
              v-model="item.submitAnswers"
              direction="horizontal"
            >
              <van-radio
                :name="it.split(`+++`)[0].split(`.`)[0]"
                v-for="(it, i) in item.questionOptions"
                :key="i"
                > {{ it.split(`+++`)[0] }} {{ it.split('+++')[1] }}</van-radio
              >
            </van-radio-group>
          </div>
        </div>
      </li>
      <li v-if="questionListMore.length > 0" class="question_box">
        <h2 style="text-align: left; margin-top: 20px">多选题</h2>
        <div
          v-for="(item, index) in questionListMore"
          :key="index"
          class="questionList_box"
        >
          <div class="title_box">
            {{ index + 1 }}. {{ item.questionTitle }} (
            {{ item.questionScore }}分 )
          </div>
          <div class="list_box">
            <van-checkbox-group v-model="item.submitAnswers" style="margin-left: 10px;">
              <van-checkbox
                :name="it.split(`+++`)[0].split(`.`)[0]"
                v-for="(it, i) in item.questionOptions"
                :key="i"
                shape="square"
                style="margin-top: 8px"
              >
                 {{it.split(`+++`)[0]}} {{ it.split('+++')[1] }}
              </van-checkbox>
            </van-checkbox-group>
          </div>
        </div>
      </li>
      <li v-if="questionListJudge.length > 0" class="question_box">
        <h2 style="text-align: left; margin-top: 20px">判断题</h2>
        <div
          v-for="(item, index) in questionListJudge"
          :key="index"
          class="questionList_box"
        >
          <div class="title_box">
            {{ index + 1 }}. {{ item.questionTitle }} (
            {{ item.questionScore }}分 )
          </div>
          <div class="list_box">
            <van-radio-group
              v-model="item.submitAnswers"
              direction="horizontal"
            >
              <van-radio
                style="margin-top: 8px"
                :name="it.split(`+++`)[0].split(`.`)[0].split(`.`)[0]"
                v-for="(it, i) in item.questionOptions"
                :key="i"
                > {{it.split(`+++`)[0]}} {{ it.split('+++')[1] }}</van-radio
              >
            </van-radio-group>
          </div>
        </div>
      </li>
    </ul>

    <div class="btn_box" @click="submit">提 交</div>
  </div>
</template>

<script>
import { Notify, Dialog } from 'vant'
import { queryQuestionBankByTrainingPlanId, submitQuestionBank } from '@/api/trainList/index.js'

export default {
  name: 'TrainList',

  data () {
    return {
      isLoading: false,
      list: [],
      questionListSingle: [],
      questionListMore: [],
      questionListJudge: []
    }
  },
  mounted () {
    this.initList()
  },

  methods: {
    async initList () {
      const { data: res } = await queryQuestionBankByTrainingPlanId({
        trainingPlanId: this.$route.query.id
      })
      if (res.code !== 200) {
        Notify({ type: 'danger', message: res.msg })
        this.$nextTick(() => {
          this.$router.push('/trainList')
        })
      }
      this.list = res.data
      this.list.forEach((item) => {
        if (item.questionTypes === '1') {
          this.questionListSingle.push(item)
        } else if (item.questionTypes === '2') {
          this.questionListMore.push(item)
        } else if (item.questionTypes === '3') {
          this.questionListJudge.push(item)
        }
      })
    },
    onRefresh () {
      this.initList()
      this.isLoading = false
    },
    submit () {
      Dialog.confirm({
        title: '提示',
        message: '确认提交吗？提交之后无法撤回！'
      })
        .then(async () => {
          this.list.forEach(item => {
            if (Array.isArray(item.submitAnswers)) {
              if (!item.submitAnswers.length) {
                return Notify({ type: 'warning', message: '你还有题目未答' })
              }
            }
          })
          this.list.forEach(item => {
            if (!Array.isArray(item.submitAnswers)) {
              item.submitAnswers = item.submitAnswers.split('.')
            }
            item.trainingPlanId = this.$route.query.id
          })
          // console.log(this.list)
          const { data: res } = await submitQuestionBank(this.list)
          console.log(res, 8888)
          if (res.code !== 200) return Notify({ type: 'danger', message: res.msg })
          Notify({ type: 'success', message: '提交成功!' })
          this.$nextTick(() => {
            this.$router.push('/trainList')
          })
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style lang="less" scoped>
.ul_box {
  margin: 0;

  .question_box {
    padding: 0 10px;
    // background-color: #fff;

    .title_box {
      margin-bottom: 0.05rem;
    }
    .questionList_box {
      text-align: left;
      margin-top: 10px;
    }

    .list_box {
      display: flex;
      flex-direction: column;
    }
  }
}

.van-radio-group--horizontal {
  flex-direction: column;
}

  .btn_box {
    width: 100%;
    position: fixed;
    bottom: 0px;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1rem;
    color: #fff;
    background-color:#1c4990 ;
  }
</style>
