<template>
  <div style="width: 100%">
    <!-- 优先去上级传递的数值 -->
    <section v-for="(analysis, index) in questionAnalysis" :key="analysis.stem" class="mt10">
      <!-- {{ analysis }} -->
      <!-- 问题标题 -->
      <div class="" style="line-height: 30px">
        <el-tag
          type="success"
          size="small"
          v-if="questionTypeMap.get(analysis.question_type as number)"
        >
          {{ questionTypeMap.get(analysis.question_type as number) }}
        </el-tag>
        <el-text class="ml10"
          >{{ parentIndex ? parentIndex : index + 1 }}. {{ analysis.stem }}</el-text
        >
      </div>

      <!-- 问题图表部分 -->
      <!--       表格td宽度固定  超出部分滚动-->

      <div v-if="questionTypeMap.get(analysis.question_type as number)">
        <chart-msg
          v-if="showChart.includes(analysis.question_type)"
          :dimension="analysis.option && analysis.option[0]?.option"
          :analysis="analysis"
        />

        <!-- 问题表格部分 -->
        <yl-table-h
          class="mt10"
          v-if="getTableData(analysis).length > 0"
          :prop="getTableHeadProps(analysis.head, analysis.option)"
          :data="getTableData(analysis)"
        ></yl-table-h>
        <!--        <yl-table-->
        <!--          v-if="getTableData(analysis).length > 0"-->
        <!--          class="mt10"-->
        <!--          :props="getTableHeadProps(analysis.head, analysis.option)"-->
        <!--          :data="getTableData(analysis)"-->
        <!--        />-->

        <section v-else>
          <empty-container :error-msg="'本题暂无有效答题数据'" :img-src="emptyImg" />
        </section>
      </div>

      <div v-else>
        <div class="empty-text">当前题目结果请至PC端查看，更多题型兼容敬请期待～</div>
      </div>
    </section>
    <!-- <section v-else>
      <empty-container />
    </section> -->
  </div>
</template>

<script setup lang="ts">
// 空白容器
import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
import { questionTypeMap } from '@/utils/question/typeMapping';
import ChartMsg from '@/components/Analysis/Index.vue';
import { getTableData } from './hooks/pieSeries';
import YlTable from '@/components/YlTable/Index.vue';
import YlTableH from '@/components/YlTable/yl-table-h.vue';
import { ref } from 'vue';
import { screenLayout } from '@/hooks/browser/useScreen';
import emptyImg from '@/assets/img/emptyImg.png';
// questionTypeMap  自己去对应
const showChart = ref([1, 2, 5, 106, 9, 10]);

// 接受上级传递的 questionAnalysis 数据
const questionAnalysis = defineModel<any[]>('questionAnalysis');
const parentIndex = defineModel<any>('parentIndex');

const { width } = screenLayout();

// 构建表头
const getTableHeadProps = (values: any[], option: any[]): TablePropsType[] => {
  const head = [];

  if (values && values.length > 0) {
    values.forEach((item: any) => {
      if (item.key !== 'option') {
        head.push({
          label: item.title,
          prop: item.key,
          width: values.length < 4 ? width.value / values.length : 100,
          tooltip: false
        });
      }
    });
  }

  if (option.length > 0 && option[0].option) {
    head.unshift({
      label: '选项',
      prop: 'option',
      width: 150
    });
  }
  return head;
};
</script>
<style scoped lang="scss">
.mt10 {
  margin-top: 10px;
}
.ml10 {
  margin-left: 10px;
}

.empty-text {
  font-size: 11px;
  color: #919191;
  padding: 20px 10px;
  text-align: center;
}
</style>
