<template>
  <view>
    <view class="items-center justify-between">
      <view>{{ index }}/{{ total }}</view>
      <view>
        <view v-if="index > 0" @click="prev">上一题</view>
        <view v-if="index < total" @click="next">下一题</view>
        <view v-if="index >= total" @click="submit">提交</view>
      </view>
    </view>
    <view class="content">
      <template v-for="(item, key) in list" :key="key">
        <view v-show="key == index" class="item">
          <view class="title">({{ item.cate_name }}){{ item.title }}</view>
          <view class="options">
            <u-checkbox-group v-if="item.cate == 1">
              <u-checkbox v-for="(option, optionKey) in item.options" :key="optionKey" :label="option.text" :name="optionKey" />
            </u-checkbox-group>
            <u-radio-group v-if="item.cate == 2">
              <u-radio v-for="(option, optionKey) in item.options" :key="optionKey" :label="option.text" :name="optionKey" />
            </u-radio-group>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>
<script setup>
  import { http } from '@/utils/request'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  const info = ref({})
  // 考题记录
  const list = ref([])
  // 总题数
  const total = ref(0)
  // 序号
  const index = ref(0)
  // 只读模式
  const readonly = ref(true)
  onLoad((options) => {
    http.get(`/train/examinations/${options.id}`).then(res => {
      if (res.finished_at) {
        readonly = false
      }
      info.value = res
      list.value = res.content
      total.value = res.content.length
    })
  })

  const next = () => {
    if (index < total) {
      index.value++
    }
  }
  const prev = () => {
    if (index > 0) {
      index.value--
    }
  }

  const submit = () => {
    http.post(`/train/examinations/${info.id}/answer`).then(res => {
    })
  }
</script>