<template>
  <!--  <layout />-->
  <div ref="scrollbar" class="preview-container">
    <!--    {{ questionsData }}-->
    <!--    <van-nav-bar :title="getDomString(questionsData?.survey?.title)" left-arrow />-->

    <!--     进度条 -->
    <!-- <div v-if="styleInfo.is_progress" class="progress-bar">
      <progress-bar :percent="(page / (pages.length + 1)) * 100" :color="styleInfo.button_color" />
    </div> -->

    <!-- 头图 -->
    <!--    <img v-if="styleInfo.head_img_status && styleInfo.head_img_url" width="100%" class="head-img"-->
    <!--         :src="styleInfo.head_img_url" />-->
    <!-- LOGO -->

    <div v-if="page !== 0 && page !== pages.length + 1" class="preview-info">
      <div>
        <div class="preview-info-header" v-html="questionsData?.survey?.title"></div>
        <div class="preview-info-header-intro" v-html="questionsData?.survey?.introduction"></div>
      </div>

      <div class="preview-icon">
        <div class="right-icon"></div>
        <!--        <img :src="icon" alt="icon" />-->
      </div>
    </div>
    <div
      v-if="styleInfo.logo_status && styleInfo.logo_url"
      class="example-logo"
      :style="[
        {
          'justify-content':
            styleInfo.logo_site === 1
              ? 'flex-start'
              : styleInfo.logo_site === 2
                ? 'center'
                : 'flex-end'
        },
        { 'padding-left': styleInfo.logo_site === 1 ? '20px' : '' },
        { 'padding-right': styleInfo.logo_site === 3 ? '20px' : '' },
        { position: styleInfo.head_img_status ? 'absolute' : '' },
        !styleInfo.head_img_status && styleInfo.background_status
          ? `background-color: ${styleInfo.background_color};background-image: url(${styleInfo.background_url})`
          : ''
      ]"
    >
      <img class="logo" :src="styleInfo.logo_url" alt="logo" />
    </div>

    <!-- 问题 -->
    <!-- eslint-disable-next-line  -->
    <div class="questions" v-if="questions">
      <!-- 提前终止和正常完成 -->
      <q-last
        v-if="page === pages.length + 1"
        :code="questionsData?.action?.code"
        :action="questionsData?.action"
        :survey="questionsData?.survey"
        :isAnswer="isAnswer"
        :isTemplate="isTemplate"
      />
      <!-- 问卷名和描述 -->
      <!-- <q-first v-else-if="page === 0" isMobile :title="questionsData?.survey?.title"
        :desc="questionsData?.survey?.introduction" :questions="questionsData?.questions" :isAnswer="isAnswer"
        :showTitle="styleInfo.is_title" :showDesc="styleInfo.is_introduce" :label="questionsData?.survey?.title" /> -->
      <!-- 题-mobile -->
      <!-- <question v-for="question in questions" v-else :id="'questionIndex' + question.question_index"
        :key="question.question_index" class="question" :tip="question.tip" :stem="question.stem"
        :title="question.title" :error="question.error" :warning="question.warning" :questions="questionsData.questions"
        :questionType="question.question_type" :questionIndex="question.question_index"
        :showTitle="styleInfo.is_question_number && true" isMobile :isAnswer="isAnswer"> -->

      <div
        v-for="question in questions"
        v-else
        :id="'questionIndex' + question.question_index"
        :key="question.question_index"
        class="question"
      >
        <!--        <q-radio-->
        <!--          v-if="question.question_type === 1"-->
        <!--          :list="question.list"-->
        <!--          :config="question.config"-->
        <!--          v-model:answer="question.answer"-->
        <!--          v-model:answerIndex="question.answerIndex"-->
        <!--          :hideOptions="question.hideOptions"-->
        <!--          :stem="question.stem"-->
        <!--          @previous="previous"-->
        <!--          @next="next"-->
        <!--          :answerSn="questionsData.answer.sn"-->
        <!--          :answerSurveySn="questionsData.answer.survey_sn"-->
        <!--          :question="question"-->
        <!--        />-->
        <!-- 单选题 -->
        <preview-choice
          v-if="question.question_type === 1"
          v-model:answer="question.answer"
          :answerIndex="getQuestionIndex(questionsData.questions, question)"
          :list="question.list"
          :config="question.config"
          :hideOptions="question.hideOptions"
          :stem="question.stem"
          :answerSn="questionsData.answer.sn"
          :answerSurveySn="questionsData.answer.survey_sn"
          :question="question"
          @previous="previous"
          @next="next"
          @change-answer="onRelation($event, question)"
        />
        <!-- 多选题 -->
        <preview-checkbox
          v-else-if="question.question_type === 2"
          v-model:answer="question.answer"
          :answerIndex="getQuestionIndex(questionsData.questions, question)"
          :list="question.list"
          :config="question.config"
          :hideOptions="question.hideOptions"
          :stem="question.stem"
          :answerSn="questionsData.answer.sn"
          :answerSurveySn="questionsData.answer.survey_sn"
          :question="question"
          @change-answer="onRelation($event, question)"
          @previous="previous"
          @next="next"
        />
        <!--        &lt;!&ndash; 级联题 &ndash;&gt;-->
        <!--        <q-cascader-->
        <!--          v-else-if="question.question_type === 3"-->
        <!--          :list="question.list"-->
        <!--          :config="question.config"-->
        <!--          :question="question"-->
        <!--          v-model:answer="question.answer"-->
        <!--          isMobile-->
        <!--        />-->
        <!-- 填空题 -->
        <preview-completion
          v-else-if="question.question_type === 4"
          :config="question.config"
          :answer="question.answer"
          :answerIndex="getQuestionIndex(questionsData.questions, question)"
          :stem="question.stem"
          :answerSn="questionsData.answer.sn"
          :answerSurveySn="questionsData.answer.survey_sn"
          :question="question"
          @previous="previous"
          @next="next"
          @change-answer="onRelation($event, question)"
        />
        <!-- 打分题 -->
        <preview-rate
          v-else-if="question.question_type === 5"
          v-model:answer="question.answer"
          :answerIndex="getQuestionIndex(questionsData.questions, question)"
          :list="question.list"
          :config="question.config"
          :question="question"
          isMobile
          @change-answer="onRelation($event, question)"
        />
        <!-- 图文说明题 -->
        <preview-text-with-images
          :answerIndex="getQuestionIndex(questionsData.questions, question)"
          :stem="question.stem"
          v-else-if="question.question_type === 6"
          :config="question.config"
          @previous="previous"
          @next="next"
          v-model:answer="question.answer"
          :answerSn="questionsData.answer.sn"
          :answerSurveySn="questionsData.answer.survey_sn"
          :question="question"
        />
        <!--        &lt;!&ndash; 日期时间题 &ndash;&gt;-->
        <!--        <q-date-->
        <!--          v-else-if="question.question_type === 7"-->
        <!--          :config="question.config"-->
        <!--          :question="question"-->
        <!--          v-model:answer="question.answer"-->
        <!--          isMobile-->
        <!--        />-->
        <!-- 矩阵填空题 -->
        <preview-matrix-text
          v-else-if="question.question_type === 8"
          v-model:answer="question.answer"
          :answerIndex="getQuestionIndex(questionsData.questions, question)"
          :list="question.list"
          :questionIndex="question.question_index"
          :config="question.config"
          :stem="question.stem"
          :question="question"
          @previous="previous"
          @next="next"
          @change-answer="onRelation($event, question)"
        />
        <!-- 矩阵单选题 -->
        <preview-matrix-radio
          v-else-if="question.question_type === 9"
          v-model:answer="question.answer"
          :answerIndex="getQuestionIndex(questionsData.questions, question)"
          :list="question.list"
          :questionIndex="question.question_index"
          :config="question.config"
          :stem="question.stem"
          :answerSn="questionsData.answer.sn"
          :answerSurveySn="questionsData.answer.survey_sn"
          :question="question"
          @change-answer="onRelation($event, question)"
          @previous="previous"
          @next="next"
        />
        <!-- 矩阵多选题 -->
        <preview-matrix-checkbox
          v-else-if="question.question_type === 10"
          v-model:answer="question.answer"
          :answerIndex="getQuestionIndex(questionsData.questions, question)"
          :list="question.list"
          :config="question.config"
          :question="question"
          @change-answer="onRelation($event, question)"
        />
        <!--        &lt;!&ndash; 矩阵打分题 &ndash;&gt;-->
        <!--        <matrix-rate-->
        <!--          v-else-if="question.question_type === 11"-->
        <!--          :list="question.list"-->
        <!--          :config="question.config"-->
        <!--          :question="question"-->
        <!--          v-model:answer="question.answer"-->
        <!--          @changeAnswer="onRelation($event, question)"-->
        <!--          isMobile-->
        <!--        />-->
        <!--        &lt;!&ndash; 图片显示题 &ndash;&gt;-->
        <!--        <q-img-show-->
        <!--          v-else-if="question.question_type === 12"-->
        <!--          v-model:answer="question.answer"-->
        <!--          :list="question.list"-->
        <!--          :config="question.config"-->
        <!--          :question="question"-->
        <!--          isMobile-->
        <!--        />-->
        <!--        &lt;!&ndash; 图片单选题 &ndash;&gt;-->
        <!--        <q-img-radio-->
        <!--          v-else-if="question.question_type === 13"-->
        <!--          :list="question.list"-->
        <!--          :config="question.config"-->
        <!--          :question="question"-->
        <!--          v-model:answer="question.answer"-->
        <!--          isMobile-->
        <!--        />-->
        <!--        &lt;!&ndash; 图片多选题 &ndash;&gt;-->
        <!--        <q-img-check-->
        <!--          v-else-if="question.question_type === 14"-->
        <!--          :list="question.list"-->
        <!--          :config="question.config"-->
        <!--          :question="question"-->
        <!--          v-model:answer="question.answer"-->
        <!--          isMobile-->
        <!--        />-->
        <!--        &lt;!&ndash; 分类题 &ndash;&gt;-->
        <!--        <q-class-->
        <!--          v-else-if="question.question_type === 15"-->
        <!--          :list="question.list"-->
        <!--          :config="question.config"-->
        <!--          :question="question"-->
        <!--          v-model:answer="question.answer"-->
        <!--          @changeAnswer="onRelation($event, question)"-->
        <!--          isMobile-->
        <!--        />-->
        <!--        &lt;!&ndash; 排序题 &ndash;&gt;-->
        <!--        <q-sort-->
        <!--          v-else-if="question.question_type === 16"-->
        <!--          :list="question.list"-->
        <!--          :config="question.config"-->
        <!--          :question="question"-->
        <!--          v-model:answer="question.answer"-->
        <!--          isMobile-->
        <!--        />-->
        <!--        &lt;!&ndash; 恒定总和题 &ndash;&gt;-->
        <!--        <q-sum-->
        <!--          v-else-if="question.question_type === 17"-->
        <!--          :list="question.list"-->
        <!--          :config="question.config"-->
        <!--          :question="question"-->
        <!--          v-model:answer="question.answer"-->
        <!--          @changeAnswer="onRelation($event, question)"-->
        <!--          isMobile-->
        <!--        />-->
        <!-- 文件上传题 -->
        <preview-file-upload
          v-else-if="question.question_type === 18"
          v-model:answer="question.answer"
          :answerIndex="getQuestionIndex(questionsData.questions, question)"
          :config="question.config"
          :question="question"
          isMobile
          :questionIndex="question.question_index"
          @change-answer="onRelation($event, question)"
        />
        <!--        &lt;!&ndash; 地理位置题 &ndash;&gt;-->
        <!--        <q-map-->
        <!--          v-else-if="question.question_type === 19"-->
        <!--          :questionIndex="question.question_index"-->
        <!--          :config="question.config"-->
        <!--          :question="question"-->
        <!--          v-model:answer="question.answer"-->
        <!--          isMobile-->
        <!--        />-->
        <!--        &lt;!&ndash; 手机号题 &ndash;&gt;-->
        <!--        <q-phone-->
        <!--          v-else-if="question.question_type === 20"-->
        <!--          :config="question.config"-->
        <!--          :question="question"-->
        <!--          v-model:error="question.error"-->
        <!--          v-model:answer="question.answer"-->
        <!--          isMobile-->
        <!--        />-->
        <!--        &lt;!&ndash; 密码题 &ndash;&gt;-->
        <!--        <q-password-->
        <!--          v-else-if="question.question_type === 21"-->
        <!--          :config="question.config"-->
        <!--          :question="question"-->
        <!--          v-model:error="question.error"-->
        <!--          v-model:answer="question.answer"-->
        <!--          isMobile-->
        <!--        />-->
        <!-- 签名题 -->
        <preview-sign
          v-else-if="question.question_type === 22"
          :config="question.config"
          :question="question"
          v-model:answer="question.answer"
          :answerIndex="getQuestionIndex(questionsData.questions, question)"
          @change-answer="onRelation($event, question)"
        />
        <!--        &lt;!&ndash; 知情同意书 &ndash;&gt;-->
        <!--        <q-consent-->
        <!--          v-else-if="question.question_type === 23"-->
        <!--          :title="question.stem"-->
        <!--          :config="question.config"-->
        <!--          :question="question"-->
        <!--          v-model:answer="question.answer"-->
        <!--          @next="next"-->
        <!--          isMobile-->
        <!--          show-->
        <!--        />-->
        <!--        &lt;!&ndash; 热区题 &ndash;&gt;-->
        <!--        <q-heat-->
        <!--          v-else-if="question.question_type === 25"-->
        <!--          :list="question.list"-->
        <!--          :config="question.config"-->
        <!--          v-model:error="question.error"-->
        <!--          v-model:answer="question.answer"-->
        <!--          :hideOptions="question.hideOptions"-->
        <!--          @changeAnswer="onRelation($event, question)"-->
        <!--          isMobile-->
        <!--          :stem="question.stem"-->
        <!--          @previous="previous"-->
        <!--          @next="next"-->
        <!--          :answerSn="questionsData.answer.sn"-->
        <!--          :answerSurveySn="questionsData.answer.survey_sn"-->
        <!--          :question="question"-->
        <!--        />-->
        <!--        &lt;!&ndash; 热区题-喜欢 &ndash;&gt;-->
        <!--        <q-heat-like-->
        <!--          v-else-if="question.question_type === 26"-->
        <!--          :list="question.list"-->
        <!--          :config="question.config"-->
        <!--          v-model:error="question.error"-->
        <!--          v-model:answer="question.answer"-->
        <!--          :hideOptions="question.hideOptions"-->
        <!--          @changeAnswer="onRelation($event, question)"-->
        <!--          isMobile-->
        <!--          :stem="question.stem"-->
        <!--          @previous="previous"-->
        <!--          @next="next"-->
        <!--          :answerSn="questionsData.answer.sn"-->
        <!--          :answerSurveySn="questionsData.answer.survey_sn"-->
        <!--          :question="question"-->
        <!--        />-->
        <!--        &lt;!&ndash; 多项填空 &ndash;&gt;-->
        <!--        <q-input-blanks-->
        <!--          v-else-if="question.question_type === 27"-->
        <!--          :config="question.config"-->
        <!--          :question="question"-->
        <!--          v-model:error="question.error"-->
        <!--          v-model:answer="question.answer"-->
        <!--          isMobile-->
        <!--        />-->
        <!--        &lt;!&ndash; 高级题型-PSM &ndash;&gt;-->
        <!--        <QPSM-->
        <!--          v-else-if="question.question_type === 101"-->
        <!--          :stem="question.stem"-->
        <!--          :title="question.title"-->
        <!--          :error="question.error"-->
        <!--          :config="question.config"-->
        <!--          v-model:answer="question.answer"-->
        <!--          isMobile-->
        <!--          :isAnswer="isAnswer"-->
        <!--          :questionIndex="question.question_index"-->
        <!--          :label="question.title"-->
        <!--          :question="question"-->
        <!--        />-->
        <!--        &lt;!&ndash; 高级题型-KANO &ndash;&gt;-->
        <!--        <QKANO-->
        <!--          v-else-if="question.question_type === 102"-->
        <!--          :error="question.error"-->
        <!--          :title="question.stem"-->
        <!--          :config="question.config"-->
        <!--          v-model:answer="question.answer"-->
        <!--          :loading="loading"-->
        <!--          @previous="previous"-->
        <!--          @next="next"-->
        <!--          @toTop="toTop"-->
        <!--          isMobile-->
        <!--          :isAnswer="isAnswer"-->
        <!--          :questionIndex="question.question_index"-->
        <!--          :label="question.title"-->
        <!--          :question="question"-->
        <!--        />-->
        <!--        &lt;!&ndash; 高级题型-BPTO &ndash;&gt;-->
        <!--        <QBPTO-->
        <!--          v-else-if="question.question_type === 104"-->
        <!--          :error="question.error"-->
        <!--          :list="question.list"-->
        <!--          :stem="question.stem"-->
        <!--          :title="question.title"-->
        <!--          :config="question.config"-->
        <!--          v-model:answer="question.answer"-->
        <!--          :loading="loading"-->
        <!--          @previous="previous"-->
        <!--          @next="next"-->
        <!--          isMobile-->
        <!--          :isAnswer="isAnswer"-->
        <!--          :questionIndex="question.question_index"-->
        <!--          :label="question.title"-->
        <!--          :question="question"-->
        <!--        />-->
        <!--        &lt;!&ndash; 高级题型-MXD &ndash;&gt;-->
        <!--        <QMXD-->
        <!--          v-else-if="question.question_type === 105"-->
        <!--          :error="question.error"-->
        <!--          :title="question.stem"-->
        <!--          :list="question.list"-->
        <!--          :config="question.config"-->
        <!--          :version="question.version"-->
        <!--          v-model:answer="question.answer"-->
        <!--          :loading="loading"-->
        <!--          @previous="previous"-->
        <!--          @next="next"-->
        <!--          @changeAnswer="onRelation($event, question)"-->
        <!--          isMobile-->
        <!--          :isAnswer="isAnswer"-->
        <!--          :questionIndex="question.question_index"-->
        <!--          :label="question.title"-->
        <!--          :question="question"-->
        <!--        />-->
        <!--        &lt;!&ndash; 高级题型-NPS &ndash;&gt;-->
        <preview-n-p-s
          v-else-if="question.question_type === 106"
          v-model:answer="question.answer"
          :answerIndex="getQuestionIndex(questionsData.questions, question)"
          :isPreview="isPreview"
          :title="question.title"
          :stem="question.stem"
          :list="question.list"
          :config="question.config"
          :isAnswer="isAnswer"
          :questionIndex="question.question_index"
          :label="question.title"
          :loading="loading"
          :isTemplate="isTemplate"
          :showTitle="styleInfo.is_question_number"
          :question="question"
          @previous="previous"
          @next="next"
          @change-answer="onRelation($event, question)"
        />
      </div>

      <!--       <LangTranslate v-if="isAnswer && styleInfo.is_yip" translate-key="PoweredByDigitalTechnologyCenterYIP"
        class="footer" /> -->
    </div>
    <div class="end-text" style="margin: 10px 0; color: rgba(75, 75, 89, 1); text-align: center">
      <el-text> 由数字科技中心YIP提供支持</el-text>
    </div>
    <!-- 分页 -->
    <!-- eslint-disable max-len -->
    <pfe-pagination
      v-if="isPreview"
      class="pagination"
      :isPreview="isPreview"
      :page="page"
      :pages="pages.length + 1"
      :min="styleInfo.is_home ? 0 : 1"
      :loading="loading"
      :showPrevious="styleInfo.is_up_button"
      :showStart="styleInfo.is_start_button"
      :startText="styleInfo.start_button_text"
      :showSubmit="styleInfo.is_submit_button"
      :submitText="
        localPageTimer.is_show && localPageTimer.short_time
          ? `${localPageTimer.short_time}S`
          : styleInfo.submit_button_text
      "
      :buttonTextColor="styleInfo.button_text_color"
      :buttonColor="styleInfo.button_color"
      :nextText="
        localPageTimer.is_show && localPageTimer.short_time ? `${localPageTimer.short_time}S` : ''
      "
      :nextDisabled="localPageTimer.short_time"
      isMobile
      @previous="previous"
      @next="next"
    >
    </pfe-pagination>
  </div>
  <!-- eslint-enable max-len -->
</template>

<script setup>
import { useTemplateRef } from 'vue';
import QLast from '@/views/Survey/views/Preview/components/questions/QLast.vue';
import PfePagination from './components/PfePagination/Index.vue';
import { storeToRefs } from 'pinia';
import { useQuestionStore } from '@/stores/Questions/useQuestionStore';
import { AnswerApi } from './js/api';
import { useRoute, useRouter } from 'vue-router';
import PreviewChoice from './components/questions/PreviewChoice.vue';
import PreviewCompletion from '@/views/Survey/views/Preview/components/questions/PreviewCompletion.vue';
import PreviewFileUpload from '@/views/Survey/views/Preview/components/questions/PreviewFileUpload.vue';
import PreviewMatrixRadio from '@/views/Survey/views/Preview/components/questions/PreviewMatrixRadio.vue';
import PreviewMatrixCheckbox from '@/views/Survey/views/Preview/components/questions/PreviewMatrixCheckbox.vue';
import PreviewMatrixText from '@/views/Survey/views/Preview/components/questions/PreviewMatrixText.vue';
import PreviewNPS from '@/views/Survey/views/Preview/components/questions/PreviewNPS.vue';
import msg from './js/message';
import answerMock from '@/views/Survey/views/Preview/js/mock.js';
import { getQuestionIndex } from '@/utils/utils.js';
import PreviewCheckbox from '@/views/Survey/views/Preview/components/questions/PreviewCheckbox.vue';
import PreviewRate from '@/views/Survey/views/Preview/components/questions/PreviewRate.vue';
import PreviewSign from '@/views/Survey/views/Preview/components/questions/PreviewSign.vue';
import PreviewTextWithImages from '@/views/Survey/views/Preview/components/questions/PreviewTextWithImages.vue';
import {
  startValidate,
  validateList
} from '@/views/Survey/views/Preview/hooks/useValidateQuestion';

const isPreview = defineModel('isPreview', {
  type: Boolean,
  default: true
});

// scrollbar
const scrollbar = useTemplateRef('scrollbar');
const questionStore = useQuestionStore();
// route
const route = useRoute();
const router = useRouter();
const {
  currentSn,
  questionsData,
  styleInfo,
  page,
  pages,
  l,
  loading,
  prevLoading,
  localPageTimer,
  questions,
  translatedText,
  isTemplate
} = storeToRefs(questionStore);
questionsData.value = {};

questionStore.fetchQuestions();
// 第一次进入页面清空答案
//初始化页面到第一页
questionsData.value?.questions && clearAnswer(questionsData.value.questions);
page.value = 1;
// 清空action
// delete questionsData.value.action;

const props = defineProps({
  isTemplate: {
    type: Boolean,
    default: false
  },
  isAnswer: {
    type: Boolean,
    default: false
  }
});
// 初始化 isTemplate
isTemplate.value = props.isTemplate ? props.isTemplate : route.query.is_template === '1';
// 如果当前的 sn 和 之前记录的sn不相同的时候，那么就要重新请求数据
// if (currentSn.value !== route.query.sn) {

// }

// 上一页
async function previous() {
  if (prevLoading.value || loading.value) {
    return;
  }
  prevLoading.value = true;

  await AnswerApi.surveyPrevious({
    id: route.query.sn,
    data: {
      first_question_index: questions.value?.[0]?.question_index,
      is_test: route.query.is_test || 0,
      is_template: props.isTemplate ? 1 : 0,
      is_preview: !props.isAnswer ? 1 : 0
    }
  });

  prevLoading.value = false;

  page.value -= 1;
  scrollbar.value.scrollTop = 0;
}

// 下一页
async function next(callbackBeforePage) {
  // 先清除所有错误
  questions.value.map((ques) => {
    ques.error = '';
  });
  // 开始校验答案
  startValidate();
  // console.log(`click next button`, prevLoading.value || loading.value);
  // if (prevLoading.value || loading.value) {
  //   return;
  // }
  answer((jumpPage) => {
    // console.log(`jumpPage`, jumpPage);
    if (jumpPage?.question_page) {
      // console.log(`jumpPage?.question_page`, jumpPage?.question_page);
      page.value = jumpPage.question_page;
    } else {
      page.value += 1;
    }
    scrollbar.value.scrollTop = 0;
    // 如果有结束跳转，则判断是否需要立即跳转
    jumpImmediately();
  }, callbackBeforePage);
}

// 开始答题
// 答题
async function answer(callback, callbackBeforePage) {
  if ((questions.value.length || !questionsData.value.questions.length) && !props.isTemplate) {
    // 表单验证(当前页)
    const errors = questions.value.filter((question) => {
      const { config, question_type: questionType, error, answer } = question;
      console.log(question.answer);
      // let answer = question.answer.value ? question.answer.value : question.answer;
      // console.log(answer, questionType, error);
      // 单独 处理 图文
      if (questionType === 6) {
        return;
      }

      let isError = false;
      // 如果问题没有答案还有是必须填空的，就往下处理
      // 2025/4/1新增 ： 如果有 error 内容， 同样视为有错误

      // if (config.is_required === 0) {
      //   if (!answer && !answer?.value) {
      //     return;
      //   }
      // }

      console.log(answer, ' isError = true;');

      if (!answer || error) {
        isError = true;
        // 各个问题单独处理
        if (questionType === 10) {
          // 矩阵多选题
          if (question.config.is_change_row_cell) {
            question.error = translatedText.value.PleaseSelectAtLeastOneOptionsPerColumn(
              config.min_select || 1
            );
          } else {
            question.error = translatedText.value.PleaseSelectAllRows;
          }
        } else if (questionType === 12) {
          // 图片显示题，如果开启了仅显示并且开启了单图显示时长，需要确保用户每一个图片都点开看过了才能下一页
          if (!answer?.read && config.picture_type === 0 && config.countdown_type === 1) {
            isError = true;
            question.error = translatedText.value.PleaseClickToViewAllPictures;
          }
        } else if (questionType === 15) {
          // 分类题
          question.error = translatedText.value.PleaseCategorizeAllOptions;
        } else if (!question.error) {
          console.log(question, 23);
          if (config.is_required === 1) {
            question.error = translatedText.value.ThisIsARequiredQuestion;
          } else {
            isError = false;
          }
        }
      } else if (
        answer &&
        questionType === 1 &&
        Object.keys(answer).findIndex((value) => !answer[value]) !== -1
      ) {
        // 单选题
        isError = true;
        question.error = translatedText.value.PleaseInputAValue;
      } else if (answer && questionType === 2) {
        // 多选题
        // 选项数量
        // isError = true;
        // question.error = translatedText.value.PleaseSelectAtLeastOneOptions(
        //   config.min_select ? config.min_select : 0
        // );
      } else if (answer && questionType === 10) {
        //   矩阵多选题
      } else if (answer && questionType === 12) {
        // 图片显示题
        question.error = '';
      } else if (answer && questionType === 14 && Object.keys(answer).length < config.min_select) {
        // 图片多选题
        isError = true;
        question.error = translatedText.value.PleaseSelectAtLeastOnePictures(config.min_select);
      } else if (answer && questionType === 16) {
        // 排序题
        if (Object.keys(answer).length < (+config.min_select || 0)) {
          // 选项数量
          isError = true;
          question.error = translatedText.value.PleaseSelectAtLeastOneOptions(
            config.min_select ? config.min_select : 0
          );
        }
      } else if (answer && questionType === 17) {
        // 恒定总和题
        let sum = 0;
        Object.keys(answer).forEach((key) => {
          sum += answer[key] * 1;
        });
        if (sum === config.total) {
          question.error = '';
        } else {
          isError = true;
          question.error = translatedText.value.PleaseLetTheSumEqualToTotal(config.total);
        }
      } else if (answer && questionType === 18 && answer.length < config.min_number) {
        // 文件上传题
        isError = true;
        question.error = translatedText.value.PleaseUploadAtLeastOneFiles(config.min_number);
      } else if (answer && questionType === 4) {
        question.error = '';
        if (!answer.value && config.is_required === 0) {
          isError = false;
          return;
        }

        if (answer.value === null) {
          isError = true;
          console.log(123123);
          question.error = translatedText.value.ThisIsARequiredQuestion;
          return;
        }
        // // 矩阵填空题
        switch (config.text_type) {
          // 字母
          case 3:
            if (
              !/^[a-zA-Z·~！@#￥%…&*（）—\-+={}|《》？：“”【】、；‘’，。`!$^()_<>?:",./;'\\[\]]+$/.test(
                answer.value
              )
            ) {
              isError = true;
              question.error = translatedText.value.PleaseEnterEnglishLetters;
            }
            break;
          // 中文
          case 4:
            if (
              !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~！@#￥%…&*（）—\-+={}|《》？：“”【】、；‘’，。`!$^()_<>?:",./;'\\[\]])+$/.test(
                answer.value
              )
            ) {
              isError = true;
              question.error = translatedText.value.PleaseEnterChineseWords;
            }
            break;
          // 邮箱
          case 5:
            if (
              !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                answer.value
              )
            ) {
              isError = true;
              question.error = translatedText.value.PleaseEnterACorrectEmail;
            }
            break;
          // 手机号
          case 6:
            if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(answer.value)) {
              isError = true;
              question.error = translatedText.value.PleaseEnterACorrectPhone;
            }
            break;
          // 身份证号
          case 7:
            if (
              !/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
                answer.value
              )
            ) {
              isError = true;
              question.error = translatedText.value.PleaseEnterACorrectID;
            }
            break;
          default:
            break;
        }
        console.log(answer.value?.length, config.text_type, config.min);
        // if (![5, 6, 7].includes(config.text_type)) {
        if (
          answer.value?.length < config.min &&
          ![1, 2, 5, 6, 7].includes(config.text_type) &&
          config.min
        ) {
          isError = true;
          question.error = translatedText.value.PleaseEnterMoreThanOneCharacters(config.min);
          return;
        }
        if (
          answer.value?.length > config.max &&
          ![1, 2, 5, 6, 7].includes(config.text_type) &&
          config.max
        ) {
          isError = true;
          question.error = translatedText.value.PleaseEnterLessCharacters(config.max);
          return;
        }
        // }
        if (question.error) isError = true;
      } else if (answer && questionType === 8) {
        // 矩阵填空题
        question.error = '';

        if (!answer && config.is_required === 0) {
          isError = false;
          return false;
        }

        Object.keys(answer).forEach((key) => {
          const value = answer[key];

          switch (config.text_type) {
            // 字母
            case 3:
              if (
                !/^[a-zA-Z·~！@#￥%…&*（）—\-+={}|《》？：“”【】、；‘’，。`!$^()_<>?:",./;'\\[\]]+$/.test(
                  value
                )
              ) {
                isError = true;
                question.error = translatedText.value.PleaseEnterEnglishLetters;
              }
              break;
            // 中文
            case 4:
              if (
                !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~！@#￥%…&*（）—\-+={}|《》？：“”【】、；‘’，。`!$^()_<>?:",./;'\\[\]])+$/.test(
                  value
                )
              ) {
                isError = true;
                question.error = translatedText.value.PleaseEnterChineseWords;
              }
              break;
            // 邮箱
            case 5:
              if (
                !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                  value
                )
              ) {
                isError = true;
                question.error = translatedText.value.PleaseEnterACorrectEmail;
              }
              break;
            // 手机号
            case 6:
              if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
                isError = true;
                question.error = translatedText.value.PleaseEnterACorrectPhone;
              }
              break;
            // 身份证号
            case 7:
              if (
                !/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
                  value
                )
              ) {
                isError = true;
                question.error = translatedText.value.PleaseEnterACorrectID;
              }
              break;
            default:
              break;
          }

          if (![5, 6, 7].includes(config.text_type)) {
            if (
              !question.error &&
              value.length < config.min &&
              config.min &&
              ![1, 2].includes(config.text_type)
            ) {
              isError = true;

              question.error = translatedText.value.PleaseEnterMoreThanOneCharacters(config.min);
              return false;
            }
            if (
              !question.error &&
              value.length > config.max &&
              config.max &&
              ![1, 2].includes(config.text_type)
            ) {
              isError = true;
              question.error = translatedText.value.PleaseEnterLessCharacters(config.max);
              return false;
            }
          }
        });
        if (question.error) isError = true;
      } else if (questionType === 27 && question.error) {
        // 多项填空题
        isError = true;
      } else {
        question.error = '';
      }
      return isError;
    });
    if (!errors.length) {
      // 质量控制
      const question = questions.value.find((question) => {
        const { config, answer, question_type: questionType } = question;
        if (questionType === 9 && config.is_repeat) {
          // 矩阵单选
          const arr = Object.keys(answer).map((key) => key.split('_')[1]);
          return hasNConsecutiveNumbers(arr, config.allow_repeat_num + 1);
        } else if (questionType === 10 && config.is_repeat) {
          // 矩阵多选
          let arr = [];
          const obj = {};
          for (const key in answer) {
            const [index, value] = key.split('_');
            if (obj[index] === undefined) {
              obj[index] = arr.length;
              arr.push([value]);
            } else {
              arr[obj[index]].push(value);
            }
          }
          arr = arr.map((subArr) => subArr.sort().join());
          return hasNConsecutiveNumbers(arr, config.allow_repeat_num + 1);
        }
        return false;
      });
      if (question) {
        await new Promise((resolve) => {
          Modal[question.config.repeat_type ? 'confirm' : 'info']({
            class: 'custom-modal custom-modal-title-notice',
            title: translatedText.value.PleaseAnswerCarefully,
            content: question.config.alert_text,
            cancelText: translatedText.value.ContinueAnswer,
            okText: translatedText.value.ReviseAnswer,
            onCancel: () => {
              resolve();
            }
          });
        });
      }
      // 质量控制(选择题)
      const allPages = pages.value.flatMap((currentPages) => currentPages);
      const allQuestions = allPages.map((questionIndex) => {
        return questionsData.value.questions.find(
          (question) => question.question_index === questionIndex
        );
      });
      const repeat = questionsData.value.survey.repeat_list?.find((repeat) =>
        repeat.question_indexes.find(({ first_index: _firstIndex, last_index: _lastIndex }) => {
          const firstIndex = allPages.findIndex((questionIndex) => questionIndex === _firstIndex);
          const lastIndex = allPages.findIndex((questionIndex) => questionIndex === _lastIndex);
          const currentQuestions = allQuestions
            .slice(firstIndex, lastIndex + 1)
            .filter((currentQuestions) => currentQuestions.question_type === repeat.question_type);
          const answerIndexes = currentQuestions.map((question) => question.answerIndex);
          return hasNConsecutiveNumbers(
            answerIndexes,
            repeat.allow_repeat_num + 1,
            (warnStart, warnEnd) => {
              currentQuestions.forEach((question, index) => {
                if (index >= warnStart && index < warnEnd) {
                  if (repeat.repeat_type) {
                    question.warning =
                      translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
                        repeat.allow_repeat_num,
                        repeat.repeat_type
                      );
                  } else {
                    question.error =
                      translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
                        repeat.allow_repeat_num,
                        repeat.repeat_type
                      );
                  }
                } else {
                  question.warning = '';
                  question.error = '';
                }
              });
            },
            () => {
              currentQuestions.forEach((question) => {
                question.warning = '';
              });
            }
          );
        })
      );
      if (repeat) {
        await new Promise((resolve) => {
          Modal[repeat.repeat_type ? 'confirm' : 'info']({
            class: 'custom-modal custom-modal-title-notice',
            title: translatedText.value.PleaseAnswerCarefully,
            content: repeat.alert_text,
            cancelText: translatedText.value.ContinueAnswer,
            okText: translatedText.value.ReviseAnswer,
            onCancel: () => {
              questions.value.forEach((question) => (question.answerIndex = ''));
              resolve();
            }
          });
        });
      }
      // 判断是作答还是预览
      if (!props.isAnswer) {
        loading.value = true;
        try {
          // 模拟接口
          const data = answerMock(questionsData.value, page.value);
          // console.log('模拟作答数据', data);
          // 更新答案
          updateAnswer(data.answer_info_autofill);
          // 更新分页数组
          questionsData.value.answer.pages = data.pages;
          console.log(`preview/index question value`, question);
          // 选项隐藏
          hideOptions(data.hide_options);
          // 更新action
          questionsData.value.action = data.action;
          if ([20004, 20011, 20016].includes(data.action.code)) {
            return (page.value = pages.value.length + 1);
          }
          callback(data.jump_to);
        } catch (error) {
          // console.log(error);
        }
        return (loading.value = false);
      }
      // 表单验证通过，开始答题
      const cycle = [];
      const questionsAnswer = [];
      questions.value.forEach((question) => {
        questionsAnswer.push({
          question_index: question.question_index,
          answer: question.answer || {}
        });
        // 循环
        if (question.question_type === 1 || question.question_type === 2) {
          const optionKeys = [];
          question.list.forEach((list) => {
            list.options.forEach((option) => {
              optionKeys.push(option.option_key);
            });
          });
          cycle.push({
            question_index: question.question_index,
            options: {
              a: optionKeys.join()
            }
          });
        }
      });
      loading.value = true;
      try {
        if (callbackBeforePage) await callbackBeforePage();
        const { data } = await AnswerApi.answer({
          id: route.query.sn,
          data: {
            cycle,
            answer: JSON.stringify(questionsAnswer),
            is_test: route.query.is_test
          }
        });
        // 更新答案
        updateAnswer(data.answer_info_autofill);
        // 更新分页数组
        questionsData.value.answer.pages = data.pages;
        // 京东跳转
        if (data.action.code === 302) {
          location.href = data.action.msg;
        }
        // 更新问卷状态
        if (data.action.code === 20014) {
          const timer = setTimeout(() => {
            const url = data.action.msg;
            toUrl(url);
            clearTimeout(timer);
          });
        }
        // 判断抽奖
        if (data.action.lottery) {
          const endAnswerTime = new Date().getTime();
          const answerTime = endAnswerTime - startAnswerTime;
          router.push({
            path: '/luck',
            query: {
              user_id: route.query.sn,
              id: questionsData.value.answer.sn,
              time_num: parseInt(answerTime / 1000),
              is_test: route.query.is_test || 0
            }
          });
        }
        // 选项隐藏
        hideOptions(data.hide_options);
        // 更新action
        questionsData.value.action = data.action;
        callback(data.jump_to);
        // 写入关联选项缓存
        if (props.isAnswer && questionsData.value.survey.is_breakpoint) {
          if (data.action.code === 20010) {
            const questionsCache = JSON.parse(localStorage.getItem('questionsCache')) || {};
            questionsCache[route.query.sn] = questionsData.value.questions;
            localStorage.setItem('questionsCache', JSON.stringify(questionsCache));
          } else {
            const questionsCache = JSON.parse(localStorage.getItem('questionsCache'));
            if (questionsCache?.[route.query.sn]) {
              delete questionsCache[route.query.sn];
              localStorage.setItem('questionsCache', JSON.stringify(questionsCache));
            }
          }
        }
      } catch (error) {
        // console.log(error);
      }
      loading.value = false;
    } else {
      // console.log(errors);
      const { error, title, question_index: questionIndex } = errors[0];
      const lines = (error || '')
        .split('\n')
        .filter((i) => !!i)
        .map((i) => `${title}：${i}`);
      msg.error(lines.join('\n'));

      // 锚点
      const anchor = document.querySelector(`#questionIndex${questionIndex}`);
      // console.log(anchor, scrollbar.value);
      scrollbar.value.scrollTo(0, anchor.offsetTop - (props.isMobile ? 20 : 40));
    }
  } else {
    callback();
  }
}

// 关联引用
function onRelation(
  // 避免出现参数 undefined 情况
  { options, value, list } = {},
  { question_type: _questionType, question_index: _questionIndex, related, answer } = {}
) {
  // 关联
  related.forEach((relationItem) => {
    let relationOptions = [];
    if (_questionType === 9 || _questionType === 10) {
      // 矩阵选择
      list.forEach((item) => {
        if (item.type === relationItem.cite_type) {
          relationOptions = [...relationOptions, ...item.options];
        }
        if (relationItem.relation_type === 1) {
          relationOptions = relationOptions.filter((option) =>
            _questionType === 9 ? option.value : option.value?.length
          );
        } else if (relationItem.relation_type === 2) {
          relationOptions = relationOptions.filter((option) =>
            _questionType === 9 ? !option.value : !option.value?.length
          );
        }
      });
    } else if (_questionType === 11) {
      // 矩阵打分
      list.forEach((item) => {
        if (item.type === relationItem.cite_type) {
          relationOptions = [...relationOptions, ...item.options];
        }
      });
    } else if (_questionType === 25 || _questionType === 26) {
      // 热区题
      relationOptions = options.filter((option) => {
        if (relationItem.relation_type === 1) {
          return option.status === 1;
        } else if (relationItem.relation_type === 2) {
          return option.status === 2;
        } else if (relationItem.relation_type === 3) {
          return !option.status;
        }
        return true;
      });
    } else if (_questionType === 105) {
      // MXD
      options.forEach((currentOptions) => {
        currentOptions.forEach((option) => {
          const index = relationOptions.findIndex(
            (relationOption) => relationOption.option_key === option.option_key
          );
          if (index === -1) {
            // 全部项
            if (relationItem.relation_type === 0) {
              return relationOptions.push(option);
            }
            // 高相关
            if (relationItem.relation_type === 3) {
              return option.value === 'b' && relationOptions.push(option);
            }
            // 不相关
            if (relationItem.relation_type === 4) {
              return option.value === 'w' && relationOptions.push(option);
            }
          }
        });
      });
    } else if (relationItem.relation_type === 0) {
      // 全部选项
      relationOptions = options;
    } else {
      // 过滤选中/未选中选项
      relationOptions = options.filter((option) => {
        if (_questionType === 1) {
          // 单选
          if (relationItem.relation_type === 1) return value === option.option_key;
          return value !== option.option_key;
        } else if (_questionType === 2) {
          // 多选
          if (relationItem.relation_type === 1) return value.includes(option.option_key);
          return !value.includes(option.option_key);
        }
        return true;
      });
    }
    // 找到关联题
    const question = questionsData.value.questions.find(
      (question) => question.question_index === relationItem.relation_question_index
    );
    // 深拷贝关联选项
    const copyRelationOptions = JSON.parse(JSON.stringify(relationOptions));
    // 更新关联选项key
    copyRelationOptions.forEach((option) => {
      if (option.option_key[0] !== 'Q') {
        let letter = 'A';
        // 矩阵题行、列
        if (_questionType >= 9 && _questionType <= 11) {
          letter = relationItem.cite_type === 1 ? 'R' : 'C';
        }
        option.option_key = `Q${_questionIndex}${letter}${option.option_key}`;
      }
      // 其他项特殊处理
      if (option.is_other && option.value) {
        option.is_other = 0;
        option.option = option.value;
      }
      delete option.value;
      delete option.status;
    });
    // 更新关联题列表
    const relatedList = question.list.find(
      (relatedListItem) => relatedListItem.relation_question_index === _questionIndex
    );
    relatedList.options = answer ? copyRelationOptions : [];
  });
}

function jumpImmediately() {
  const code = questionsData.value.action?.code;
  if (page.value !== pages.value.length + 1 && ![20004, 20011, 20016].includes(code)) {
    return;
  }
  const survey = questionsData.value.survey;
  let countTime = 0;
  let url = '';

  if (code === 20004 && survey.screening_end_url_select && survey.screening_end_url) {
    countTime = survey.screening_standing_time;
    url = survey.screening_end_url;
  }
  if (code === 20011 && survey.success_end_url_select && survey.success_end_url) {
    countTime = survey.success_standing_time;
    url = survey.success_end_url;
  }
  if (code === 20016 && survey.quota_end_url_select && survey.quota_end_url) {
    countTime = survey.quota_standing_time;
    url = survey.quota_end_url;
  }

  // 跳转链接
  if (countTime <= 0 && url) {
    // 防止 AnswerMob AnswerPc 组件里显示最后一页
    questionsData.value.action.code = -1 * code;

    url = url.replaceAll('#sn#', questionsData.value.answer.sn);
    url = url.replaceAll('#user#', questionsData.value.answer.respondent);
    url = url.replaceAll('#survey_sn#', questionsData.value.answer.survey_sn);
    if (route.query.source === 'YILI_APP_WANGYI') {
      Object.keys(route.query).forEach((key) => {
        if (!['sn', 'source', 'is_template', 'channelUCode'].includes(key)) {
          url += `${url.indexOf('?') === -1 ? '?' : '&'}${key}=${route.query[key]}`;
        }
      });
    }
    // 判断是否小程序路径
    if (url[0] === '/') {
      // 判断是否在小程序环境
      wx.miniProgram.getEnv(() => {
        wx.miniProgram.redirectTo({ url });
      });
    } else {
      if (url.indexOf('http://') === -1 && url.indexOf('https://') === -1) {
        url = `http://${url}`;
      }
      open(url, '_self');
    }
  }
}

// 更新答案
function updateAnswer(auto) {
  if (auto) {
    auto.forEach((autoItem) => {
      const question = questionsData.value.questions.find(
        (question) => question.question_index === autoItem.question_index
      );
      question.answer = JSON.parse(autoItem.answer);

      // 隐藏的题目，自动填写时，并被后续题目关联选项，会出现关联选项未正确展示的情况，此暂时解决方法
      const evt1 = {};

      if ([1].includes(question.question_type)) {
        evt1.value =
          Object.keys(question.answer)
            .map((key) => (question.answer[key] ? key : undefined))
            .filter((i) => !!i)?.[0] || undefined;
        evt1.options = question.list.flatMap((i) => i.options);
        onRelation(evt1, question);
      }
    });
  }
}

// 选项隐藏
function hideOptions(hide) {
  const questionIndex = hide?.question_index;
  if (questionIndex) {
    const question = questionsData.value.questions.find(
      (question) => question.question_index === questionIndex
    );
    question.hideOptions = hide.option_key || [];
  }
}

// 要搜索的数组和要查找的连续数字的数量n
function hasNConsecutiveNumbers(arr, n, onTrue, onFalse) {
  let count = 1;
  let warnStart = 0;
  let prevNum = arr[0];
  for (let i = 1; i < arr.length; i++) {
    if (prevNum && arr[i] === prevNum) {
      count += 1;
    } else {
      count = 1;
      warnStart = i;
    }
    if (count === n) {
      if (onTrue) onTrue(warnStart, warnStart + n);
      return true;
    }
    prevNum = arr[i];
  }
  if (onFalse) onFalse();
  return false;
}

// eslint-disable
// 跳转链接
function toUrl(url) {
  // 创建一个新的变量来存储修改后的 URL
  let modifiedUrl = url;

  // 判断是否小程序路径
  if (modifiedUrl[0] === '/') {
    // 判断是否在小程序环境
    wx.miniProgram.getEnv(() => {
      wx.miniProgram.redirectTo({ url: modifiedUrl });
    });
  } else {
    if (modifiedUrl.indexOf('http://') === -1 && modifiedUrl.indexOf('https://') === -1) {
      modifiedUrl = `http://${modifiedUrl}`;
    }
    open(modifiedUrl);
  }
}

/* eslint-enable */

/**
 * 清空 answer 答案
 * @param questions
 */
function clearAnswer(questions) {
  if (!questions) return;
  questions.forEach((question) => {
    if (!question.answer) return;
    delete question.answer;
  });
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/main';

:deep(.van-cell::after) {
  display: none;
}

.preview-icon {
  position: relative;
  flex: 1;
  width: 65px;
  /* 根据实际图片大小调整 */
  height: 50px;
  margin-right: 40px;
  margin-left: 30px;
  padding-top: 30px;

  //width: 40%; /* 根据实际图片大小调整 */
  //height: 85px; /* 根据实际图片大小调整 */
  & .right-icon {
    position: absolute;
    bottom: -70px;
    left: -10px;
    width: 65px;
    /* 根据实际图片大小调整 */
    height: 140px;
    /* 根据实际图片大小调整 */
    background: url('@/assets/img/create-right-back.png') no-repeat center center;
    background-size: cover;

    //transform: translate(-50% -50%);
  }
}

.preview-container {
  overflow: scroll;
  height: 100%;
  max-height: calc(100vh - var(--sticky-top-height) - 65px - 40px);

  //min-height: calc(100vh - 100px);
  //padding: 0px 10px 10px 10px;

  background: linear-gradient(to bottom, #71b73c 200px, #f2f2f2 300px);

  .questions {
    overflow: scroll;
    padding: 10px 10px 10px 10px;
    //margin-bottom: 50px;

    .question {
      overflow: hidden;
      //margin-top: 10px;
      margin-bottom: 10px;
      border: 1px solid #e5e5e5;
      border-radius: 16px;
      background: #fff;
    }
  }
}

.end-text {
  position: fixed;
  bottom: 65px;
  width: 100%;
  font-size: 12px;
  text-align: center;
  color: #a5a5ac;
  background-color: #f2f2f2;
  z-index: 10;

  & .el-text {
    font-size: 12px;
    color: #4b4b59 !important;
  }
}

.preview-info {
  display: flex;
  grid-template-columns: 1fr 80px;
  //max-height: 75px;
  margin-bottom: 10px;
  padding: 0 20px;

  //margin: 0;
  background-color: transparent;

  .van-field {
    // 清除 背景色
    background-color: transparent;
  }

  @mixin preview-info-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
  }

  .preview-info-header {
    margin-top: 5px;
    margin-bottom: 5px;

    //@include preview-info-header;

    color: white;
    font-size: 18px;
    width: 230px;
    //height: 30px;
  }

  .preview-info-header-intro {
    //overflow: scroll;
    width: 210px;
    //height: 45px;
    color: white;
    font-size: 13px;

    //@include preview-info-header;
  }
}
</style>
