PPT/src/views/Student/components/choiceQuestionDetailDialog.vue

<template>
  <div class="choiceQuestionDetailDialog">
    <div class="content" :style="{
      width: slideWidth + 'px',
      height: slideHeight + 'px',
    }">
      <span v-show="false" class="closeIcon" @click="closeSlideIndex()">
        <img src="../../../assets/img/close.png" />
      </span>

      <!-- 选择题 -->
      <div class="c_t45" v-if="workDetail && workDetail.type === '45' && props.showData">
        <div class="c_t45_title">
          <div v-if="props.showData.choiceQuestionListData[props.showData.workIndex]">{{
            props.showData.choiceQuestionListData[props.showData.workIndex]
              .teststitle
          }}</div>
          <div class="c_t45_msg">
            <div>{{ lang.ssAnswerCount }} {{ props.showData.workArray.length}}<span v-if="props.showData.unsubmittedStudents.length > 0">/{{ props.showData.unsubmittedStudents.length }}</span></div>
            <span v-if="props.showData.unsubmittedStudents.length > 0" @click="viewUnsubmittedStudents()">{{ lang.ssViewUnsubmittedStudents }}</span>
          </div>
          <!--<span class="c_t45_t_btn" :class="{'c_t45_t_btn_noActive': props.showData.workIndex <= 0}" @click="changeWorkIndex(0)">{{ lang.ssPrevQ }}</span>-->
          <!--<span class="c_t45_t_btn" :class="{'c_t45_t_btn_noActive': props.showData.workIndex >= props.showData.choiceQuestionListData.length - 1}" @click="changeWorkIndex(1)">{{ lang.ssNextQ }}</span>-->
        </div>
        <img class="c_t45_img" :src="props.showData.choiceQuestionListData[props.showData.workIndex]
            .timuList[0].src
          " v-if="props.showData.choiceQuestionListData[props.showData.workIndex] &&
            props.showData.choiceQuestionListData[props.showData.workIndex]
              .timuList.length > 0
          " @click="previewImageToolRef.previewImage(props.showData.choiceQuestionListData[props.showData.workIndex]
            .timuList[0].src)"/>
        <!-- <span class="c_t45_type" v-if="
          props.showData.choiceQuestionListData[props.showData.workIndex]
            .type === '1'
        ">{{ lang.ssSingleSel }}</span>
        <span class="c_t45_type" v-if="
          props.showData.choiceQuestionListData[props.showData.workIndex]
            .type === '2'
        ">{{ lang.ssMultiOpt }}</span> -->
        <!-- <span class="c_t45_type">{{ lang.ssChoiceQuestion }}</span> -->
        <div class="c_t45_echarts" :style="{
          width: slideWidth - 40 + 'px',
        }">
          <div id="echartsArea1" ref="echartsArea1"></div>
        </div>
        <div class="aiAnalysis" v-if="props.workArray.length>0">
          <div class="ai_header">
            <div class="ai_title">
              <svg viewBox="0 0 1024 1024" width="200" height="200"><path d="M512 170.666667C323.477333 170.666667 170.666667 323.477333 170.666667 512s152.810667 341.333333 341.333333 341.333333 341.333333-152.810667 341.333333-341.333333S700.522667 170.666667 512 170.666667zM85.333333 512C85.333333 276.352 276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512z"></path><path d="M693.013333 330.986667a42.666667 42.666667 0 0 1 10.304 43.648l-75.413333 226.282666a42.666667 42.666667 0 0 1-26.986667 26.986667l-226.282666 75.413333a42.666667 42.666667 0 0 1-53.973334-53.973333l75.434667-226.261333a42.666667 42.666667 0 0 1 26.986667-26.986667l226.282666-75.413333a42.666667 42.666667 0 0 1 43.648 10.304z m-222.72 139.306666l-41.685333 125.098667 125.077333-41.706667 41.706667-125.077333-125.077333 41.706667z"></path></svg>{{ lang.ssAnalysis }}
            </div>
            <div class="ai_refresh" :class="{'disabled': currentAnalysis && currentAnalysis.loading}" @click="aiAnalysisRefresh45()">
              {{ lang.ssAIGenerate }}
             <svg viewBox="0 0 1024 1024" width="200" height="200"><path d="M875 483c-33.4 0-60.5 27.1-60.5 60.5v0.1C814.4 710.3 678.8 846 512 846S209.5 710.3 209.5 543.5 345.2 241 512 241c36.8 0 71.7 7.6 104.4 19.7-32 3-57.4 29.1-57.4 61.9 0 34.8 28.2 63 63 63h201.9c34.8 0 63-28.2 63-63V120c0-34.8-28.2-63-63-63s-63 28.2-63 63v81.4C691 150.5 605.2 120 512 120 278.1 120 88.5 309.6 88.5 543.5S278.1 967 512 967s423.5-189.6 423.5-423.5c0-33.4-27.1-60.5-60.5-60.5z"></path></svg>

            </div>
          </div>
          <div class="ai_content" v-if="currentAnalysis">
            {{ currentAnalysis.json }}
          </div>
          <div class="ai_updateTime" v-if="currentAnalysis">{{ lang.ssUpdateTime }}：{{ currentAnalysis.update_at }}</div>
        </div>
        <div class="cq_changeBtn" v-if="props.showData.choiceQuestionListData.length > 1">
          <div :class="{ cq_cb_disabled: props.showData.workIndex <= 0 }" @click="changeWorkIndex(0)">
            <svg style="transform: rotate(-90deg);" viewBox="0 0 1024 1024" version="1.1" width="200" height="200">
              <path
                d="M512 330.666667c14.933333 0 29.866667 4.266667 40.533333 14.933333l277.33333399 234.666667c27.733333 23.466667 29.866667 64 8.53333301 89.6-23.466667 27.733333-64 29.866667-89.6 8.53333299L512 477.866667l-236.8 200.53333299c-27.733333 23.466667-68.266667 19.19999999-89.6-8.53333299-23.466667-27.733333-19.19999999-68.266667 8.53333301-89.6l277.33333399-234.666667c10.666667-10.666667 25.6-14.933333 40.533333-14.933333z"
                fill=""></path>
            </svg>
          </div>
          <span>{{ props.showData.workIndex+1 }}/{{ props.showData.choiceQuestionListData.length }}</span>
          <div :class="{ cq_cb_disabled: props.showData.workIndex >= props.showData.choiceQuestionListData.length - 1 }"
            @click="changeWorkIndex(1)">
            <svg style="transform: rotate(90deg);" viewBox="0 0 1024 1024" version="1.1" width="200" height="200">
              <path
                d="M512 330.666667c14.933333 0 29.866667 4.266667 40.533333 14.933333l277.33333399 234.666667c27.733333 23.466667 29.866667 64 8.53333301 89.6-23.466667 27.733333-64 29.866667-89.6 8.53333299L512 477.866667l-236.8 200.53333299c-27.733333 23.466667-68.266667 19.19999999-89.6-8.53333299-23.466667-27.733333-19.19999999-68.266667 8.53333301-89.6l277.33333399-234.666667c10.666667-10.666667 25.6-14.933333 40.533333-14.933333z"
                fill=""></path>
            </svg>
          </div>
        </div>
      </div>

      <!-- 问答题 -->
      <div class="c_t15" v-if="workDetail && workDetail.type === '15' && props.showData">
        <div class="c_t15_title">{{ workDetail.json.answerQ }}</div>
        <span class="c_t15_type">{{ lang.ssQATest }}</span>
        <div class="c_t15_content" v-show="!lookWorkData">
          <div class="c_t15_c_item" v-for="item in processedWorkArray" :key="item.id" @click="lookWork(item.id)">
            <div class="c_t15_c_i_top">
              <span>S</span>
              <div>{{ item.name }}</div>
            </div>
            <div class="c_t15_c_i_bottom">
              <span v-html="item.content.answer"></span>
            </div>
          </div>
        </div>

       <div class="aiAnalysis" style="margin-top:1rem ;" v-if="processedWorkArray.length>0">
          <div class="ai_header">
            <div class="ai_title">
              <svg viewBox="0 0 1024 1024" width="200" height="200"><path d="M512 170.666667C323.477333 170.666667 170.666667 323.477333 170.666667 512s152.810667 341.333333 341.333333 341.333333 341.333333-152.810667 341.333333-341.333333S700.522667 170.666667 512 170.666667zM85.333333 512C85.333333 276.352 276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512z"></path><path d="M693.013333 330.986667a42.666667 42.666667 0 0 1 10.304 43.648l-75.413333 226.282666a42.666667 42.666667 0 0 1-26.986667 26.986667l-226.282666 75.413333a42.666667 42.666667 0 0 1-53.973334-53.973333l75.434667-226.261333a42.666667 42.666667 0 0 1 26.986667-26.986667l226.282666-75.413333a42.666667 42.666667 0 0 1 43.648 10.304z m-222.72 139.306666l-41.685333 125.098667 125.077333-41.706667 41.706667-125.077333-125.077333 41.706667z"></path></svg>{{ lang.ssAnalysis }}
            </div>
            <div class="ai_refresh" :class="{'disabled': currentAnalysis && currentAnalysis.loading}" @click="aiAnalysisRefresh15()">
              {{ lang.ssAIGenerate }}
             <svg viewBox="0 0 1024 1024" width="200" height="200"><path d="M875 483c-33.4 0-60.5 27.1-60.5 60.5v0.1C814.4 710.3 678.8 846 512 846S209.5 710.3 209.5 543.5 345.2 241 512 241c36.8 0 71.7 7.6 104.4 19.7-32 3-57.4 29.1-57.4 61.9 0 34.8 28.2 63 63 63h201.9c34.8 0 63-28.2 63-63V120c0-34.8-28.2-63-63-63s-63 28.2-63 63v81.4C691 150.5 605.2 120 512 120 278.1 120 88.5 309.6 88.5 543.5S278.1 967 512 967s423.5-189.6 423.5-423.5c0-33.4-27.1-60.5-60.5-60.5z"></path></svg>

            </div>
          </div>
          <div class="ai_content" v-if="currentAnalysis">
            {{ currentAnalysis.json }}
          </div>
          <div class="ai_updateTime" v-if="currentAnalysis">{{ lang.ssUpdateTime }}：{{ currentAnalysis.update_at }}</div>
        </div>


        <div class="c_t15_workDetail" v-if="lookWorkData">
          <div class="c_t15_wd_top">
            <img src="../../../assets/img/arrow_left.png" @click="lookWork('')" />
            <span>S</span>
            <div>{{ lookWorkData.name }}</div>
          </div>
          <div class="c_t15_wd_content">
            <span v-html="lookWorkData.content.answer"></span>
            <div class="c_t15_wd_c_imageList" v-if="lookWorkData.content.fileList.length > 0">
              <img v-for="item in lookWorkData.content.fileList" :src="item.url" :key="item.uploadTime"
                @click="lookImage(item.url)" />
            </div>
          </div>
        </div>
      </div>

      <!-- AI应用 -->
      <div class="c_t72" v-if="props.showData && props.showData.toolType === 72">
        <div class="c_t72_title">{{ lang.ssAiApp }}</div>
        <span class="c_t72_type">{{ lang.ssAiApp }}</span>
        <div class="c_t72_content" v-show="!lookWorkData">
          <div class="c_t72_c_item" v-for="item in processedWorkArray" :key="item.id" @click="lookWork(item.id)">
            <div class="c_t72_c_i_top">
              <span>S</span>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </div>

        <div class="c_t72_workDetail" v-if="lookWorkData">
          <div class="c_t72_wd_top">
            <img src="../../../assets/img/arrow_left.png" @click="lookWork('')" />
            <span>S</span>
            <div>{{ lookWorkData.name }}</div>
          </div>
          <div class="c_t72_wd_content">
            <template v-for="(item, index) in lookWorkData.content" :key="item.id">
              <div class="messageNodeArea" v-if="item.messages || item.imageUrls">
                <div class="messageNode">
                  <div class="mn_title">{{ lang.ssNodeTitle.replace(/\*/g, String(index + 1)) }}</div>
                  <div class="mn_content">
                    <template v-for="(item2, index2) in item.messages" :key="`${index}-${index2}`">
                      <div>
                        <div class="na_m_item" v-if="item2.role == 'user' && item2.content">
                          <div class="na_m_i_name">
                            {{ item2.sender }}
                          </div>
                          <div class="na_m_i_content" v-html="item2.content"></div>
                        </div>
                        <div class="na_m_item" v-if="item2.role == 'assistant' && item2.content">
                          <div class="na_m_i_name aiName">
                            {{ item2.sender }}
                          </div>
                          <div class="na_m_i_content" v-html="item2.content"></div>
                        </div>
                      </div>
                    </template>
                    <template v-if="item.imageUrls" v-for="(item3, index3) in item.imageUrls"
                      :key="`${index}-${index3}`">
                      <div class="na_m_item">
                        <div class="na_m_i_name">
                          {{ item.type }}
                        </div>
                        <div class="na_m_i_content">
                          <img style="height: 100px;width: auto;" :src="item3" />
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>

      <!-- H5页面 -->
      <div class="c_t73" v-if="props.showData && props.showData.toolType === 73">
        <div class="c_t73_title">{{ lang.ssPageImage }}</div>
        <span class="c_t73_type">{{ lang.ssHPage }}</span>
        <div class="c_t73_content" v-show="!lookWorkData">
          <div class="c_t73_c_item" v-for="item in processedWorkArray" :key="item.id" @click="lookWork(item.id)">
            <div class="c_t73_c_i_top">
              <span>S</span>
              <div>{{ item.name }}</div>
            </div>
            <div class="c_t73_c_i_bottom">
              <img :src="item.content" />
            </div>
          </div>
        </div>

        <div class="c_t73_workDetail" v-if="lookWorkData">
          <div class="c_t73_wd_top">
            <img src="../../../assets/img/arrow_left.png" @click="lookWork('')" />
            <span>S</span>
            <div>{{ lookWorkData.name }}</div>
          </div>
          <div class="c_t73_wd_content">
            <img :src="lookWorkData.content" />
          </div>
        </div>
      </div>
    </div>
    <previewImageTool ref="previewImageToolRef" />
    <selectUserDialog ref="selectUserDialogRef" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch, onUnmounted, nextTick, onMounted } from 'vue'
import * as echarts from 'echarts'
import previewImageTool from '../../components/tool/previewImageTool.vue'
import MarkdownIt from 'markdown-it'
import useImport from '@/hooks/useImport'
import { lang } from '@/main'
import selectUserDialog from './selectUserDialog.vue'
import { chat_stream } from '@/tools/aiChat'
import axios from '@/services/config'
const props = defineProps<{
  visible: number[];
  workIndex: number;
  slideWidth: number;
  slideHeight: number;
  slideIndex: number;
  showData: any;
  workArray: any[];
  courseDetail: any;
  userId: string;
}>()

const emit = defineEmits<{
  (e: 'update:visible', v: number[]): void;
  (e: 'changeWorkIndex', v: number): void;
}>()

const visible = computed({
  get: () => props.visible,
  set: (v: number[]) => emit('update:visible', v),
})

const workDetail = computed(() => {
  if (props.showData) {
    return props.showData.workDetail
  }
  return null
})

// 预览图片组件
const previewImageToolRef = ref<any>(null)
// 选择用户组件
const selectUserDialogRef = ref<any>(null)

// ai分析数据
const aiAnalysisData = ref<Array<any>>([])

const md = new MarkdownIt()
const { getFile } = useImport()

// 判断是否是 URL 链接
const isUrl = (str: string): boolean => {
  try {
    const url = new URL(str)
    return (url.protocol === 'http:' || url.protocol === 'https:') && str.includes('json')
  }
  catch {
    return false
  }
}

// 从链接获取文件内容
const loadContentFromUrl = async (url: string): Promise<string> => {
  try {
    const fileData = await getFile(url)
    if (fileData && fileData.data) {
      // 将 ArrayBuffer 转为字符串
      const uint8Array = new Uint8Array(fileData.data)
      const jsonStr = new TextDecoder('utf-8').decode(uint8Array)
      return jsonStr
    }
    return ''
  }
  catch (error) {
    console.error('获取文件内容失败:', error)
    return ''
  }
}

// 处理单个作业内容
const processWorkContent = async (content: string, toolType: number): Promise<any> => {
  let contentToParse = content

  // 如果是链接，先获取文件内容
  if (isUrl(content)) {
    contentToParse = await loadContentFromUrl(content)
  }

  if (!contentToParse) {
    return null
  }

  try {
    if ([45, 15].includes(toolType)) {
      return JSON.parse(decodeURIComponent(contentToParse))
    }
    else if (toolType === 72) {
      const parsed = JSON.parse(contentToParse)
      if (Array.isArray(parsed)) {
        parsed.forEach((item: any) => {
          if (item.messages && item.messages.length) {
            item.messages.forEach((item2: any) => {
              // 如果已经包含html标签则不再渲染
              if (
                !/^(\s*<[^>]+>.*<\/[^>]+>\s*|<[^>]+\/>\s*)$/s.test(
                  item2.content.trim()
                )
              ) {
                item2.content = item2.content.replace(/&lt;/g, '<').replace(/&quot;/g, '"').replace(/&gt;/g, '>')
                item2.content = md.render(item2.content)
              }
            })
          }
        })
      }
      return parsed
    }
    return contentToParse
  }
  catch (error) {
    console.error('解析内容失败:', error)
    return null
  }
}

const processedWorkArray = ref<any[]>([])

// 监听 workArray 和 showData 变化
watch(
  () => [props.workArray, props.showData?.toolType],
  async () => {
    if (props.workArray && props.showData) {
      const _workArray = JSON.parse(JSON.stringify(props.workArray))

      // 处理每个作业内容
      for (const i of _workArray) {
        if (i.content) {
          const processedContent = await processWorkContent(i.content, props.showData.toolType)
          if (processedContent !== null) {
            i.content = processedContent
          }
        }
      }

      processedWorkArray.value = _workArray
    }
    else {
      processedWorkArray.value = []
    }
  },
  { immediate: true, deep: true }
)

// 关闭对应的作业详细页面
const closeSlideIndex = () => {
  visible.value = visible.value.filter((v) => v !== props.slideIndex)
}

// 切换题目
const changeWorkIndex = (type: number) => {
  emit('changeWorkIndex', type)
  // console.log(props.workIndex, props.showData.choiceQuestionListData.length)
  // if (type === 0 && props.workIndex > 0) {
  //   emit('changeWorkIndex', 0)
  // }
  // else if (type === 1 && props.workIndex < props.showData.choiceQuestionListData.length) {
  //   emit('changeWorkIndex', props.workIndex + 1)
  // }
}

// 选择题图表div
const echartsArea1 = ref<any>(null)

// 查看的作业详细id
const lookWorkDetail = ref<string>('')

// 查看作业详细的数据
const lookWorkData = computed(() => {
  let _result = null

  if (lookWorkDetail.value && processedWorkArray.value.length > 0) {
    const _workFind = processedWorkArray.value.find(
      (i: any) => i.id === lookWorkDetail.value
    )

    if (_workFind) {
      _result = _workFind
    }

  }

  return _result
})

// 查看图片
const lookImage = (url: string) => {
  if (previewImageToolRef.value) {
    previewImageToolRef.value.previewImage(url)
  }
}

// 查看作业
const lookWork = (id: string) => {
  lookWorkDetail.value = id
}

// 选择题图表实例
const myChart = ref<any>(null)

// resize防抖定时器
let resizeTimer: ReturnType<typeof setTimeout> | null = null

// 处理ECharts resize
const handleChartResize = () => {
  // 清除之前的定时器
  if (resizeTimer) {
    clearTimeout(resizeTimer)
  }

  resizeTimer = setTimeout(() => {
    nextTick(() => {
      if (
        myChart.value &&
        typeof myChart.value.resize === 'function' &&
        !myChart.value.isDisposed()
      ) {
        try {
          myChart.value.resize()
        }
        catch (e) {
          // console.error('myChart resize error:', e)
          // 如果resize失败，重新初始化图表
          if (
            props.showData &&
            props.showData.workDetail &&
            props.showData.workDetail.type === '45'
          ) {
            setEchartsArea1()
          }
        }
      }
    })
  }, 200) // 防抖延迟200ms
}

// 设置选择题图表
const setEchartsArea1 = () => {
  // 如果已有实例且未销毁，先销毁
  if (myChart.value && !myChart.value.isDisposed()) {
    myChart.value.dispose()
  }

  if (echartsArea1.value) {
    myChart.value = echarts.init(echartsArea1.value)
  }
  else {
    myChart.value = null
  }

  if (myChart.value) {
    const _work =
      props.showData.choiceQuestionListData[props.showData.workIndex]
    console.log('_work', _work)
    // 修正版，处理xAxis.data内为图片对象的case，formatter始终只拿到src或自定义label，保证无[object Object]问题
    const option = {
      tooltip: {
        show: false, // 禁用鼠标移动到柱体时的内容显示
      },
      yAxis: {
        show: false, // 不显示最左边的y轴
      },
      xAxis: {
        data: [],
        axisLabel: {
          color: 'rgba(0, 0, 0, 0.9)',
          fontWeight: 600,
          fontSize: 17,
          lineHeight: 20,
          interval: 0,
          formatter: function(value: any, idx: number) {
            // 如果是字符串且格式为JSON（图片），则解析处理
            if (typeof value === 'string') {
              try {
                const obj = JSON.parse(value)
                if (obj && typeof obj === 'object' && obj.imgType && obj.src) {
                  return '{img' + idx + '|}'
                }
              }
              catch (e) {
                // 非JSON字符串，直接返回
                // 如果文本文字超过8个字，换行
                if (typeof value === 'string') {
                  let displayValue = value
                  if (value.length > 20) {
                    displayValue = value.substr(0, 20) + '...'
                  }
                  // 8个字换行
                  let output = ''
                  for (let i = 0; i < displayValue.length; i += 8) {
                    output += displayValue.substr(i, 8)
                    if (i + 8 < displayValue.length) {
                      output += '\n'
                    }
                  }
                  return output
                }
                return value
              }
              return value
            }
            // 兼容老格式(容错)：value本身是对象，并有图片信息
            if (
              value &&
              typeof value === 'object' &&
              value.imgType &&
              value.src
            ) {
              return '{img' + idx + '|}'
            }
            // 其他类型直接空
            return ''
          },
          rich: (() => {
            // 动态生成所有图片的 rich 格式
            const richObj: any = {}
            _work.choiceUser.forEach((op: any, idx: number) => {
              if (
                op.option &&
                typeof op.option === 'object' &&
                op.option.imgType &&
                op.option.src
              ) {
                richObj['img' + idx] = {
                  height: 40,
                  width: 40,
                  align: 'center',
                  backgroundColor: {
                    image: op.option.src,
                  },
                }
              }
            })
            return richObj
          })(),
        },
      },
      series: [
        {
          name: '',
          type: 'bar',
          data: [],
          barWidth: '50%', // 柱体宽度缩小40%
          itemStyle: {
            color: 'rgba(252, 207, 0, 1)',
          },
          label: {
            show: true,
            position: 'top',
            color: 'rgba(116, 139, 115, 1)',
            fontSize: 22,
            fontWeight: 500,
            lineHeight: 24,
          },
        },
      ],
    }

    _work.choiceUser.forEach((i: any, idx: number) => {
      // 如果是图片，存src对象，否则为字符串
      if (
        i.option &&
        typeof i.option === 'object' &&
        i.option.imgType &&
        i.option.src
      ) {
        (option.xAxis.data as any[]).push(
          JSON.stringify({ imgType: i.option.imgType, src: i.option.src })
        ) // 仅保留相关字段
      }
      else if (typeof i.option === 'string') {
        (option.xAxis.data as any[]).push(i.option)
      }
      else {
        (option.xAxis.data as any[]).push('')
      }
      (option.series[0].data as any[]).push(i.user.length)
    })

    // console.log(option)
    // {
    //   title: {
    //     text: 'ECharts 入门示例'
    //   },
    //   tooltip: {},
    //   xAxis: {
    //     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    //   },
    //   yAxis: {},
    //   series: [
    //     {
    //       name: '销量',
    //       type: 'bar',
    //       data: [5, 20, 36, 10, 10, 20]
    //     }
    //   ]
    // }
    myChart.value.setOption(option)

    myChart.value.off('click')
    myChart.value.on('click', (params: any) => {
      const idx = params.dataIndex
      const selectedOption = _work.choiceUser[idx]
      if (selectedOption && selectUserDialogRef.value) {
        // console.log(selectedOption)
        console.log('selectedOption', selectedOption)
        selectUserDialogRef.value.open(`${lang.ssSelectUser.replace('{a}', '<span>' + selectedOption.index + '</span>')}`, selectedOption)
      }
    })
  }
}

// 获取分析
const getAnalysis = () => {
  if (!props.showData.workDetail.id) {
    return
  }
  const params = {
    pid: props.showData.workDetail.id,
  }
  axios.get('https://pbl.cocorobo.cn/api/pbl/select_pptAnalysisByPid?pid=' + params.pid).then(res => {
    const data = res[0]
    if (data.length) {
      aiAnalysisData.value = data
    }
    else {
      aiAnalysisData.value = []
    }
  }).catch(err => {
    console.log('get_pptAnalysis_err', err)
  })
}

// 监听选择题数据变化
watch(
  () => props.showData,
  (newVal, oldVal) => {
    console.log('发生变化,showData')
    if (
      newVal &&
      newVal.choiceQuestionListData[newVal.workIndex] &&
      props.showData.workDetail.type === '45'
    ) {
      if (
        oldVal &&
        newVal.choiceQuestionListData[newVal.workIndex] &&
        oldVal.choiceQuestionListData[oldVal.workIndex]
      ) {
        if (
          JSON.stringify(newVal.choiceQuestionListData[newVal.workIndex]) !==
          JSON.stringify(oldVal.choiceQuestionListData[oldVal.workIndex])
        ) {
          setEchartsArea1()
        }
      }
    }
    else {
      myChart.value = null
    }
    getAnalysis()
  },
  { immediate: true, deep: true }
)

// 监听作业变化
watch(
  () => props.showData?.choiceQuestionListData,
  (newVal, oldVal) => {
    console.log('choiceQuestionListData变化了')
    if (
      (newVal || newVal === 0) &&
      props.showData.workDetail &&
      props.showData.workDetail.type === '45'
    ) {
      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
        setEchartsArea1()
      }
      else {
        console.log('choiceQuestionListData没有变化')
      }
    }
    else {
      myChart.value = null
    }
  },
  { deep: true }
)

// 监听作业变化
watch(
  () => props.showData?.workIndex,
  (newVal) => {
    if (
      (newVal || newVal === 0) &&
      props.showData.workDetail &&
      props.showData.workDetail.type === '45'
    ) {
      setEchartsArea1()
    }
    else {
      myChart.value = null
    }
  }
)

// 监听echartsArea1变化
watch(
  () => echartsArea1.value,
  (newVal) => {
    if (
      newVal &&
      props.showData &&
      props.showData.workDetail &&
      props.showData.workDetail.type === '45'
    ) {
      setEchartsArea1()
    }
    else {
      myChart.value = null
    }
  }
)

// 监听页面宽度变化
watch(
  () => props.slideWidth,
  (newVal) => {
    if (
      newVal &&
      props.showData &&
      props.showData.workDetail &&
      props.showData.workDetail.type === '45'
    ) {
      handleChartResize()
    }
  }
)

// 查看未提交学生
const viewUnsubmittedStudents = () => {
  selectUserDialogRef.value.open(lang.ssUnsubmittedStudents, {user: props.showData.unsubmittedStudents.map((item: any) => item.name)})
  // if (props.unsubmittedStudents.length > 0) {
  // unsubmittedStudentsDialogRef.value.open(props.unsubmittedStudents)
  // }
}

// ai生成选择题分析 选择题
const aiAnalysisRefresh45 = () => {
  const _work = props.showData.choiceQuestionListData[props.showData.workIndex]
  const msg = `# CONTEXT #
你是K-12阶段的AI教育课堂分析助手，基于上传的课件、逐字稿，以及当页的学生答题数据（选择题/问答题/智能体对话）进行智能分析。

# OBJECTIVE #
输出当前学生答题的分析报告：整体表现、核心发现（共性问题/误区）、教学优化(改进方向)，为教师提供教学策略的建议和支持。

#INPUT#
课程数据：
- 课程名称：${props.courseDetail.title}
- 课程学科：${props.courseDetail.name}
当前页面答题数据(选择题)：【分析重点】
- 选择题题目：${_work.teststitle}
- 选项数据：${JSON.stringify(_work.choiceUser)}
- 题目图片：${_work.timuList.lenght ? _work.timuList[0].src : ''}
- 未提交学生：${JSON.stringify(props.showData.unsubmittedStudents.map((item: any) => item.name))}

# ANALYSIS RULES #
1. **问题定位**：明确指出哪个知识点/概念/步骤掌握不佳
2. **建议具体**：给出可执行的教学动作(如“增加XX实例演练”“补充XX对比图”)

# RESPONSE #
采用段落叙述，数据量化呈现，突出可操作建议，严格控制输出为80词内。采用三段式论述：
1. 整体表现-1句话
2. 核心发现-1-2句，指出共性问题+典型案例
3. 改进建议-1句话，提出具体教学动作

# EXAMPLES #
样例：
选择题正确率62%，核心概念“机器学习三步骤”（输入数据→训练模型→预测结果）掌握尚可，但“训练与预测区分”混淆率达38%；建议强化训练vs预测对比教学。`

  if (!currentAnalysis.value) {
    aiAnalysisData.value.push({
      pid: props.showData.workDetail.id,
      index: props.showData.workIndex,
      loading: true,
      json: '',
      noEnd: true,
      update_at: '',
      create_at: '',
    })
  }
  else {
    aiAnalysisData.value.find((item:any) => {
      return item.pid === props.showData.workDetail.id && item.index === props.showData.workIndex
    }).loading = true
    aiAnalysisData.value.find((item:any) => {
      return item.pid === props.showData.workDetail.id && item.index === props.showData.workIndex
    }).json = ''
  }

  chat_stream(msg, 'a7741704-ba56-40b7-a6b8-62a423ef9376', props.userId, lang.lang, (event) => {
    if (event.type === 'message') { 
      aiAnalysisData.value.find((item:any) => {
        return item.pid === props.showData.workDetail.id && item.index === props.showData.workIndex
      }).json = event.data

      aiAnalysisData.value.find((item:any) => {
        return item.pid === props.showData.workDetail.id && item.index === props.showData.workIndex
      }).loading = false
    }
    else if (event.type === 'messageEnd') {
      aiAnalysisData.value.find((item:any) => {
        return item.pid === props.showData.workDetail.id && item.index === props.showData.workIndex
      }).json = event.data
      aiAnalysisData.value.find((item:any) => {
        return item.pid === props.showData.workDetail.id && item.index === props.showData.workIndex
      }).noEnd = false
      aiAnalysisData.value.find((item:any) => {
        return item.pid === props.showData.workDetail.id && item.index === props.showData.workIndex
      }).update_at = new Date().toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }).replace(/\//g, '-')
      saveAnalysis()
    }
  }).catch(err => {
    console.log('err', err)
  })
}

// 问答题
const aiAnalysisRefresh15 = () => {
  const msg = `# CONTEXT #
你是K-12阶段的AI教育课堂分析助手，基于上传的课件、逐字稿，以及当页的学生答题数据（选择题/问答题/智能体对话）进行智能分析。

# OBJECTIVE #
输出当前学生答题的分析报告：整体表现、核心发现（共性问题/误区）、教学优化(改进方向)，为教师提供教学策略的建议和支持。

#INPUT#
课程数据：
- 课程名称：${props.courseDetail.title}
- 课程学科：${props.courseDetail.name}
当前页面答题数据(问答题)：【分析重点】
- 问答题题目：${props.showData.workDetail.json.answerQ}
- 回答数据：${JSON.stringify(processedWorkArray.value.map((i) => ({user: i.name, answer: i.content.answer})))}
- 未提交学生：${JSON.stringify(props.showData.unsubmittedStudents.map((item: any) => item.name))}

# ANALYSIS RULES #
1. **问题定位**：明确指出哪个知识点/概念/步骤掌握不佳
2. **建议具体**：给出可执行的教学动作(如“增加XX实例演练”“补充XX对比图”)

# RESPONSE #
采用段落叙述，数据量化呈现，突出可操作建议，严格控制输出为80词内。采用三段式论述：
1. 整体表现-1句话
2. 核心发现-1-2句，指出共性问题+典型案例
3. 改进建议-1句话，提出具体教学动作

# EXAMPLES #
样例：
选择题正确率62%，核心概念“机器学习三步骤”（输入数据→训练模型→预测结果）掌握尚可，但“训练与预测区分”混淆率达38%；建议强化训练vs预测对比教学。`
  if (!currentAnalysis.value) {
    aiAnalysisData.value.push({
      pid: props.showData.workDetail.id,
      index: props.showData.workIndex,
      loading: true,
      json: '',
      noEnd: true,
      update_at: '',
      create_at: '',
    })
  }
  else {
    aiAnalysisData.value.find((item:any) => {
      return item.pid === props.showData.workDetail.id && item.index === props.showData.workIndex
    }).loading = true
    aiAnalysisData.value.find((item:any) => {
      return item.pid === props.showData.workDetail.id && item.index === props.showData.workIndex
    }).json = ''
  }

  chat_stream(msg, 'a7741704-ba56-40b7-a6b8-62a423ef9376', props.userId, lang.lang, (event) => {
    if (event.type === 'message') { 
      aiAnalysisData.value.find((item:any) => {
        return item.pid === props.showData.workDetail.id && item.index === props.showData.workIndex
      }).json = event.data

      aiAnalysisData.value.find((item:any) => {
        return item.pid === props.showData.workDetail.id && item.index === props.showData.workIndex
      }).loading = false
    }
    else if (event.type === 'messageEnd') {
      aiAnalysisData.value.find((item:any) => {
        return item.pid === props.showData.workDetail.id && item.index === props.showData.workIndex
      }).json = event.data
      aiAnalysisData.value.find((item:any) => {
        return item.pid === props.showData.workDetail.id && item.index === props.showData.workIndex
      }).noEnd = false
      aiAnalysisData.value.find((item:any) => {
        return item.pid === props.showData.workDetail.id && item.index === props.showData.workIndex
      }).update_at = new Date().toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }).replace(/\//g, '-')
      saveAnalysis()
    }
  }).catch(err => {
    console.log('err', err)
  })
}


// 当前分析
const currentAnalysis = computed(() => {
  return aiAnalysisData.value.find((item:any) => {
    return item.pid === props.showData.workDetail.id && item.index === props.showData.workIndex
  })
})

// 保存分析
const saveAnalysis = () => {
  if (!currentAnalysis.value) {
    return
  }
  const params = [{
    pid: props.showData.workDetail.id,
    idx: props.showData.workIndex,
    json: currentAnalysis.value.json,
  }]

  axios.post('https://pbl.cocorobo.cn/api/pbl/insert_pptAnalysis', params).then(res => {
    if (res == 1) {
      console.log('保存成功')
    }
  }).catch(err => {
    console.log('insert_pptAnalysis_err', err)
  })
}



// watch(()=>props.slideIndex,()=>{
//   getAnalysis()
// })

// onMounted(()=>{
//   getAnalysis()
// })

// 组件卸载时清理ECharts实例
onUnmounted(() => {
  // 清除定时器
  if (resizeTimer) {
    clearTimeout(resizeTimer)
    resizeTimer = null
  }

  // 销毁ECharts实例
  if (myChart.value && !myChart.value.isDisposed()) {
    myChart.value.dispose()
    myChart.value = null
  }
})
</script>

<style lang="scss" scoped>
.choiceQuestionDetailDialog {
  background: none;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;

  .content {
    width: 100%;
    height: 100%;
    position: relative;
    background: #fff;
    box-sizing: border-box;
    padding: 40px;
    overflow: auto;

    .closeIcon {
      position: absolute;
      right: 20px;
      top: 20px;
      cursor: pointer;
      width: 20px;
      height: 20px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .c_t45 {
      width: 100%;
      min-height: 100%;
      display: flex;
      // align-items: center;
      flex-direction: column;
      height: auto;

      .c_t45_title {
        color: rgba(0, 0, 0, 0.9);
        font-weight: 600;
        font-size: 24px;
        line-height: 24px;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        // align-items: center;
        // justify-content: center;
        user-select: none;
        gap: .4rem;

        &>div {
          max-width: calc(100% - 200px);

        }

        &>span {
          position: absolute;
          top: 20px;
          cursor: pointer;

          &:nth-of-type(1) {
            left: 0;
          }

          &:nth-of-type(2) {
            right: 0;
          }
        }

        .c_t45_t_btn_noActive {
          color: #CCCCCC;
        }

        .c_t45_msg{
          display: flex;
          align-items: center;
          font-size: .9rem;
          font-weight: 400;
          gap: 1rem;
          &>span{
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }

      .c_t45_img {
        max-width: 200px;
        max-height: 200px;
        object-fit: cover;
        margin-top: 20px;
      }

      .c_t45_type {
        font-weight: 400;
        font-size: 15px;
        line-height: 21px;
        letter-spacing: 0.5px;
        color: rgba(0, 0, 0, 1);
        opacity: 0.5;
        margin-top: 20px;
      }

      .c_t45_echarts {
        width: 100%;
        max-width: 100%;
        flex: 1;
        min-height: 400px;
        display: flex;
        align-items: center;
        box-sizing: border-box;

        &>div {
          width: 100%;
          height: 400px;
        }
      }

      .cq_changeBtn {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin: 1rem auto;
        &>div {
          padding: .6rem;
          border-radius: .5rem;
          border: solid 2px #F6C82B;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          &>svg {
            fill: #F6C82D;
            width: 1rem;
            height: 1rem;
          }

          &.cq_cb_disabled {
            cursor: not-allowed !important;
            border-color: #FEF8E9 !important;
          }

          &.cq_cb_disabled>svg {
            fill: #A3A3A3 !important;
          }
        }

        &>span {
          font-weight: 500;
        }
      }


    }

    .c_t15 {
      width: 100%;
      min-height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      height: auto;
      padding: 40px;

      .c_t15_title {
        color: rgba(0, 0, 0, 0.9);
        font-weight: 600;
        font-size: 24px;
        line-height: 24px;
      }

      .c_t15_type {
        font-weight: 400;
        font-size: 15px;
        line-height: 21px;
        letter-spacing: 0.5px;
        color: rgba(0, 0, 0, 1);
        opacity: 0.5;
        margin-top: 20px;
      }

      .c_t15_content {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 40px;

        .c_t15_c_item {
          width: 100%;
          height: auto;
          box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.2);
          box-sizing: border-box;
          border-radius: 12px;
          padding: 16px;
          background: rgba(255, 255, 255, 0.6);
          transition: 0.3s;
          cursor: pointer;

          &:hover {
            box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
            background: rgba(255, 255, 255, 0.6);
          }

          .c_t15_c_i_top {
            display: flex;
            align-items: center;
            gap: 10px;

            &>span {
              display: block;
              width: 25px;
              height: 25px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: rgba(252, 207, 0, 1);
              border-radius: 4px;
              color: rgba(255, 255, 255, 1);
              font-weight: bold;
              font-size: 14px;
            }

            &>div {
              color: rgba(0, 0, 0, 0.7);
              font-weight: 800;
            }
          }

          .c_t15_c_i_bottom {
            margin-top: 15px;
            font-weight: 300;
            font-size: 14px;
            height: 40px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }

      .c_t15_workDetail {
        width: 100%;
        height: auto;
        margin-top: 40px;
        box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
        box-sizing: border-box;
        padding: 16px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;

        .c_t15_wd_top {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 15px;

          &>img {
            width: 25px;
            height: 25px;
            cursor: pointer;
          }

          &>span {
            display: block;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(252, 207, 0, 1);
            border-radius: 4px;
            color: rgba(255, 255, 255, 1);
            font-weight: bold;
            font-size: 16px;
          }

          &>div {
            color: rgba(0, 0, 0, 0.7);
            font-weight: 800;
            font-size: 18px;
          }
        }

        .c_t15_wd_content {
          width: 100%;
          margin-top: 20px;
          max-height: 100%;
          overflow: auto;
          flex-wrap: wrap;

          .c_t15_wd_c_imageList {
            width: 100%;
            gap: 20px;
            margin-top: 20px;

            &>img {
              width: 100px;
              height: auto;
              cursor: pointer;
              margin-right: 20px;
              object-fit: cover;
            }
          }
        }
      }
    }

    .c_t72 {
      width: 100%;
      min-height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      height: auto;
      padding: 40px;

      .c_t72_title {
        color: rgba(0, 0, 0, 0.9);
        font-weight: 600;
        font-size: 24px;
        line-height: 24px;
      }

      .c_t72_type {
        font-weight: 400;
        font-size: 15px;
        line-height: 21px;
        letter-spacing: 0.5px;
        color: rgba(0, 0, 0, 1);
        opacity: 0.5;
        margin-top: 20px;
      }

      .c_t72_content {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 40px;

        .c_t72_c_item {
          width: 100%;
          height: auto;
          box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.2);
          box-sizing: border-box;
          border-radius: 12px;
          padding: 16px;
          background: rgba(255, 255, 255, 0.6);
          transition: 0.3s;
          cursor: pointer;

          &:hover {
            box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
            background: rgba(255, 255, 255, 0.6);
          }

          .c_t72_c_i_top {
            display: flex;
            align-items: center;
            gap: 10px;

            &>span {
              display: block;
              width: 25px;
              height: 25px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: rgba(252, 207, 0, 1);
              border-radius: 4px;
              color: rgba(255, 255, 255, 1);
              font-weight: bold;
              font-size: 14px;
            }

            &>div {
              color: rgba(0, 0, 0, 0.7);
              font-weight: 800;
            }
          }

          .c_t72_c_i_bottom {
            margin-top: 15px;
            font-weight: 300;
            font-size: 14px;
            // height: 40px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;

            img {
              width: 100%;
              max-height: 200px;
              object-fit: cover;
            }
          }
        }
      }

      .c_t72_workDetail {
        width: 100%;
        height: auto;
        margin-top: 40px;
        box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
        box-sizing: border-box;
        padding: 16px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;

        .c_t72_wd_top {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 15px;

          &>img {
            width: 25px;
            height: 25px;
            cursor: pointer;
          }

          &>span {
            display: block;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(252, 207, 0, 1);
            border-radius: 4px;
            color: rgba(255, 255, 255, 1);
            font-weight: bold;
            font-size: 16px;
          }

          &>div {
            color: rgba(0, 0, 0, 0.7);
            font-weight: 800;
            font-size: 18px;
          }
        }

        .c_t72_wd_content {
          width: 100%;
          margin-top: 20px;
          max-height: 100%;
          overflow: auto;
          flex-wrap: wrap;
          display: flex;
          align-items: center;
          justify-content: center;

          .na_m_item {
            width: 100%;
            height: auto;
            margin: 10px 0;
          }

          .na_m_i_name {
            width: fit-content;
            max-width: 100%;
            height: auto;
            box-sizing: border-box;
            padding: 10px 10px;
            display: flex;
            align-items: center;
            border-radius: 10px 10px 0 0;
            background-color: #9747ff;
            color: #fff;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .aiName {
            background-color: #0560fc;
          }

          .na_m_i_content {
            padding: 10px;
            border: solid 1px #e7e7e7;
            box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
            border-radius: 0 0 12px 12px;
            background-color: #fff;

            :deep(img) {
              max-width: 100%;
            }
          }

          .messageNode {
            width: 100%;
            height: auto;
            box-sizing: border-box;
            padding: 10px 10px;
            border: 0.5px solid #e7e7e7;
            border-radius: 12px;
            gap: 10px;
            margin-top: 20px;
          }

          .messageNodeArea {
            width: 100%;
            height: auto;
          }
        }
      }
    }

    .c_t73 {
      width: 100%;
      min-height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      height: auto;
      padding: 40px;

      .c_t73_title {
        color: rgba(0, 0, 0, 0.9);
        font-weight: 600;
        font-size: 24px;
        line-height: 24px;
      }

      .c_t73_type {
        font-weight: 400;
        font-size: 15px;
        line-height: 21px;
        letter-spacing: 0.5px;
        color: rgba(0, 0, 0, 1);
        opacity: 0.5;
        margin-top: 20px;
      }

      .c_t73_content {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 40px;

        .c_t73_c_item {
          width: 100%;
          height: auto;
          box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.2);
          box-sizing: border-box;
          border-radius: 12px;
          padding: 16px;
          background: rgba(255, 255, 255, 0.6);
          transition: 0.3s;
          cursor: pointer;

          &:hover {
            box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
            background: rgba(255, 255, 255, 0.6);
          }

          .c_t73_c_i_top {
            display: flex;
            width: 100%;
            align-items: center;
            gap: 10px;

            &>span {
              display: block;
              width: 25px;
              height: 25px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: rgba(252, 207, 0, 1);
              border-radius: 4px;
              color: rgba(255, 255, 255, 1);
              font-weight: bold;
              font-size: 14px;
            }

            &>div {
              color: rgba(0, 0, 0, 0.7);
              font-weight: 800;
            }
          }

          .c_t73_c_i_bottom {
            margin-top: 15px;
            font-weight: 300;
            font-size: 14px;
            // height: 40px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;

            img {
              width: 100%;
              max-height: 200px;
              object-fit: cover;
            }
          }
        }
      }

      .c_t73_workDetail {
        width: 100%;
        height: auto;
        margin-top: 40px;
        box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
        box-sizing: border-box;
        padding: 16px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;

        .c_t73_wd_top {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 15px;

          &>img {
            width: 25px;
            height: 25px;
            cursor: pointer;
          }

          &>span {
            display: block;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(252, 207, 0, 1);
            border-radius: 4px;
            color: rgba(255, 255, 255, 1);
            font-weight: bold;
            font-size: 16px;
          }

          &>div {
            color: rgba(0, 0, 0, 0.7);
            font-weight: 800;
            font-size: 18px;
          }
        }

        .c_t73_wd_content {
          width: 100%;
          margin-top: 20px;
          max-height: 100%;
          overflow: auto;
          flex-wrap: wrap;
          display: flex;
          align-items: center;
          justify-content: center;

          &>img {
            max-width: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
}

      .aiAnalysis{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 1rem;
        border: solid 1px #F6C82B;
        border-left-width: 4px;
        border-radius: 1rem;
        gap: 1rem;
        &>.ai_header{
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 1rem;
          &>div{
            display: flex;
            align-items: center;
            gap: .5rem;
            &>svg{
              width: 1rem;
              height: 1rem;
              
            }
          }
          &>.ai_title{
            color: #F7CD49;
            font-weight: 500;
            &>svg{
              fill: #F7CD49;
              width: 1.2rem;
              height: 1.2rem;
            }
          }
          &>.ai_refresh{
            padding: .5rem 1rem;
            border-radius: .5rem;
            background: #F6C82B;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            color: #000;
            font-weight: bold;
            font-size: .8rem;
            gap: .5rem;
            &>svg{
              fill: #000;
              width: .8rem;
              height: .8rem;
            }
            &.disabled{
              cursor: not-allowed !important;
              background: #FEF8E9 !important;
            }
          }
        }
        &>.ai_content{
          font-size: 1rem;
          font-weight: 500;
        }
        &>.ai_updateTime{
          font-size: .8rem;
           font-weight: 500;
        }
      }
</style>