<script setup lang="ts">
import SurveyItem from '@/views/Survey/components/SurveyItem.vue';
import LogicInfo from '@/views/Survey/views/Analysis/components/LogicInfo/Index.vue';
import { useRoute } from 'vue-router';
import {
  useFetchAnalysis,
  postAnalysis,
  aiInsightsConfig
} from '@/views/Survey/views/Analysis/hooks/useAnalysis';
import Wait from '@/views/Survey/views/Analysis/components/Wait/Index.vue';
import AnalysisInfo from '@/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue';
import SearchBar from '@/components/Search/Index.vue';
import { fetchSingleSurvey } from '@/hooks/request/useSurvey';
import { onMounted, onUnmounted } from 'vue';

const route = useRoute();

// 从上级传递的 sn 号码
const sn = defineModel<string>('sn');
// 是否禁用搜索
const disableSearch = defineModel<boolean>('disableSearch', { default: false });
const disableInsight = defineModel<boolean>('disableInsight', { default: false });
// sn 的获取方式，默认优先从上级传递的，如果没有尝试从 router 获取
sn.value = sn.value ?? (route.query.sn as string);

const { currentSurvey } = fetchSingleSurvey(sn.value);

// 重置 message 信息
aiInsightsConfig.value.message = '';

const { questionAnalysis } = useFetchAnalysis(sn.value);

onUnmounted(() => {
  // 当组件取消挂载之后， 手动调节 aiInsightsConfig 的状态
  aiInsightsConfig.value.visible = false;
});
</script>

<template>
  <!--  <div class="search">-->
  <!--    <search-bar placeholder="请输入关键词" v-if="!disableSearch" :value="''" />-->
  <!--  </div>-->
  <section v-if="currentSurvey" class="survey-container">
    <!--  问卷详情部分  -->
    <van-cell class="survey-item">
      <template #extra>
        <survey-item
          :is-analysis="disableInsight"
          :disable-action-button="true"
          :survey="currentSurvey as SurveyItem"
          @post-analysis="postAnalysis(sn as string)"
        />
        <!-- 弹窗组件 -->
        <el-dialog
          :show-close="false"
          :close-on-click-modal="false"
          v-model="aiInsightsConfig.visible"
          align-center
          width="70%"
        >
          <wait />
        </el-dialog>
      </template>
    </van-cell>
    <!-- 逻辑配额、随机题组配额、循环体配额 表格部分-->
    <logic-info :sn="sn" />

    <van-cell v-if="aiInsightsConfig.message.length > 0" class="ai-insight">
      <template #extra>
        <div class="ai-insight-content">
          <img width="54px" height="15px" src="@/assets/img/analysis/ai-insight.png" alt="" />
          <!--  ai 洞察部分内容  -->
          <article class="ai-insight-message">
            <div v-html="aiInsightsConfig.message" />
          </article>
        </div>
      </template>
    </van-cell>

    <!--  图表分析部分   -->
    <van-cell class="analysis" v-if="questionAnalysis?.length">
      <template #extra>
        <analysis-info :sn="sn" :questionAnalysis="questionAnalysis" />
      </template>
    </van-cell>
  </section>
</template>

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

.search {
  @extend %search-gradient;
  padding: theme.$gap;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: theme.$nav-header-color;
}

.survey-container {
  padding: theme.$gap;
  // width: 100%;

  .ai-insight {
    background: linear-gradient(to bottom, rgb(239, 249, 252) 0, white 20%);
    background-position: 11% 11%;

    .ai-insight-content {
      margin: 16px 0 0 0;

      img {
        margin-bottom: 8px;
      }
      .ai-insight-message {
        border-radius: 8px;
        padding: 16px;
        background-color: rgba(245, 249, 254, 0.7);
      }
    }
  }

  .survey-item,
  .ai-insight,
  .logic-info,
  .analysis {
    width: 100%;
    border-radius: theme.$card-radius;
    margin-bottom: theme.$gap;
  }
}
</style>
