<script setup lang="ts">
import { useFetchAnalysis } from '@/hooks/request/useSurvey';
import { ref } from 'vue';
import SurveyItem from '@/views/Survey/components/SurveyItem.vue';
import AnalysisInfo from '@/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue';
import { fetchSingleSurvey } from '@/hooks/request/useSurvey';
import YlSwiper from '@/components/YlSwiper/Index.vue';
import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
import emptyImg from '@/assets/img/emptyImg.png';
import { isDrag } from '../hooks/useDragEvent';
import { defineEmits } from 'vue';

const survey = defineModel<SurveyItem>('survey');
const parentRef = defineModel<any>('parentRef');
// 获取问卷分析数据
const { questionAnalysis } = useFetchAnalysis(survey.value?.sn as string);
const { currentSurvey } = fetchSingleSurvey(survey.value?.sn as string);

const disableInsight = ref(true);

// 定义事件
const emit = defineEmits(['slideChange']);
const slideChange = function (swiper: any) {
  parentRef.value.resize();
  emit('slideChange', { swiper, activeIndex: swiper.activeIndex });
};
</script>

<template>
  <section class="question-item-container">
    <section class="survey-item">
      <!--  问卷详情部分  -->
      <survey-item
        v-if="currentSurvey"
        :is-analysis="disableInsight"
        :disable-action-button="true"
        :survey="currentSurvey as SurveyItem"
      ></survey-item>
    </section>

    <!-- 问卷分析 -->
    <section class="analysis-info">
      <!-- 方式一：使用默认插槽，手动添加 swiper-slide 元素 -->
      <yl-swiper
        @slideChange="slideChange"
        :pagination="!isDrag"
        :slides-per-view="1"
        :centered-slides="true"
        :navigation="!isDrag"
        :loop="false"
        :autoHeight="true"
        :space-between="0"
        :allow-touch-move="false"
      >
        <swiper-slide v-for="(analysis, index) in questionAnalysis" :key="analysis.stem">
          <analysis-info :sn="survey?.sn" :questionAnalysis="[analysis]" :parentIndex="index + 1" />
        </swiper-slide>
        <div class="empty-container" v-if="questionAnalysis?.length === 0">
          <empty-container :error-msg="'本问卷暂无有效答题数据'" :img-src="emptyImg" />
        </div>
      </yl-swiper>
    </section>
  </section>
</template>

<style lang="scss" scoped>
@use '@/assets/css/theme';

.question-item-container {
  width: 90vw;
  margin-bottom: 40px;
  .analysis-info {
    .empty-container {
      width: 100%;
    }
  }
}
</style>
