<template>
  <ie-popup ref="popupRef" mode="center">
    <view class="w-[88vw]">
      <view class="text-center my-40 font-medium">您还有未完成的题</view>
      <view class="grid grid-cols-4 gap-20 m-40">
        <view v-for="item in unAnseredQuestionList" :key="item.id" class="rounded-4 bg-back text-26 px-20 py-14"
          @click="handleClick(item)">
          <view class="text-center">第{{ item.no }}题</view>
        </view>
      </view>
      <view class="m-40">
        <uv-button type="primary" shape="circle" @click="close">去做题</uv-button>
      </view>
    </view>
  </ie-popup>
</template>
<script lang="ts" setup>
defineOptions({
  name: 'TestPopup',
  options: {
    virtualHost: true,
  }
});
import { TestCenter } from '@/types';
import { SYMBOL_TEST_DATA, useTest } from '../components/useTest';

const testData = inject(SYMBOL_TEST_DATA);

const { questionList, unAnseredQuestionList, setQuestionIndex } = testData as ReturnType<typeof useTest>;

const popupRef = ref();
const open = () => {
  popupRef.value?.open();
}
const close = () => {
  popupRef.value?.close();
}

const handleClick = (item: TestCenter.TestQuestionVO) => {
  const index = questionList?.value.findIndex(qs => qs.id === item.id);
  if (index !== -1) {
    setQuestionIndex?.(index, false);
  }
}

defineExpose({ open, close });
</script>
<style lang="scss" scoped></style>