<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"
                    :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>

    <uv-modal
      ref="modalRef"
      title="提示"
      :content="`确认提交？`"
      :showCancelButton="true"
      @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 (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) {
  console.log(arr)
  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
  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>
