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

    <template v-if="notfound">
      <view class="h-60vh flex-center">
        <uv-empty text="试卷不存在" :icon="NotFoundImg"> </uv-empty>
      </view>
    </template>
    <template v-else>
      <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"
                      :activeColor="
                        op.selected != op.is_true && op.selected
                          ? '#e3e3e3'
                          : '#3678f7'
                      "
                      :key="i"
                      :label="op.text"
                      :name="i"
                    >
                      <view class="flex items-center">
                        <view>{{ op.text }}</view>
                        <uv-icon
                          v-if="(op.selected || op.is_true) && readonly"
                          :color="
                            op.is_true && op.selected ? '#4caf50' : '#ee2c37'
                          "
                          :name="
                            op.is_true && op.selected
                              ? 'checkbox-mark'
                              : 'close'
                          "
                        ></uv-icon>
                      </view>
                    </uv-checkbox>
                  </uv-checkbox-group>
                </template>
                <template v-if="item.cate == 1">
                  <uv-radio-group
                    v-if="!readonly"
                    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="i"
                    >
                      <view class="flex items-center">
                        <view>{{ op.text }}</view>
                        <uv-icon
                          v-if="op.selected && readonly"
                          :color="op.is_true ? '#ee2c37' : '#5ac725'"
                          :name="op.is_true ? 'checkbox-mark' : 'close'"
                        ></uv-icon>
                      </view>
                    </uv-radio>
                  </uv-radio-group>
                  <template v-else>
                    <uv-checkbox-group
                      activeColor="#ee2c37"
                      v-model="item.answer"
                      placement="column"
                    >
                      <uv-checkbox
                        :customStyle="{ margin: '8px' }"
                        v-for="(op, i) in item.options"
                        :activeColor="
                          op.selected != op.is_true && op.selected
                            ? '#e3e3e3'
                            : '#3678f7'
                        "
                        :key="i"
                        :label="op.text"
                        :name="i"
                      >
                        <view class="flex items-center">
                          <view>{{ op.text }}</view>
                          <uv-icon
                            v-if="(op.selected || op.is_true) && readonly"
                            :color="
                              op.is_true && op.selected ? '#4caf50' : '#ee2c37'
                            "
                            :name="
                              op.is_true && op.selected
                                ? 'checkbox-mark'
                                : 'close'
                            "
                          ></uv-icon>
                        </view>
                      </uv-checkbox>
                    </uv-checkbox-group>
                  </template>
                </template>
              </view>
            </view>
          </template>
        </view>
      </view>
    </template>

    <uv-modal
      ref="modalRef"
      title="提示"
      :content="`确认提交？`"
      :showCancelButton="true"
      @confirm="onSubmit"
    ></uv-modal>
  </view>
</template>
<script setup>
import NotFoundImg from '@/static/images/404.svg'
import CuNavbar from '@/components/cu-navbar/index'
import { http } from '@/utils/request'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
const notfound = ref(false)
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 (readonly.value) {
      const trueIndices = item.options.reduce((indices, item, index) => {
        if (item.is_true || item.selected) {
          indices.push(index)
        }
        return indices
      }, [])
      item.answer = trueIndices
    } else {
      if (item.cate == 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))

function findAllIndices(arr, predicate) {
  return arr.filter(predicate).keys()
}

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
})
onShow(() => {
  getDetail()
})

const getDetail = async () => {
  try {
    await http.get(`/train/examinations/${id.value}`).then((resData) => {
      const res = resData
      info.value = res
    })
    notfound.value = false
  } catch (error) {
    const { statusCode } = error
    if (statusCode == 404) {
      notfound.value = true
    }
  }
}

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>
