<template>
  <view>
    <CuNavbar title="培训考试">
      <template v-if="!readonly" #right>
        <view class="text-white" @click="submit">提交</view>
      </template>
    </CuNavbar>

    <uv-sticky bgColor="#fff">
      <view class="flex items-center justify-between h-90rpx px-base">
        <view class="w-140rpx">
          <view class="btn" :disabled="index == 0" @click="prev">上一题</view>
        </view>
        <view>{{ index + 1 }}/{{ total }}</view>
        <view class="w-140rpx text-right">
          <view class="btn" :disabled="index == total - 1" @click="next">
            下一题</view
          >
        </view>
      </view>
    </uv-sticky>
    <view class="p-base">
      <view class="card-shadow bg-white rounded-19rpx p-base min-h-30vh">
        <template v-for="(item, key) in list" :key="key">
          <view v-show="key == index" class="item">
            <view class="title text-30rpx"
              >({{ item.cate_name }}){{ item.title }}

              <text v-if="readonly" class="text-primary"
                >(得分：{{ item.user_score }})</text
              >
            </view>
            <view
              class="pt-base"
              :class="[readonly ? 'pointer-events-none' : '']"
            >
              <template v-if="item.cate == 2">
                <uv-checkbox-group
                  activeColor="#ee2c37"
                  v-model="item.answer"
                  placement="column"
                >
                  <uv-checkbox
                    :customStyle="{ margin: '8px' }"
                    v-for="(op, i) in item.options"
                    :key="i"
                    :label="op.text"
                    :name="op.text"
                  >
                  </uv-checkbox>
                </uv-checkbox-group>
              </template>
              <template v-if="item.cate == 1">
                <uv-radio-group
                  activeColor="#ee2c37"
                  v-model="item.answer"
                  placement="column"
                >
                  <uv-radio
                    :customStyle="{ margin: '8px' }"
                    v-for="(op, i) in item.options"
                    :key="i"
                    :label="op.text"
                    :name="op.text"
                  >
                  </uv-radio>
                </uv-radio-group>
              </template>
            </view>
          </view>
        </template>
      </view>
    </view>

    <uv-modal
      ref="modalRef"
      title="提示"
      :content="`是否确认提交？`"
      @confirm="onSubmit"
    ></uv-modal>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import { http } from '@/utils/request'
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
const modalRef = ref(null)
const info = ref({})
const id = ref(0)
// 考题记录
// const list = ref([])
// 总题数
// const total = ref(0)
// 序号
const index = ref(0)
// 只读模式
// const readonly = ref(true)
const loading = ref(false)
const list = computed(() => {
  const content = info.value?.content ?? []
  content.forEach((item) => {
    if (item.score == 1) {
      item.answer = item.user_answer[0] ?? ''
    } else {
      item.answer = item.user_answer ?? []
    }
  })
  return info.value.content || []
})
const total = computed(() => list.value.length)
const readonly = computed(() => (info.value.finished_at ? true : false))

const answer = computed(() => {
  const arr = list.value.reduce((a, b) => {
    const c = [].concat(b.answer ?? [])
    a.push(c)
    return a
  }, [])
  return arr || []
})

onLoad((options) => {
  id.value = options.id
  http.get(`/train/examinations/${options.id}`).then((resData) => {
    const res = resData
    info.value = res
  })
})

const next = () => {
  if (index.value < total.value - 1) {
    index.value++
  }
}
const prev = () => {
  if (index.value > 0) {
    index.value--
  }
}
const submit = () => {
  modalRef.value.open()
}
const onSubmit = async () => {
  if (loading.value) return
  loading.value = true
  try {
    await http.post(`/train/examinations/${id.value}/answer`, {
      answers: answer.value,
    })
    uni.$emit('examination:onRefresh')
    uni.navigateBack()
  } catch (error) {
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.btn {
  @apply text-28rpx;
}
.btn[disabled='true'] {
  color: #999;
  @apply pointer-events-none;
}
</style>
