<template>
  <view>
    <uv-tabs ref="tabRef" :current="questionIndex" keyName="label" :animationEnabled="true" :itemStyle="tabItemStyle"
      :list="questionList" :scrollable="true" lineHeight="0" @change="handleTabChange">
      <template #default="{ data: { item, index } }">
        <view class="px-20 py-12 text-24 relative"
          :class="[index === questionIndex ? 'bg-primary-light text-primary' : 'bg-back']">
          第{{ index + 1 }}题
          <view v-if="isAnswered(item)" class="absolute top-0 right-0 w-12 h-12 bg-success rounded-full">
          </view>
        </view>
      </template>
    </uv-tabs>
  </view>
</template>
<script lang="ts" setup>
defineOptions({
  name: 'TestTabs',
  options: {
    virtualHost: true,
  }
});
import { TestCenter } from '@/types';
import { SYMBOL_TEST_DATA, useTest } from '../components/useTest';

const tabItemStyle = {
  padding: '0 5px',
};
const testData = inject(SYMBOL_TEST_DATA);
const { questionIndex, currentStep, setQuestionIndex } = testData as ReturnType<typeof useTest>;

const questionList = computed(() => {
  return currentStep.value.questions || []
});
const handleTabChange = (e: any) => {
  setQuestionIndex?.(e.index);
}
const isAnswered = (item: TestCenter.TestQuestionVO) => {
  if (Array.isArray(item.answer)) {
    return item.answer.length !== 0;
  }
  return item.answer !== undefined && item.answer !== '';
}
</script>
<style lang="scss" scoped></style>