pbl-teacher-table/src/components/pages/test/checkAi/aiLeader.vue

<template>
  <div class="ai_body">
    <div class="ai_b_addNewChat" v-if="fileList.length>0">
      <el-tooltip class="item" effect="light" content="新建会话" placement="right">
        <span @click="addNewChat">＋</span>
      </el-tooltip>
    </div>
    <div class="ai_body_dialog" ref="chatDialog">
      <div
        class="dialog_content"
        v-for="(item, index) in array"
        :key="item.uid"
      >
        <div v-if="item.content" style="margin-left: auto;">
          <div class="content content2" v-html="item.content"></div>
          <div class="role">
            <img src="../../../../assets/icon/new/role2.png" />
          </div>
        </div>
        <div
          style="margin-top:20px;margin-bottom:20px ; margin-right: auto;"
          v-if="
            (item.aiContent || item.loading || fileList.length == 0) &&
              item.content !== 0
          "
        >
          <div class="role">
            <img
              :src="
                item.fileid
                  ? item.fileid
                  : require('../../../../assets/icon/new/role1.png')
              "
            />
          </div>
          <div
            element-loading-background="#f6f9ff"
            :style="{
              minHeight: item.loading ? '38px' : 'unset',
              minWidth: item.loading ? '50px' : 'unset'
            }"
            class="content"
          >
            <span class="vditor-reset" v-html="item.aiContent"></span>
            <span class="createTime" v-text="item.createtime"></span>

            <div
              style="width: 100%;margin-top: 10px;box-sizing: border-box;padding-left: 20px;"
              v-if="item.echartList && item.echartList.length > 0"
            >
              <div class="echartBtn" v-for="(item2, index2) in item.echartList"  @click="choseEcharts(item, item2)" :key="index + '-' + index2">
                <img :src="require(`../../../../assets/icon/test/echart${item2.type}_icon.svg`)">
                <span>{{ (index2+1)+'、'+item2.name+'：'+item2.title }}</span>
              </div>
              <!-- <el-button
                v-for="(item2, index2) in item.echartList"
                @click="choseEcharts(item, item2)"
                :key="index + '-' + index2"
                size="mini"
                class="echartBtn"
                >{{ index2+'、'+item2.name+'：'+item.title }}</el-button
              > -->
            </div>

            <div class="eChartView" v-if="item.echartData">
              <eChartTemplate :ref="`eChartViewRef-${index}`" :data="item.echartData" v-if="!item.loading" />
            </div>
            <div class="loadingDiv" v-if="item.loading">
              <span>小可努力生成中，请稍等片刻</span>
              <img :src="loadingImg" class="loadingImg" />
            </div>
          </div>

          <div
            class="ai_btn_box"
            v-if="!pan(item.aiContent).length && !item.loading"
          >
            <!-- <div class="popoverBox" v-if="item.uid.length > 0">
              <div
                class="showBox"
                v-if="showPopoverUid === item.uid"
                v-click-outside="handleBlur"
              >
                <span @click="generateChart(item, 0)">柱状图</span>
                <span @click="generateChart(item, 1)">折线图</span>
                <span @click="generateChart(item, 2)">圆饼图</span>
              </div>
              <div
                class="btnBox"
                @click.stop="
                  showPopoverUid === item.uid
                    ? (showPopoverUid = null)
                    : (showPopoverUid = item.uid)
                "
              >
                <img
                  src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/default%2F%E5%9B%BE%E8%A1%A81735027853698.png"
                />
              </div>
            </div> -->
            <img
              src="../../../../assets/icon/course/pasete.png"
              @click="onCopy(item.aiContent,index)"
            />
            <!-- <img src="../../../../assets/icon/test/test_bianji.png" v-if="index >= 2" @click="edit(index)" /> -->
          </div>
        </div>
        <div
          style="margin-top:20px;margin-bottom:20px ; margin-right: auto;"
          v-if="item.content === 0"
        >
          <div class="role">
            <img
              :src="
                item.fileid
                  ? item.fileid
                  : require('../../../../assets/icon/new/role1.png')
              "
            />
          </div>
          <div
            element-loading-background="#f6f9ff"
            :style="{
              minHeight: item.loading ? '50px' : 'unset',
              minWidth: item.loading ? '50px' : 'unset'
            }"
            class="content"
          >
            <div v-if="getWangLoading" class="loadingDiv">
              <span>小可努力生成中，请稍等片刻</span>
              <img :src="loadingImg" class="loadingImg" />
            </div>
            <div v-else>
              <div class="guess_title">
                <img
                  :src="require('../../../../assets/icon/course/idea.png')"
                />
                <span>猜你想问:</span>
              </div>
              <div
                class="guess_item"
                v-for="item in item.aiContent"
                :key="item.index"
                @click="copyText(item.label)"
              >
                {{ item.label }}
              </div>
              <span class="createTime" v-text="item.createtime"></span>
            </div>
          </div>
        </div>
      </div>
      <!-- 这里添加两个自定义 div -->
      <div
        v-if="fileList.length == 0"
        style="display: flex;
         justify-content: center;"
      >
        <div
          :class="['custom-div', { active: btnactive === 1 }]"
          @click="localTable()"
        >
          <p style="margin: 12px 0px 19px -23px;">从表单中选择</p>
          <span class="custom-icon"></span>
        </div>
        <div
          :class="['custom-div', { active: btnactive === 2 }]"
          @click="triggerFileInput()"
        >
          <p style="margin: 12px 0px 19px -54px;">本地上传</p>
          <span class="custom-icon"></span>
        </div>
        <input
          type="file"
          multiple="multiple"
          ref="fileInput"
          @change="beforeUploadInfo2"
          style="display: none;"
        />
      </div>
      <!-- 查看数据来源 -->
      <el-dialog
        title="教师管理"
        :visible.sync="dialogTableVisible"
        :modal="true"
        append-to-body
        :before-close="handleClose"
        class="dialog_diy"
        custom-class="dialog_diy"
      >
        <div class="dialog_contentArea">
          <div class="student_head">
            <div class="choose">
              <div class="student_search">
                <el-select
                  v-model="typeCheck"
                  placeholder="请选择类型"
                  clearable
                  @change="search"
                >
                  <el-option
                    v-for="(item, index) in typeArray"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </div>
              <div class="student_search" style="width:100px" v-if="stype == 1">
                <el-select v-model="groupA" @change="search">
                  <el-option value="0" label="我的"></el-option>
                  <el-option value="2" label="他人"></el-option>
                  <el-option value="4" label="所有人"></el-option>
                </el-select>
              </div>
            </div>

            <div class="student_right">
              <div class="head_left">
                <div style="margin-right: 10px;position: relative;">
                  <el-input
                    v-model="courseName"
                    class="student_input"
                    placeholder="请输入项目名称"
                  ></el-input>
                  <span class="serach_icon" @click="searchCourse"></span>
                </div>
              </div>
            </div>
          </div>
          <el-table
            ref="table"
            :data="course"
            border
            :key="1"
            :header-cell-style="{
              color: '#00000066',
              fontSize: '16px',
              fontWeight: 'unset'
            }"
            :row-class-name="tableRowClassName2"
            v-if="stype == 1"
            class="tableClass"
            v-loading="isLoading"
          >
            <el-table-column
              type="selection"
              :selectable="selectable"
              width="55"
            ></el-table-column>
            <el-table-column label="序号" width="100px" align="center">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="title"
              label="问卷名称"
              min-width="150"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="uname"
              label="创建者"
              min-width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              v-if="typeArray.length"
              prop="typeN"
              label="问卷类型"
              min-width="80"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.typeN ? scope.row.typeN : "未设置类型" }}
              </template>
            </el-table-column>
            <el-table-column
              prop="worksCount"
              label="已提交数量"
              min-width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column label="表单状态" min-width="80" align="center">
              <template slot-scope="scope">
                <div
                  class="test_type2"
                  style="width: fit-content;margin: 0 auto;"
                  :class="getLookType(scope.row)"
                >
                  <span>{{ getLook(scope.row) }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 遮罩层 -->
          <div v-if="isLoading2" class="mask"></div>
          <div v-if="isLoading2" class="loadingDiv2">
            <span>小可努力生成中，请稍等片刻</span>
            <img :src="loadingImg" class="loadingImg" />
          </div>
        </div>
        <div class="student_bottom">
          <div class="pageCount">
            <span>共{{ course.length }}条</span>
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="pageSize"
              :current-page="page"
              :total="total"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
          <el-button type="primary" @click="confirmSelection">确认</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="ai_body_select" v-if="false">
      <div class="checkBox" v-if="checkBool">
        <div class="task">
          <div class="title">选择需要优化的任务：</div>
          <div class="content">
            <div class="span" @click="addAllTask()">
              <div class="check">
                <img
                  :src="checkImg"
                  alt=""
                  v-if="checkArray.length !== course.length"
                />
                <img :src="checkIsImg" alt="" v-else />
              </div>
              <span>全选</span>
            </div>
            <div
              class="span"
              v-for="(item, index) in course"
              :key="index"
              @click="addTask(index)"
            >
              <div class="check">
                <img
                  :src="checkImg"
                  alt=""
                  v-if="checkArray.indexOf(index) === -1"
                />
                <img :src="checkIsImg" alt="" v-else />
              </div>
              <span>任务{{ index + 1 }}</span>
            </div>
          </div>
        </div>
        <div class="part">
          <div class="title">选择优化的部分：</div>
          <div class="content">
            <div
              class="span"
              v-for="(item, index) in partArray"
              :key="index"
              :class="{ active: part == item.name }"
              @click="checkPart(item.name)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <span
        class="check"
        :class="{ isCheck: checkBool }"
        v-if="!checkArray.length && !part"
        @click="checkBool = !checkBool"
        >选择优化内容</span
      >
      <span
        class="check"
        :class="{ isCheck: checkBool }"
        @click="checkBool = !checkBool"
        v-else
      >
        <el-tooltip :content="taskName" placement="top" effect="dark">
          <!-- content to trigger tooltip here -->
          <span>{{ taskName }}</span>
        </el-tooltip>
      </span>
    </div>
    <div class="ai_body_input">
      <div class="ai_b_i_btnArea">
        <span class="clear" @click.stop="clear()">
          <svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M2.5 3.125C2.5 2.77982 2.77982 2.5 3.125 2.5H16.875C17.2202 2.5 17.5 2.77982 17.5 3.125V8.02715C17.5 8.37233 17.2202 8.65215 16.875 8.65215C16.5298 8.65215 16.25 8.37233 16.25 8.02715V3.75H3.75V16.25H8.125C8.47018 16.25 8.75 16.5298 8.75 16.875C8.75 17.2202 8.47018 17.5 8.125 17.5H3.125C2.77982 17.5 2.5 17.2202 2.5 16.875V3.125Z"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M5.625 6.1521C5.625 5.80692 5.90482 5.5271 6.25 5.5271H13.125C13.4702 5.5271 13.75 5.80692 13.75 6.1521C13.75 6.49728 13.4702 6.7771 13.125 6.7771H6.25C5.90482 6.7771 5.625 6.49728 5.625 6.1521Z"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M5.625 9.2771C5.625 8.93192 5.90482 8.6521 6.25 8.6521H9.37496C9.72014 8.6521 9.99996 8.93192 9.99996 9.2771C9.99996 9.62228 9.72014 9.9021 9.37496 9.9021H6.25C5.90482 9.9021 5.625 9.62228 5.625 9.2771Z"
            />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M12.465 11.507L15.9141 14.9048C16.1279 14.5365 16.25 14.1088 16.25 13.6521C16.25 12.2714 15.1307 11.1521 13.75 11.1521C13.2799 11.1521 12.8406 11.2815 12.465 11.507ZM15.0374 15.7957L11.5873 12.397C11.3726 12.7659 11.25 13.1944 11.25 13.6521C11.25 15.0328 12.3693 16.1521 13.75 16.1521C14.2211 16.1521 14.6613 16.0222 15.0374 15.7957ZM11.0797 11.0192C11.759 10.3303 12.7051 9.9021 13.75 9.9021C15.8211 9.9021 17.5 11.581 17.5 13.6521C17.5 14.6767 17.0882 15.6064 16.4226 16.2827C15.7431 16.9729 14.7961 17.4021 13.75 17.4021C11.6789 17.4021 10 15.7232 10 13.6521C10 12.6263 10.4127 11.6957 11.0797 11.0192Z"
            />
          </svg>
          <span>清屏</span>
        </span>
        <span
          class="clear"
          @click.stop="showjList = !showjList"
          v-if="jArray.length"
        >
          <span>查看</span>
        </span>
        <!-- <div style="margin-left: auto;">
          <el-switch v-model="continuous"></el-switch>
          <span @click.stop="continuous = !continuous">连续对话</span>
        </div> -->
      </div>

      <div
        class="ai_b_i_roleListBox"
        ref="roleListRef"
        v-if="showRoleList && choseRoleList.length > 0"
      >
        <div
          :class="[
            'ai_b_i_rlb_item',
            index == choseRoleItem ? 'ai_b_i_rlb_itemActive' : ''
          ]"
          :ref="`roleItem${index}Ref`"
          v-for="(item, index) in choseRoleList"
          :key="item.id"
          @mouseover="choseRoleItem = index"
          @click.stop="choseRole(item)"
        >
          <div class="ai_b_i_rlb_itemTop">
            <img
              :src="
                item.headUrl
                  ? item.headUrl
                  : require('../../../../assets/icon/new/role1.png')
              "
              alt=""
            />
            <div class="ai_b_i_rlb_i_name">
              <span>{{ item.assistantName }}</span>
              <span>作者：{{ item.username }}</span>
            </div>
          </div>
          <div class="ai_b_i_rlb_itemBottom">
            {{ item.prologue }}
          </div>
        </div>
      </div>
      <!-- <div class="ai_b_i_textListBox">
				<div class="ai_b_i_tlb_left"></div>
				<div class="ai_b_i_tlb_right"></div>
			</div> -->
      <!-- @input="inputChange" -->

      <textarea
        @input="inputChange"
        class="ai_body_input_textarea"
        @keydown="textareaKeydown"
        :disabled="isVoice"
        ref="textareaRef"
        v-model.trim="courseText"
        :placeholder="
          isVoice
            ? isTalk
              ? ''
              : '点击按钮开始录音'
            : '在此输入您想了解的内容'
        "
      ></textarea>

      <span
        class="c_voiceBtn"
        v-if="!courseText && !isVoice"
        @click.stop="changeVoice(true)"
      >
        <svg
          width="22"
          height="22"
          viewBox="0 0 22 22"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M11.4583 14.0308C13.8381 14.0308 15.7551 12.0651 15.7551 9.62496V6.23588C15.7551 3.79574 13.8381 1.83008 11.4583 1.83008C9.07845 1.83008 7.16138 3.79574 7.16138 6.23588V9.62496C7.16138 12.0651 9.07845 14.0308 11.4583 14.0308ZM8.4835 6.23588C8.4835 4.54134 9.80561 3.18571 11.4583 3.18571C13.1109 3.18571 14.433 4.54134 14.433 6.23588V9.62496C14.433 11.3195 13.1109 12.6751 11.4583 12.6751C9.80561 12.6751 8.4835 11.3195 8.4835 9.62496V6.23588ZM18.3333 10.6405C18.3333 10.2677 18.0358 9.96264 17.6722 9.96264C17.3417 9.96264 17.0442 10.2338 17.0111 10.5727C16.5484 13.3178 14.2347 15.3852 11.4583 15.3852C8.68181 15.3852 6.36811 13.3178 5.90537 10.5727C5.87231 10.2338 5.57484 9.96264 5.24431 9.96264C4.88073 9.96264 4.58325 10.2677 4.58325 10.6405V10.7421C5.1121 13.9279 7.65717 16.4019 10.7972 16.7069V19.635H7.93254C7.54315 19.635 7.22748 19.9587 7.22748 20.358C7.22748 20.7572 7.54315 21.0809 7.93254 21.0809H14.9832C15.3726 21.0809 15.6883 20.7572 15.6883 20.358C15.6883 19.9587 15.3726 19.635 14.9832 19.635H12.1193V16.7069C15.2593 16.4019 17.8044 13.9279 18.3002 10.776C18.3002 10.7591 18.3085 10.7337 18.3167 10.7082L18.3167 10.7082L18.3167 10.7082C18.325 10.6828 18.3333 10.6574 18.3333 10.6405Z"
            fill="black"
            fill-opacity="0.9"
          />
        </svg>
      </span>

      <span
        class="c_voiceBtn"
        style="right: 70px;"
        v-if="!courseText && isVoice && !isTalk"
        @click.stop="changeVoice(false)"
      >
        <svg
          width="22"
          height="22"
          viewBox="0 0 22 22"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M2.75 3.4375C2.75 3.0578 3.0578 2.75 3.4375 2.75H18.5625C18.9422 2.75 19.25 3.0578 19.25 3.4375V18.5625C19.25 18.9422 18.9422 19.25 18.5625 19.25H3.4375C3.0578 19.25 2.75 18.9422 2.75 18.5625V3.4375ZM4.125 4.125V17.875H17.875V4.125H4.125Z"
            fill="black"
            fill-opacity="0.9"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M6.875 6.875C6.875 6.4953 7.1828 6.1875 7.5625 6.1875H14.4375C14.8172 6.1875 15.125 6.4953 15.125 6.875V8.25C15.125 8.6297 14.8172 8.9375 14.4375 8.9375C14.0578 8.9375 13.75 8.6297 13.75 8.25V7.5625H11.6875V14.4375H12.375C12.7547 14.4375 13.0625 14.7453 13.0625 15.125C13.0625 15.5047 12.7547 15.8125 12.375 15.8125H9.625C9.2453 15.8125 8.9375 15.5047 8.9375 15.125C8.9375 14.7453 9.2453 14.4375 9.625 14.4375H10.3125V7.5625H8.25V8.25C8.25 8.6297 7.9422 8.9375 7.5625 8.9375C7.1828 8.9375 6.875 8.6297 6.875 8.25V6.875Z"
            fill="black"
            fill-opacity="0.9"
          />
        </svg>
      </span>

      <div
        :class="[
          'c_pub_button_confirm',
          courseText ? '' : 'c_pub_button_confirmDisabled'
        ]"
        v-if="!curRequestController && !isVoice"
        @click="addContent"
      >
        发送
      </div>

      <div
        :class="['c_pub_button_confirmVoice']"
        v-if="!faloading && isVoice && !isTalk"
        @click="startVoice"
      >
        <svg
          width="22"
          height="22"
          viewBox="0 0 22 22"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M11.4583 14.0308C13.8381 14.0308 15.7551 12.0651 15.7551 9.62496V6.23588C15.7551 3.79574 13.8381 1.83008 11.4583 1.83008C9.07845 1.83008 7.16138 3.79574 7.16138 6.23588V9.62496C7.16138 12.0651 9.07845 14.0308 11.4583 14.0308ZM8.4835 6.23588C8.4835 4.54134 9.80561 3.18571 11.4583 3.18571C13.1109 3.18571 14.433 4.54134 14.433 6.23588V9.62496C14.433 11.3195 13.1109 12.6751 11.4583 12.6751C9.80561 12.6751 8.4835 11.3195 8.4835 9.62496V6.23588ZM18.3333 10.6405C18.3333 10.2677 18.0358 9.96264 17.6722 9.96264C17.3417 9.96264 17.0442 10.2338 17.0111 10.5727C16.5484 13.3178 14.2347 15.3852 11.4583 15.3852C8.68181 15.3852 6.36811 13.3178 5.90537 10.5727C5.87231 10.2338 5.57484 9.96264 5.24431 9.96264C4.88073 9.96264 4.58325 10.2677 4.58325 10.6405V10.7421C5.1121 13.9279 7.65717 16.4019 10.7972 16.7069V19.635H7.93254C7.54315 19.635 7.22748 19.9587 7.22748 20.358C7.22748 20.7572 7.54315 21.0809 7.93254 21.0809H14.9832C15.3726 21.0809 15.6883 20.7572 15.6883 20.358C15.6883 19.9587 15.3726 19.635 14.9832 19.635H12.1193V16.7069C15.2593 16.4019 17.8044 13.9279 18.3002 10.776C18.3002 10.7591 18.3085 10.7337 18.3167 10.7082L18.3167 10.7082L18.3167 10.7082C18.325 10.6828 18.3333 10.6574 18.3333 10.6405Z"
            fill-opacity="0.9"
          />
        </svg>
      </div>

      <div
        :class="['c_pub_button_StopConfirmVoice']"
        v-if="!faloading && isVoice && isTalk"
        @click="stopVoice"
      >
        <svg
          width="22"
          height="22"
          viewBox="0 0 22 22"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M11 19.25C6.4625 19.25 2.75 15.5375 2.75 11C2.75 6.4625 6.4625 2.75 11 2.75C15.5375 2.75 19.25 6.4625 19.25 11C19.25 15.5375 15.5375 19.25 11 19.25ZM11 17.1875C14.4031 17.1875 17.1875 14.4031 17.1875 11C17.1875 7.59687 14.4031 4.8125 11 4.8125C7.59687 4.8125 4.8125 7.59687 4.8125 11C4.8125 14.4031 7.59687 17.1875 11 17.1875Z"
            fill="#EE3E3E"
          />
          <path
            d="M12.75 8.25H9.25C8.69772 8.25 8.25 8.69772 8.25 9.25V12.75C8.25 13.3023 8.69772 13.75 9.25 13.75H12.75C13.3023 13.75 13.75 13.3023 13.75 12.75V9.25C13.75 8.69772 13.3023 8.25 12.75 8.25Z"
            fill="#EE3E3E"
          />
        </svg>
      </div>

      <div v-if="!faloading && isVoice"></div>
      <div
        class="c_pub_button_confirm"
        v-if="curRequestController"
        @click="stopCurRequestController"
      >
        终止
      </div>
    </div>
    <iframe
      allow="camera *; microphone *;display-capture;midi;encrypted-media;"
      src="https://beta.cloud.cocorobo.cn/browser/public/index.html"
      ref="iiframe"
      v-show="false"
    ></iframe>
    <!-- <div class="ai_body_input">
      <textarea
        style="padding-right: 85px;"
        rows="3"
        @keyup.enter="addContent"
        class="binfo_input binfo_textarea"
        cols
        v-model.trim="courseText"
        placeholder="在此输入您想了解的内容"
      ></textarea>
      <div
        class="c_pub_button_confirm"
        v-if="!loading && courseText"
        @click="addContent"
      >
        发送
      </div>
      <div class="c_pub_button_confirm" @click="promptTit" v-else>发送</div>
    </div> -->
  </div>
</template>

<script>
import checkImg from "../../../../assets/icon/sourceFile/check.png";
import checkIsImg from "../../../../assets/icon/sourceFile/check_is.png";
import { v4 as uuidv4 } from "uuid";
import MarkdownIt from "markdown-it";
import TurndownService from "turndown";
import eChartTemplate from "./eChartTemplate.vue";
const OpenCC = require("opencc-js");
let converter = OpenCC.Converter({
  from: "cn",
  to: "hk"
});
import { fetchEventSource } from "@microsoft/fetch-event-source";
const clickOutside = {
  bind(el, binding) {
    // 在元素上绑定一个点击事件监听器
    el.clickOutsideEvent = function(event) {
      // 检查点击事件是否发生在元素的内部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
        binding.value(event);
      }
    };
    // 在文档上添加点击事件监听器
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unbind(el) {
    // 在元素上解除点击事件监听器
    document.removeEventListener("click", el.clickOutsideEvent);
  }
};
export default {
  components: {
    eChartTemplate
  },
  props: {
    courseId: {
      type: String,
      default: ""
    },
    formList: {
      type: Array
    }
  },
  directives: {
    "click-outside": clickOutside // 注册自定义指令
  },
  data() {
    return {
      stype: 1,
      typeArray: [],
      array: [],
      jArray: [],
      course: [],
      loadingImg: require("../../../../assets/KekeLoading.gif"),
      courseText: "",
      checkImg: checkImg,
      checkIsImg: checkIsImg,
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      role: this.$route.query.role,
      isLoading: false,
      isLoading2: false,
      checkArray: [],
      partArray: [
        { name: "全部内容" },
        { name: "任务设计" },
        { name: "评价设计" }
      ],
      part: "全部内容",
      checkBool: false,
      loading: false,
      pageSize: 10,
      page: 1,
      total: 0,
      selectedForms: [],
      textareaHeight: 50,
      publicRoleList: [],
      roleList: [],
      page2: 1,
      textList: [
        {
          title: "项目式学习",
          dataList: [
            "请给我一些学生开展项目式学习可以使用的主题或问题参考，请说出学生将要解决的问题，以及学生要经历怎样的学习活动。",
            "请将一个关于生态保护项目的项目式学习展开描述，你需要描述学生如何解决这个问题，你需要至少写出四个活动，这些活动需要按照前后逻辑关系排列。",
            "请对驱动问题为“如何为学校建造一个富有特色的花坛？”的项目式学习进行子问题拆解，至少拆解为5个子问题，并根据子问题对应写出各环节的主要活动。"
          ]
        },
        {
          title: "教学评价",
          dataList: [
            "如果需要给学生的社区服务进行评价，给出评价维度和至少3个等级的表现描述。",
            "为6年级学生设计一份关于梧桐山研究报告的评估任务表，并给出参考的报告流程，至少包含8个步骤，并包括地图、图片和至少300个词。",
            "创建一个给5年级学生使用的课堂小测试，包含5道多选题，评价学生对于太阳能这个概念的理解。你需要给出题目和正确答案。"
          ]
        },
        {
          title: "教学设计",
          dataList: [
            "如果需要5年级学生感受“移步换景”的景观写作手法，你有什么合适的阅读材料推荐？你需要给出材料名称，以及材料的哪部分内容。",
            "设计一个针对8年级学生且关于人类迁徙主题的地理课，并在课程中设计至少1项小组活动。",
            "设计一个针对5年级学生的课程，课程综合科学和信息技术领域，解决生物与环境领域的生活问题，你需要给出完整的课程框架和活动。",
            "如果3年级的学生不能理解光合作用的实现过程，需要你帮我设计一个支持他们理解的教学活动，需要包含活动的形式、实施材料和清单。",
            "请基于贝叶斯定理为8年级学生出三道题目。",
            "如果需要八年级学生了解尼罗河流域的文化发展史，你有哪些推荐的网站或参考书籍？"
          ]
        },
        {
          title: "班级管理",
          dataList: [
            "创建一组给一年级学生使用的班级口号，要求大家注意卫生、保护环境，口号需要对仗工整，符合一年级学生的理解水平。",
            " 设计一套用于6年级学生的班级管理规章制度，内容需要包括学习、纪律、卫生、思想品德方面。"
          ]
        },
        {
          title: "课堂组织",
          dataList: [
            "请为“制作垃圾分类宣传单”的小组活动设计小组分工表，每个小组的成员为4-6人。",
            "请给5年级“校园植物图鉴”社团课程设计一份小组合作公约，需包含小组成员信息、小组项目目标、填写日期，总长度不超过300字，并且提供至少3处学生自行填写的部分。",
            "请用苏格拉底提问的方式，引导5年级学生拆解驱动问题：如何解决教室黑板反光的问题？其中需包含对于反光原因的分析与实验探究。"
          ]
        },
        {
          title: "教师发展",
          dataList: [
            "教师需要理解项目式学习的理论基础和基础概念，你需要生成一份阅读清单，要求内容为中文书籍或文献。",
            "设计一个教师进行个人学期总结的框架，需要体现在教学、教研、个人学习方面的进步。"
          ]
        },
        {
          title: "代码分析",
          dataList: [
            "这段代码实现了什么效果？",
            "请描述这段代码。",
            "根据这段代码，给我一些修改意见。"
          ]
        }
      ],
      showTextList: false,
      showRoleList: false,
      choseRoleItem: 0,
      choseTextItem: 0,
      continuous: true,
      showjList: false,
      faloading: false,
      fasource: null,
      // aiText: "",
      saveUid: "",
      isVoice: false,
      isTalk: false,
      languageSetting: 0,
      username: "",
      options2: {
        1: "选择题",
        // 2: "问答题",
        3: "问答题",
        4: "添加文档",
        5: "附件",
        6: "课程",
        7: "评分",
        8: "日期",
        9: "单选题",
        10: "多选题",
        11: "课程"
      },
      answerArray: [],
      fileList: [],
      chatList: [],
      fileId: [],
      btnactive: null,
      dialogTableVisible: false,
      typeCheck: "",
      groupA: "0",
      courseName: "",
      cid: "",
      formId: "",
      courseInfoList: [],
      worksArray: [],
      copyWorksArray: null,
      stopTalkToken: false,
      getWangLoading: false,
      wangData: [],
      canUseWangData: true,
      hasGeneratedGuess: false,
      showPopoverUid: null,
      curRequestController:null,
    };
  },
  watch: {
    // worksArray: {
    //   immediate: false,
    //   deep: true,
    //   handler(newValue, oldValue) {
    //     if (
    //       newValue.length &&
    //       JSON.stringify(newValue) !== this.copyWorksArray
    //     ) {
    //       this.$emit("clearFileData");
    //       this.fileId = [];
    //       this.fileList = [];
    //       this.copyWorksArray = JSON.stringify(newValue);
    //       newValue.forEach(el => {
    //         // console.log("👉el",el)
    //         this.setJson(el);
    //       });
    //       // console.log("👈👉",newValue)
    //       // this.setJson(newValue)
    //     }
    //   }
    // }
  },
  methods: {
    delFileList(index) {
      this.fileList.splice(index, 1);
    },
    handleCurrentChange(newPage) {
      this.page = newPage;
      this.getCourse();
    },
    selectable(row, index) {
      return row.worksCount > 0;
    },
    async confirmSelection() {
      // 获取用户选择的表单
      const selectedForms = this.$refs.table.selection; // 获取选中的行
      console.log("用户选择的表单:", selectedForms); // 打印用户选择的表单

      // this.cid = selectedForms.reduce((lastArr, item) => {
      //   lastArr.push(item.courseId);
      //   return lastArr
      // }, []).join(',');
      this.cid = selectedForms.map(i => i.courseId).join(",");
      const names = selectedForms.map(item => item.title).join(",");
      console.log(names);
      this.formId = selectedForms.map(i => i.courseId).join(",");
      console.log("cid", this.cid);
      let _fileValue = await this.getData(this.cid);
      this.isLoading = true;
      this.isLoading2 = true;

      await this.getChatList(this.cid);
      this.$nextTick(() => {
        this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
      });
      this.guessAskJson(_fileValue);
      this.addChat(names);
      setTimeout(() => {
        this.dialogTableVisible = false;
        this.isLoading = false;
        this.isLoading2 = false;
      }, 500);

      // this.getChatList()
    },
    handleClose(done) {
      done();
    },
    triggerFileInput() {
      this.btnactive = 2;
      this.guessAskJson();
      this.$refs.fileInput.click();
    },
    // 处理文件选择
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        // 这里可以添加文件处理逻辑，例如上传文件
        console.log("选择的文件:", file.name);
      }
    },
    async addChat(names) {
      return new Promise(async(resolve)=>{
        let _uid = uuidv4();
      let cid = `${_uid}-testSmarter`; // 生成的 cid
      this.cid = cid;
      let params = [
        {
          uid: this.userid,
          name: names,
          cid: cid,
          j: this.localFormList
        }
      ];

      try {
        const res = await this.ajax.post(
          this.$store.state.api + "addChat",
          params
        );
        resolve()
      } catch (err) {
        console.error(err);
      }
      })
    },
    async guessAskJson(fileData) {
      console.log("👉👉👈", fileData);
      const names = this.worksArray.map(item => item.name).join(", ");
      console.log("获取猜你想搜", names);
      let _uid = uuidv4();
      this.getWangLoading = true;
      this.canUseWangData = false;
      this.wangData = "";
      let fileText = ``;
      fileData.forEach(i => {
        fileText += `表单名称：${i.filename}
表单内容：
${i.content}

`;
      });
      let _msg = `Language: ${this.getLang()} ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example". Instruction: Based on the context, follow "Format example", write content
## 任务 你的任务是根据“表单信息”，提供用户需要的搜索建议，将搜索建议的结果以有序列表的形式返回给用户。
## 规则 输出结果基于“表单信息”，避免提供无关的信息。 搜索建议的结果符合伦理规范。
## 输出 输出应包括6个相关的搜索建议，每个搜索建议需要以问号的方式结束。 请一步步思考如何根据现有信息推送搜索建议，但是不需要输出搜索建议以外的内容。
## 输出格式 搜索建议应以有序列表形式呈现，每个建议包括关键词和简短描述。输出JSON格式的内容,不要有多余的内容。
## 表单信息
${fileText}
## Format example
[{"index": 1,"title": "垃圾分类标准","label": "不同国家的垃圾分类标准和方法？"},{"index": 2,"title":"可回收垃圾处理","label": "可回收垃圾的处理流程和再利用方法？"},{  "index": 3,  "title": "有害垃圾的影响",  "label": "有害垃圾对环境和人体健康的潜在影响？"},{  "index": 4,  "title": "垃圾分类标准",  "label": "不同国家的垃圾分类标准和方法？"},{  "index": 5,  "title": "可回收垃圾处理",  "label": "可回收垃圾的处理流程和再利用方法？"},{  "index": 6,  "title": "有害垃圾的影响",  "label": "有害垃圾对环境和人体健康的潜在影响？"}]`;

      console.log(_msg);
      let params = {
        assistant_id: "6063369f-289a-11ef-8bf4-12e77c4cb76b",
        userId: this.userid,
        message: _msg,
        session_name: `${this.formId}-testSmarter`,
        // uid: _uuid,
        file_ids: this.fileId,
        model: "gpt-4o-2024-08-06"
      };
      this.array.push({
        loading: false,
        role: "user",
        content: 0,
        uid: _uid,
        AI: "AI",
        aiContent: "",
        oldContent: "",
        isShowSynchronization: false,
        filename: "",
        index: this.array.length,
        is_mind_map: false,
        fileid: "",
        createtime: new Date().toLocaleString().replaceAll("/", "-")
      });
      console.log(this.array);
      this.ajax
        // .post("https://gpt4.cocorobo.cn/chat", params)
        // .post("https://claude3.cocorobo.cn/chat", params)
        .post("https://gpt4.cocorobo.cn/ai_agent_park_chat", params)
        .then(res => {
          // console.log(res);
          let _data = res.data.FunctionResponse.message;
          _data = _data.replaceAll("```json", "").replaceAll("```", "");
          const match = _data.match(/\[\s*{[^]*}\s*\]/);
          // console.log("this.wangData",this.wangData);
          // console.log("match",match);
          this.wangData = JSON.parse(match[0]);
          this.canUseWangData = true;
          this.getWangLoading = false;
          console.log("wangData", this.wangData);
          this.array.find(i => i.uid == _uid).aiContent = JSON.parse(match[0]);
        })
        .catch(e => {
          this.chatLoading = false;
          this.canUseWangData = false;
          this.getWangLoading = false;
          console.log(e);
        });
      // this.getWAntSearchContent(_uuid);
    },
    beforeUploadInfo2(event, type, tindex) {
      // const loading = this.openLoading();
      let file = "";
      let fileNames = [];
      let cfindex2 = 0;

      for (var cfindex = 0; cfindex < event.target.files.length; cfindex++) {
        // var file = event.target.files[0];
        file = event.target.files[cfindex];
        let fileName = file.name;
        let fileUid = file.uid;

        fileNames.push(fileName);

        var credentials = {
          accessKeyId: "AKIATLPEDU37QV5CHLMH",
          secretAccessKey: "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"
        }; //秘钥形式的登录上传
        window.AWS.config.update(credentials);
        window.AWS.config.region = "cn-northwest-1"; //设置区域

        var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
        var _this = this;
        var xianObj = ["CSV"];

        if (
          xianObj.indexOf(
            file.name
              .split(".")
              [file.name.split(".").length - 1].toLocaleUpperCase()
          ) == -1
        ) {
          this.$message.error("请上传.csv文件！");
          this.inputShow = true;
          // var a = _this.$refs.upload1.uploadFiles;
          // a.splice(a.length - 1, a.length);
          // loading.close();
          return;
        }

        _this.$forceUpdate();
        if (file) {
          var params = {
            Key:
              file.name.split(".")[0] +
              new Date().getTime() +
              "." +
              file.name.split(".")[file.name.split(".").length - 1],
            ContentType: file.type,
            Body: file,
            "Access-Control-Allow-Credentials": "*",
            ACL: "public-read"
          }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
          var options = {
            partSize: 2048 * 1024 * 1024,
            queueSize: 2,
            leavePartsOnError: true
          };
          bucket
            .upload(params, options)
            .on("httpUploadProgress", function(evt) {
              //这里可以写进度条
              // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');

              // if(type == 14){
              //   _this.teacherinfoprogress = parseInt((evt.loaded / evt.total) * 100);
              //   _this.teacherinfoisFinishSize = (evt.loaded / 1024 / 1024).toFixed(2);
              // }else if(type == 16){
              //   _this.mubiaoinfoprogress = parseInt((evt.loaded / evt.total) * 100);
              //   _this.mubiaoinfoisFinishSize = (evt.loaded / 1024 / 1024).toFixed(2);
              // }else if(type == 17){
              //   _this.xuanzeinfoprogress = parseInt((evt.loaded / evt.total) * 100);
              //   _this.xuanzeinfoisFinishSize = (evt.loaded / 1024 / 1024).toFixed(2);
              // }else if(type == 18){
              //   _this.pingjiainfoprogress[tindex] = parseInt((evt.loaded / evt.total) * 100);
              //   _this.pingjiainfoisFinishSize[tindex] = (evt.loaded / 1024 / 1024).toFixed(2);
              // }else {
              //   _this.infoprogress = parseInt((evt.loaded / evt.total) * 100);
              //   _this.infoisFinishSize = (evt.loaded / 1024 / 1024).toFixed(2);
              // }
              _this.$forceUpdate();
            })
            .send(async function(err, data) {
              // loading.close();

              // if(type == 14){
              //   _this.teacherinfoprogress = 100;
              //   _this.teacherinfoisFinishSize = _this.teacherinfoisAllSize;
              // }else if(type == 16){
              //   _this.mubiaoinfoprogress = 100;
              //   _this.mubiaoinfoisFinishSize = _this.mubiaoinfoisAllSize;
              // }else if(type == 17){
              //   _this.xuanzeinfoprogress = 100;
              //   _this.xuanzeinfoisFinishSize = _this.xuanzeinfoisAllSize;
              // }else if(type == 18){
              //   _this.pingjiainfoprogress[tindex] = 100;
              //   _this.pingjiainfoisFinishSize[tindex] = _this.pingjiainfoisAllSize[tindex];
              // }else {
              //   _this.infoprogress = 100;
              //   _this.infoisFinishSize = _this.infoisAllSize;
              // }

              _this.$forceUpdate();
              _this.inputShow = true;

              if (err) {
                console.error("上传失败:", err);
              } else {
                console.log("上传成功:", data);
                _this.fileList.push(data.Location);

                _this.$emit("pushFileData", {
                  fileId: "",
                  name: fileName,
                  url: data.Location
                });
              }
            });
        }
      }
      let allFileNames = fileNames.join("");
      console.log("文件名拼接", allFileNames);
      this.addChat(allFileNames);
    },
    selectTestType() {
      this.isLoadingData = true;
      let params = {
        oid: this.oid
      };
      this.ajax
        .get(this.$store.state.api + "selectTestType", params)
        .then(res => {
          this.typeArray = res.data[0];
          this.getData();
        })
        .catch(err => {
          console.error(err);
        });
    },
    search() {
      if (this.stype == 1) {
        this.page = 1;
        this.getCourse();
      } else if (this.stype == 2) {
        this.page2 = 1;
        this.getCourse2();
      }
    },
    searchCourse() {
      if (this.stype == 1) {
        this.page = 1;
        this.getCourse();
      } else if (this.stype == 2) {
        this.page2 = 1;
        this.getCourse2();
      }
    },
    goToCourse2(item) {
      if (item.worksCount > 0) {
        this.$confirm(
          "该表单已存在数据，如果修改题目可能会清空已提交数据，是否重新编辑？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            this.$router.push(
              "/addTest?cid=" +
                item.courseId +
                "&userid=" +
                this.userid +
                "&oid=" +
                this.oid +
                "&org=" +
                this.org +
                "&type=2" +
                "&role=" +
                this.role
            );
          })
          .catch(() => {
            return;
          });
      } else {
        this.$router.push(
          "/addTest?cid=" +
            item.courseId +
            "&userid=" +
            this.userid +
            "&oid=" +
            this.oid +
            "&org=" +
            this.org +
            "&type=2" +
            "&role=" +
            this.role
        );
      }
    },
    checkToTest(cid) {
      this.$router.push(
        "/checkToTest?cid=" +
          cid +
          "&userid=" +
          this.userid +
          "&oid=" +
          this.oid +
          "&org=" +
          this.org +
          "&type=2" +
          "&role=" +
          this.role
      );
    },
    getCourse() {
      this.isLoading = true;
      let params = {
        type: this.groupA,
        uid: this.userid,
        oid: this.oid,
        org: this.org,
        typea: "",
        typeb: "",
        typec: "",
        typed: "",
        typef: this.typeCheck,
        typeE: "",
        cu: "",
        cn: this.courseName,
        page: this.page,
        pageSize: this.pageSize
      };
      this.ajax
        .get(this.$store.state.api + "selectTesttCourse", params)
        .then(res => {
          console.log("API返回的数据", res.data);
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.course = res.data[0];
          for (var i = 0; i < this.course.length; i++) {
            let a = "";
            if (this.course[i].juriP) {
              a = this.course[i].juriP;
            }
            if (this.course[i].juriP2) {
              if (a) {
                a = this.course[i].juriP + "," + this.course[i].juriP2;
              } else {
                a = this.course[i].juriP2;
              }
            }
            this.course[i].juriP = a;
          }
          this.isLoading = false;
        })
        .catch(err => {
          this.isLoading = false;
          console.error(err);
        });
    },
    shareTest(cid) {
      this.scid = cid;
      this.dialogVisibleShare = true;
    },
    localTable() {
      this.btnactive = 1;
      this.dialogTableVisible = true;
      this.getCourse();
    },

    uploadFile({ file, name }) {
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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"
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;

      if (file) {
        // this.loading = true;
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[file.name.split(".").length - 1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read"
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function(evt) {
            //这里可以写进度条
            _this.progressData.value = parseInt((evt.loaded * 100) / evt.total);
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
          })
          .send(function(err, data) {
            if (err) {
              _this.$message.error("上传失败");
            } else {
              console.log(data.Location);
              console.log("提交");
              _this.fileList.push(data.Location);
              console.log(_this.fileList);
              _this.$emit("pushFileData", {
                fileId: "",
                name: name,
                url: data.Location
              });
            }
          });
      }
    },
    getLang() {
      let lang = "";
      if (this.languageSetting == 0) {
        lang = "Chinese.";
      } else if (this.languageSetting == 1) {
        lang = "Traditional Chinese.";
      } else if (this.languageSetting == 2) {
        lang = "English.";
      }
      return lang;
    },
    promptTit() {
      if (!this.loading && !this.courseText) {
        this.$message({
          message: "请输入您想要了解的内容",
          type: "warning"
        });
      } else {
        this.$message({
          message: "请回答完毕后再次发送",
          type: "warning"
        });
      }
    },
    addContent2() {
      if (this.courseText.trim().length == 0) {
        return this.$message.error("请输入内容");
      } else if (this.fileList.length == 0) {
        return this.$message.error("请选择表单");
      }

      let message = this.courseText;
      if (this.courseText) {
        let msg = ``;
        if (this.answerArray.length) {
          // msg += `
          // ## 表单资料
          // ${JSON.stringify(this.answerArray)}
          // `;

          // msg += `
          // ## 要求
          // 根据<参考资料>中的内容实现以下要求：${this.courseText}
          // `;
          msg += `## 要求
根据上传文件中的内容实现以下要求：${this.courseText}`;
          message = msg;
        }

        this.faloading = true;

        let _uuid = uuidv4();
        this.array.push({
          role: "user",
          content: `${this.courseText}`,
          uid: _uuid,
          AI: "AI",
          aiContent: "",
          oldContent: "",
          isShowSynchronization: false,
          filename: "",
          index: this.array.length,
          is_mind_map: false,
          createtime: new Date().toLocaleString().replaceAll("/", "-"),
          loading: true
        });

        // let history = [];
        // if (this.continuous) {
        //   this.array.forEach((i, index) => {
        //     if (i.content) history.push({ role: "user", content: index == this.array.length - 1 ? message : i.content });
        //     if (i.aiContent)
        //       history.push({ role: "assistant", content: i.aiContent });
        //   });
        // } else {
        //   history.push({ role: "user", content: message });
        // }
        // history = history.filter(
        //   i =>
        //     i.content !=
        //     "您好，我是您的助手小可"
        // );

        // history = history.map(i => ({
        //   role: i.role,
        //   content: `${i.content}`
        // }));
        // this.$nextTick(() => {
        //   this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
        // });
        // let params = JSON.stringify({
        //   // model: "gpt-3.5-turbo",
        //   // model: "gpt-4o-mini",
        //   model: "qwen-plus",
        //   temperature: 0,
        //   max_tokens: 4096,
        //   top_p: 1,
        //   frequency_penalty: 0,
        //   presence_penalty: 0,
        //   messages: history,
        //   uid: _uuid,
        //   mind_map_question: ""
        // });
        // this.courseText = "";

        // this.ajax
        //   .post("https://gpt4.cocorobo.cn/chat", params)
        //   .then(res => {
        //     if (
        //       converter(res.data.FunctionResponse.result) ==
        //       converter("发送成功")
        //     ) {
        //     } else {
        //       this.$message.warning(res.data.FunctionResponse.result);
        //     }
        //   })
        //   .catch(e => {
        //     console.log(e);
        //   });
        // this.getAiContent(_uuid);\
        let params = {
          prompt: message,
          messages: [],
          file: this.fileList ? this.fileList : []
        };
        this.stopTalkToken = this.ajax.setCancelSource();
        this.$nextTick(() => {
          this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
        });
        this.courseText = "";
        this.saveUid = _uuid;
        this.ajax
          // .post("https://gpt4.cocorobo.cn/ai_agent_park_chat_new", params)
          .post(
            "https://gpt4.cocorobo.cn/csvaimessage",
            params,
            this.stopTalkToken
          )
          .then(res => {
            // if (
            //   converter(res.data.FunctionResponse.result) ==
            //   converter("发送成功")
            // ) {
            // } else {
            //   this.$message.warning(res.data.FunctionResponse.result);
            // }
            let data = res.data.FunctionResponse;
            const md = new MarkdownIt();
            const text = md.render(data);
            this.array.find(i => i.uid == _uuid).aiContent = text;
            this.array.find(i => i.uid == _uuid).isalltext = true;
            this.array.find(i => i.uid == _uuid).isShowSynchronization = true;
            this.array.find(i => i.uid == _uuid).loading = false;
            this.array.find(i => i.uid == _uuid).mdText = data;
            this.stopTalkToken = null;
            this.faloading = false;
            this.generateChart(this.array.find(i => i.uid == _uuid));
            this.$nextTick(() => {
              this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
            });
            // if (this.courseId) {
            this.insertChat(_uuid);
            // this.$emit("pushAiContent",this.array)
            // }
            console.log("array👉", this.array);
          })
          .catch(err => {
            console.log(err);
            this.faloading = false;
            this.stopTalkToken = null;
          });
        // this.getAtAuContent(_uuid);
        // this.saveUid = _uuid;
      }
    },
    async addContent() {
      if (this.courseText.trim().length == 0) {
        return this.$message.error("请输入内容");
      } else if (this.fileList.length == 0) {
        return this.$message.error("请选择表单");
      }

      let message = this.courseText;
      if (this.courseText) {
        let msg = ``;
        if (this.answerArray.length) {
          // msg += `
          // ## 表单资料
          // ${JSON.stringify(this.answerArray)}
          // `;

          // msg += `
          // ## 要求
          // 根据<参考资料>中的内容实现以下要求：${this.courseText}
          // `;
          msg += `## 要求
根据上传文件中的内容实现以下要求：${this.courseText}`;
          message = msg;
        }

        this.faloading = true;

        let _uuid = uuidv4();
        this.array.push({
          role: "user",
          content: `${this.courseText}`,
          uid: _uuid,
          AI: "AI",
          aiContent: "",
          oldContent: "",
          isShowSynchronization: false,
          filename: "",
          index: this.array.length,
          is_mind_map: false,
          createtime: new Date().toLocaleString().replaceAll("/", "-"),
          loading: true
        });

        let params = {
          prompt: message,
          messages: [],
          file: this.fileList ? this.fileList : []
        };
        this.stopTalkToken = this.ajax.setCancelSource();
        this.$nextTick(() => {
          this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
        });
        this.courseText = "";
        this.saveUid = _uuid;
        let _addText = "";
        const md = new MarkdownIt();
        let _this = this;
        // const curRequestController = new AbortController();
        this.curRequestController = new AbortController();
        // this.stopTalkToken = () => {
        //   curRequestController.abort();
        //   this.getMessageLoading = false;
        //   console.log("请求已终止");
        // };
        // this.getMessageLoading = true;
        fetchEventSource("https://gpt4.cocorobo.cn/csvaimessagestream",{
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify(params),
          signal: _this.curRequestController.signal,
          onmessage(ev){
            let _data = JSON.parse(ev.data);
            console.log("👉>>>",_data)
            let _text = _data.data;
            let status = _data.event;
            if(status=='on_chain_start'){
              const text = md.render('开始分析数据\n')
              _this.array.find(i => i.uid == _uuid).aiContent += text
            }else if(status=='on_tool_start'){
              const text = md.render('开始调用工具代码\n')
              _this.array.find(i => i.uid == _uuid).aiContent += text
            }else if(status=='on_tool_end'){
              const text = md.render('调用工具代码成功返回数据\n')
              _this.array.find(i => i.uid == _uuid).aiContent += text
            }else if(status=='on_chat_model_stream'){
              _addText+=_text;
              const text = md.render(_addText);
              _this.array.find(i => i.uid == _uuid).loading = false;
              _this.array.find(i => i.uid == _uuid).aiContent = text;
            }else if(status=='on_chain_end'){
              const text = md.render(_text);
              _this.array.find(i => i.uid == _uuid).aiContent = text;
              _this.array.find(i => i.uid == _uuid).loading = false;
              _this.array.find(i => i.uid == _uuid).mdText = _text;
              _this.generateChart(_this.array.find(i => i.uid == _uuid));
              _this.insertChat(_uuid);
              _this.curRequestController = null;
            }
            _this.$nextTick(() => {
              _this.$refs.chatDialog.scrollTop = _this.$refs.chatDialog.scrollHeight;
            });;
          },
          onclose(){
            _this.$forceUpdate();
            _this.stopTalkToken = null;
            _this.faloading = false;
            _this.curRequestController = null;
            console.log("连接关闭")
          },
          onerror(err){

            console.log("连接错误",err)
          }
      })

        // fetch("https://gpt4.cocorobo.cn/csvaimessagestream", {
        //   method: "POST",
        //   headers: {
        //     "Content-Type": "application/json"
        //   },
        //   body: JSON.stringify(params),
        //   signal: curRequestController.signal
        // })
        //   .then(res => {
        //     let reader = res.body.getReader();
        //     let getStream = reader => {
        //       return reader.read().then(result => {
        //         if (result.done) {
        //           return;
        //         }

        //         //取出数据（二进制）
        //         let chunk = result.value;
        //         let _text = ``;
        //         for (let i = 0; i < chunk.byteLength; i++) {
        //           _text += String.fromCharCode(chunk[i]);
        //         }
        //         _text = _text.replace('data','"data"');
        //         console.log("👉!!!!",_text,"<<<👈")

        //         // let resultObj = JSON.parse(_text);
        //         // console.log("👉》》》",resultObj)

        //         // if (resultObj["event"]=='on_chat_model_stream') {
        //         //   let data = resultObj["data"];
        //         //   console.log("👉：",data)
        //         //   const md = new MarkdownIt();
        //         //   const text = md.render(data);
        //         //   this.array.find(i => i.uid == _uuid).aiContent = text;
        //         //   this.array.find(i => i.uid == _uuid).loading = false;
        //         //   this.$nextTick(() => {
        //         //     this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
        //         //   });;
        //         // }
        //         // } else if (resultObj["steps"]) {
        //         //   let data = resultObj["steps"];
        //         //   console.log("👉：",data)
        //         //   const md = new MarkdownIt();
        //         //   const text = md.render(data);
        //         //   this.array.find(i => i.uid == _uuid).aiContent = text;
        //         //   this.array.find(i => i.uid == _uuid).loading = false;
        //         //   this.$nextTick(() => {
        //         //     this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
        //         //   });
        //         // } else if (resultObj["output"]) {
        //         //   let data = resultObj["output"];
        //         //   console.log("👉：",data)
        //         //   const md = new MarkdownIt();
        //         //   const text = md.render(data);
        //         //   this.array.find(i => i.uid == _uuid).aiContent = text;
        //         //   this.array.find(i => i.uid == _uuid).isalltext = true;
        //         //   this.array.find(i => i.uid == _uuid).isShowSynchronization = true;
        //         //   this.array.find(i => i.uid == _uuid).loading = false;
        //         //   this.array.find(i => i.uid == _uuid).mdText = data;
        //         //   this.$forceUpdate();
        //         //   this.stopTalkToken = null;
        //         //   this.faloading = false;
        //         //   this.generateChart(this.array.find(i => i.uid == _uuid));
        //         //   this.$nextTick(() => {
        //         //     this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
        //         //   });
        //         //   this.insertChat(_uuid);
        //         // }

        //         // 递归下一个
        //         return getStream(reader);
        //       });
        //     };
        //     getStream(reader);
        //   })
        //   .catch(err => {
        //     console.log(err);
        //   });
      }
    },
    stopCurRequestController(){
      if(this.curRequestController){
          this.curRequestController.abort();
          console.log("请求已终止");
          this.curRequestController = null;
      }
    },
    async getData() {
      return new Promise(resolve => {
        if (this.cid) {
          this.loading = true;
          let cidList = this.cid.split(",");
          let promiseList = [];
          cidList.forEach(el => {
            promiseList.push(this.getCourseData(el));
          });
          Promise.all(promiseList).then(async res => {
            console.log(this.courseInfoList);
            console.log("res", res);
            this.courseInfoList = res;
            this.worksArray = this.courseInfoList;
            console.log("👉worksArray", this.worksArray);
            if (
              this.worksArray.length &&
              JSON.stringify(this.worksArray) !== this.copyWorksArray
            ) {
              this.$emit("clearFileData");
              this.fileId = [];
              this.fileList = [];
              this.copyWorksArray = JSON.stringify(this.worksArray);
              let fileValue = [];
              for (let i = 0; i < this.worksArray.length; i++) {
                let _fileValue = await this.setJson(this.worksArray[i]);
                if (fileValue !== 0) {
                  fileValue.push(_fileValue);
                }
              }
              resolve(fileValue);
              // newValue.forEach(el => {
              //   // console.log("👉el",el)
              //   this.setJson(el);
              // });
              // console.log("👈👉",newValue)
              // this.setJson(newValue)
            }

            this.loading = false;
          });
        } else {
          resolve();
        }
      });
    },
    getCourseData(courseId) {
      console.log("👉courseId", courseId);
      return new Promise(resolve => {
        let params = {
          cid: courseId,
          cn: "",
          tim: "",
          tea: ""
        };
        this.ajax
          .get(this.$store.state.api + "getTestWorksNoPageCopy", params)
          .then(async res => {
            let testJson = res.data[0][0];
            let works = res.data[1];
            let chapters = this.setJSON(
              this.setJson2(
                JSON.parse(JSON.stringify(JSON.parse(res.data[0][0].chapters)))
              )
            );
            console.log("chapters", chapters);

            let courseCount11 = [];
            let array = [];
            let courseIds = []; // 初始化一个空数组来存储所有的courseId
            for (let i = 0; i < works.length; i++) {
              let cJson = this.setJSON(
                JSON.parse(JSON.stringify(JSON.parse(works[i].courseJson)))
              );
              if (JSON.stringify(cJson) == JSON.stringify(chapters)) {
                let _json = this.JSONSetting(
                  JSON.parse(JSON.stringify(JSON.parse(works[i].courseJson)))
                );
                for (var ja = 0; ja < _json.length; ja++) {
                  let _json2 = _json[ja].json;
                  if (_json[ja].type == 6) {
                    let courseId = _json2.answer2;
                    courseIds.push(courseId); // 将type为6的courseId添加到数组中
                  }
                  if (_json[ja].type == 11) {
                    let _answer = _json2.answer2;
                    _answer.length
                      ? (courseCount11 = courseCount11.concat(_answer))
                      : "";
                    _json[ja].json.courseId = _answer ? _answer : [];
                    courseIds = courseIds.concat(_answer); // 将type为11的courseId添加到数组中
                  }
                }
              }
            }
            // 将所有的courseId去重
            courseIds = Array.from(new Set(courseIds));
            // 使用一个数组来存储所有的courseId后，执行getCourseInfoTestAll
            let courseTitles = {}; // 初始化一个空对象来存储所有的courseTitles
            let params2 = [
              {
                cid: courseIds.join(",")
              }
            ];

            let data2 = await this.ajax.post(
              this.$store.state.api + "getCourseInfoTestAll2",
              params2
            );
            let result2 = data2.data[0];
            result2.forEach(i => {
              courseTitles[i.courseId] = i.title;
            });

            for (let i = 0; i < works.length; i++) {
              let cJson = this.setJSON(
                JSON.parse(JSON.stringify(JSON.parse(works[i].courseJson)))
              );
              if (JSON.stringify(cJson) == JSON.stringify(chapters)) {
                let _json = this.JSONSetting(
                  JSON.parse(JSON.stringify(JSON.parse(works[i].courseJson)))
                );

                _json.forEach(item => {
                  if (item.type == 11) {
                    let cid = item.json.answer2;
                    let _title = [];
                    for (var i = 0; i < cid.length; i++) {
                      _title.push(courseTitles[cid[i]]);
                    }
                    item.json.answer2 = _title.length ? _title.join(",") : "";
                  }
                  if (item.type == 6) {
                    let courseId = item.json.answer2;
                    item.json.answer2 = courseTitles[courseId] || "";
                  }
                });
                // 更新对应的_json对象的answer2
                array.push({
                  courseid: works[i].courseid,
                  id: works[i].id,
                  userid: works[i].userid,
                  name: works[i].username ? works[i].username : "匿名",
                  time: works[i].time,
                  array: _json,
                  cut: 0,
                  uteaName: works[i].uteaName,
                  courseJson: JSON.parse(works[i].courseJson)
                });
              }
            }
            let obj = {
              courseId: testJson.courseId,
              name: testJson.title,
              worksArray: array
            };
            // this.courseInfoList.push(obj)
            resolve(obj);
          })
          .catch(err => {
            resolve();
            console.error(err);
          });
      });
    },
    setJson2(json) {
      let _json = json;
      // this.type = _json[0].ttype;
      let checkArray = _json.filter(item => {
        if (item.array) {
          item.array = item.array.filter(item2 => {
            if (item2.ttype == 1 && item2.json && !item2.json.answer2) {
              item2.json.answer2 = [];
            }
            if (item2.array) {
              item2.array = item2.array.filter(item3 => {
                if (item3.ttype == 1 && item3.json && !item3.json.answer2) {
                  item3.json.answer2 = [];
                }
                return item3;
              });
            }
            return (
              (item2.ttype != 1 && item2.array.length > 0) || item2.ttype == 1
            );
          });
        }
        if (item.ttype == 1 && item.json && !item.json.answer2) {
          item.json.answer2 = [];
        }
        return (item.ttype != 1 && item.array.length > 0) || item.ttype == 1;
      });
      return checkArray;
    },
    setJSON(json) {
      return json.filter(item => {
        if (item.array) {
          item.array = item.array.filter(item2 => {
            if (item2.ttype == 1 && item2.json) {
              delete item2.json.answer2;
              delete item2.json.score2;
              delete item2.json.file;
            }
            if (item2.array) {
              item2.array = item2.array.filter(item3 => {
                if (item3.ttype == 1 && item3.json) {
                  delete item3.json.answer2;
                  delete item3.json.score2;
                  delete item3.json.file;
                }
                return item3;
              });
            }
            return item2;
          });
        } else if (item.ttype == 1 && item.json) {
          delete item.json.answer2;
          delete item.json.score2;
          delete item.json.file;
        }
        return item;
      });
    },
    JSONSetting(json) {
      let _json = json;
      let array = [];
      _json.filter(item => {
        if (item.array) {
          item.array = item.array.filter(item2 => {
            if (item2.ttype == 1 && item2.json) {
              array.push(item2);
            }
            if (item2.array) {
              item2.array = item2.array.filter(item3 => {
                if (item3.ttype == 1 && item3.json) {
                  array.push(item3);
                }
                return item3;
              });
            }
            return item2;
          });
        }
        if (item.ttype == 1 && item.json) {
          array.push(item);
        }
        return item;
      });
      return array;
    },
    setJson(obj) {
      return new Promise(resolve => {
        console.log("👉", obj);
        let array = obj.worksArray;
        console.log("👉", array);

        let name = obj.name;
        if (!array || array.length === 0) {
          this.$message.error("您选择的表单缺少数据，请重新选择！");
          return resolve(0);
        }
        const getAnswer = j => {
          if (j.type === 1) {
            return j.json.array
              .filter((_, idx) => j.json.answer2.includes(idx))
              .map(item => `${item.img}${item.option}`)
              .join(",");
          } else if (
            j.type === 3 ||
            j.type === 6 ||
            j.type === 7 ||
            j.type === 8 ||
            j.type === 11
          ) {
            return typeof j.json.answer2 === "string"
              ? j.json.answer2.replace(/\n/g, " ")
              : j.json.answer2;
          } else if (j.type === 5) {
            if (!Array.isArray(j.json.file) || j.json.file.length === 0) {
              return "无附件";
            }
            return j.json.file
              .map(file => `${file.name}（${file.url}）`)
              .join("，");
          } else {
            return "";
          }
        };

        // 获取所有题目类型和题目
        const questions = array[0].array.map((j, index) => ({
          序号: index + 1,
          题目类型: this.options2[j.type],
          题目: j.json.title
        }));

        console.log("我是questions", questions);
        // let csvContent = "data:text/csv;charset=utf-8,"
        // 构建CSV内容
        // let csvContent = "用户名 | 提交时间 | " + questions.map(q => `${q.序号}-${q.题目类型}-${q.题目}`).join(' | ') + "\n";
        let csvContent =
          "用户名,提交时间," +
          questions.map(q => `${q.序号}-${q.题目类型}-${q.题目}`).join(",") +
          "\n";

        // 添加每个用户的答案
        array.forEach(i => {
          let row = [i.name, i.time];
          i.array.forEach(j => {
            row.push(getAnswer(j));
          });
          // csvContent += row.join(' | ') + "\n";
          csvContent += row.join(",") + "\n";
        });

        // 创建Blob对象
        // const blob = new Blob([csvContent], { type: "text/plain;charset=utf-8" });
        // blob.lastModifiedDate = new Date();
        // blob.name = `${name}_表单数据.txt`;

        // 创建Blob对象
        const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8" });
        resolve({ filename: `${name}_表单数据.csv`, content: csvContent });
        blob.lastModifiedDate = new Date();
        blob.name = `${name}_表单数据.csv`;
        // 如果仍需要上传文件，可以保留这行
        return this.uploadFile({ file: blob, name: name });
      });
    },

    async getUserName() {
      let params = { uid: this.userid };
      try {
        let res = await this.ajax.get(
          this.$store.state.api + "getUser",
          params
        );
        this.username = res.data[0][0].name;
      } catch (err) {
        console.error(err);
      }
    },
    //保存消息
    async insertChat(_uid) {
      let _data = this.array.find(i => i.uid == _uid);
      this.saveUid = "";
      this.faloading = false;
      if (!this.username) {
        await this.getUserName();
      }
      if (!_data) return;
      let params = {
        userId: this.userid,
        userName: this.username,
        groupId: "602def61-005d-11ee-91d8-005056b8q12w",
        answer: _data.aiContent,
        problem: _data.content,
        file_id: _data.fileid ? _data.fileid : "",
        alltext: _data.aiContent,
        type: "chat",
        filename: _data.filename,
        session_name: this.cid
      };
      this.ajax
        .post("https://gpt4.cocorobo.cn/insert_chat", params)
        .then(res => {});
    },
    // 获取对应的聊天记录
    async getChatList(cid) {
      return new Promise((resolve, reject) => {
        // if (this.loading) return;
        this.array = [];
        this.loading = true;
        let params = {
          userid: this.userid,
          groupid: "602def61-005d-11ee-91d8-005056b8q12w",
          // session_name:``
          session_name: cid
        };
        this.ajax
          .post("https://gpt4.cocorobo.cn/get_agent_park_chat", params)
          .then(res => {
            console.log(res);
            let _data = JSON.parse(res.data.FunctionResponse).response;
            console.log("data", _data);
            if (_data.length > 0) {
              let _chatList = [];
              for (let i = 0; i < _data.length; i++) {
                _chatList.push({
                  loading: false,
                  role: "user",
                  content: _data[i].problem,
                  uid: _data[i].id,
                  AI: "AI",
                  aiContent: _data[i].answer,
                  oldContent: _data[i].answer,
                  isShowSynchronization: false,
                  filename: _data[i].filename,
                  index: i,
                  is_mind_map: false,
                  fileid: _data[i].fileid,
                  createtime: _data[i].createtime
                });
              }
              this.array = _chatList;
              this.loading = false;
            } else {
              let _uid = uuidv4();
              let _chatList = [];
              _chatList.push({
                loading: false,
                role: "",
                content: "",
                uid: _uid,
                AI: "AI",
                aiContent: "选择需要分析的数据，我将为您分析：",
                oldContent: "选择需要分析的数据，我将为您分析：",
                isShowSynchronization: false,
                filename: "",
                index: 0,
                is_mind_map: false,
                fileid: ""
              });
              this.array = _chatList;
              // if (this.courseId) {
              //   this.insertChat(_uid,cid);
              // }
              //没有对话记录
              this.loading = false;
            }
            resolve();
          })
          .catch(err => {
            console.log(err);
            this.$message.error("获取对话记录失败");
            this.loading = false;
            resolve();
          });
      });
    },
    addTask(index) {
      if (this.checkArray.indexOf(index) !== -1) {
        this.checkArray.splice(this.checkArray.indexOf(index), 1);
      } else {
        this.checkArray.push(index);
      }
      console.log(index);
    },
    addAllTask() {
      if (this.checkArray.length === this.course.length) {
        this.checkArray = [];
      } else {
        this.checkArray = [];
        this.course.forEach((item, index) => {
          this.checkArray.push(index);
        });
      }
    },
    tableRowClassName2({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "rowClass";
      } else {
        return "rowClass";
      }
    },
    checkPart(name) {
      this.part = name;
    },
    inputChange() {
      if (this.courseText.at(-1) == "@") {
        // this.showRoleList = true;
      }
      if (this.courseText.at(-1) == "/") {
        console.log("哇卡ka2");
      }

      this.$nextTick(() => {
        this.$refs.textareaRef.style.height = "35px";
        this.$refs.textareaRef.style.height =
          this.$refs.textareaRef.scrollHeight + "px";
        this.textareaHeight = this.$refs.textareaRef.style.height;
      });
    },
    textareaKeydown(_e) {
      if (this.showRoleList && this.choseRoleList.length > 0) {
        console.log(_e.keyCode);
        switch (_e.keyCode) {
          case 38: //小键盘上
            _e.preventDefault();
            if (this.choseRoleItem == 0) return;
            this.choseRoleItem--;
            // 修改滚动条高度
            this.$refs.roleListRef.scrollTo({
              top:
                this.$refs[`roleItem${this.choseRoleItem}Ref`][0].offsetTop -
                10,
              behavior: "smooth"
            });
            // this.$refs.roleListRef.scrollTop = this.choseRoleItem * 107;
            break;
          case 40: //小键盘下
            _e.preventDefault();
            if (this.choseRoleItem == this.choseRoleList.length - 1) return;
            this.choseRoleItem++;
            this.$refs.roleListRef.scrollTo({
              top:
                this.$refs[`roleItem${this.choseRoleItem}Ref`][0].offsetTop -
                10,
              behavior: "smooth"
            });
            // this.$refs.roleListRef.scrollTop = this.choseRoleItem * 107;
            break;
          case 13: //回车
            _e.preventDefault();
            this.choseRole(this.choseRoleList[this.choseRoleItem]);
            break;
        }
      } else if (_e.key === "Enter") {
        _e.preventDefault();
        if (_e.shiftKey) {
          this.courseText += "\n";
        } else {
          this.addContent();
        }
      }
    },
    clear() {
      this.$confirm("确定清空聊天记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(_ => {
          this.loading = true;
          let params = {
            user_id: this.userid,
            id: "602def61-005d-11ee-91d8-005056b8q12w",
            session_name: `${this.courseId}-${this.userid}-test`
          };

          this.ajax
            .post("https://gpt4.cocorobo.cn/delete_park_session", params)
            .then(res => {
              this.array = [];
              this.$message.success("清除聊天记录成功");
              this.loading = false;
            })
            .catch(err => {
              this.loading = false;
              this.$message.error("清除聊天记录失败");
            });
        })
        .catch(_ => {});
    },
    choseRole(item) {
      let _lastAtIndex = this.courseText.lastIndexOf("@");
      this.courseText = `${this.courseText.slice(0, _lastAtIndex)}@${
        item.assistantName
      } `;
      this.$refs.textareaRef.focus();
      this.showRoleList = false;
    },
    copyText(text) {
      this.courseText = text;
      this.addContent();
    },
    onCopy(content,index) {
      if(this.$refs[`eChartViewRef-${index}`]){
        let _el = this.$refs[`eChartViewRef-${index}`][0].$el;
        let _canvas = _el.querySelector('canvas');
        let _echartBase64 = _canvas.toDataURL("image/png");
        content = content + ' ' + _echartBase64
      }
      const turndownService = new TurndownService();
      // 添加自定义规则来处理表格
      turndownService.addRule("table", {
        filter: "table",
        replacement: (content, node) => {
          const rows = node.querySelectorAll("tr");
          let markdown = "";

          rows.forEach(row => {
            const cells = row.querySelectorAll("th, td");
            const rowMarkdown = Array.from(cells)
              .map(cell => cell.textContent)
              .join(" | ");
            markdown += `| ${rowMarkdown} |\n`;
            if (cells && cells.length && cells[0].tagName == "TH") {
              let a = Array.from(cells)
                .map(cell => "")
                .join(" --- |");
              markdown += `| --- |${a}\n`;
            }
          });

          // 添加分隔行
          // markdown = markdown.replace(/^/, '| --- |\n');
          return markdown;
        }
      });
      // 创建临时textarea元素
      const tempInput = document.createElement("textarea");

      tempInput.value = turndownService.turndown(content); // 设置要复制的内容
      // 隐藏元素
      tempInput.style.position = "absolute";
      tempInput.style.left = "-9999px";
      // 将元素添加到DOM中
      document.body.appendChild(tempInput);
      // 选中元素内容
      tempInput.select();
      // 执行复制操作
      document.execCommand("copy");
      // 移除临时元素
      document.body.removeChild(tempInput);
      this.$message({
        message: "复制成功",
        type: "success"
      });
    },
    // edit(index) {
    //   console.log("👉", this.array[index].content);
    //   const userAsk = this.array[index].content
    //   this.aiText = this.array[index].aiContent
    //   this.$emit("pushAiContent", this.aiText, userAsk)
    // },
    stopSend() {
      if (this.fasource) {
        this.fasource.close();
        if (this.array[this.array.length - 1].content == "wanSearch") {
          this.array.pop();
        }
        this.array.find(i => i.uid == this.saveUid).loading = false;
        this.faloading = false;
        this.fasource = null;
        this.insertChat(this.saveUid);
      } else if (this.stopTalkToken) {
        this.stopTalkToken.cancel("Request canceled by the user.");
        this.array = this.array.filter(i => i.uid !== this.saveUid);
        this.stopTalkToken = null;
        this.faloading = false;
      }
    },
    changeVoice(flag) {
      this.isVoice = flag;
    },
    startVoice() {
      let iiframe = this.$refs["iiframe"];
      iiframe.contentWindow.window.document.getElementById(
        "languageOptions"
      ).selectedIndex = 2; //普通话
      iiframe.contentWindow.testdoContinuousPronunciationAssessment();
      this.isTalk = true;
      iiframe.contentWindow.onRecognizedResult = e => {
        let _msg = e.privText;
        console.log(_msg);
        if (_msg) this.courseText += _msg;
      };
    },
    stopVoice() {
      try {
        if (!this.isTalk) return this.$message.info("请先开始录音");
        let iiframe = this.$refs["iiframe"];
        iiframe.contentWindow.window.document
          .getElementById("scenarioStopButton")
          .click();
        iiframe.contentWindow.onSessionStopped = (s, e) => {
          this.isTalk = false;
          if (this.courseText) {
            this.addContent();
          }
        };
      } catch (error) {
        console.log(error);
        this.isTalk = false;
        if (this.courseText) {
          this.addContent();
        }
      }
    },
    async generateChart(item) {
      console.log("生成图表")
      let _eChartsMsg = `
折线图(type=0)：{"xAxis":{"type":"category","data":["data1","data2","data3","data4","data5","data6","data7"]},"yAxis":{"type":"value"},"series":[{"data":[150,230,224,218,135,147,260],"type":"line"}]}
折线图堆叠(type=1)：{"tooltip":{"trigger":"axis"},"legend":{"data":["data1","data2","data3","data4","data5"]},"grid":{"left":"3%","right":"4%","bottom":"3%","containLabel":true},"toolbox":{"feature":{"saveAsImage":{}}},"xAxis":{"type":"category","boundaryGap":false,"data":["xdata1","xdata2","xdata3","xdata4","xdata5","xdata6","xdata7"]},"yAxis":{"type":"value"},"series":[{"name":"data1","type":"line","stack":"Total","data":[120,132,101,134,90,230,210]},{"name":"data2","type":"line","stack":"Total","data":[220,182,191,234,290,330,310]},{"name":"data3","type":"line","stack":"Total","data":[150,232,201,154,190,330,410]},{"name":"data4","type":"line","stack":"Total","data":[320,332,301,334,390,330,320]},{"name":"data5","type":"line","stack":"Total","data":[820,932,901,934,1290,1330,1320]}]}
柱状图(type=2)：{"xAxis":{"type":"category","data":["data1","data2","data2","data3","data4","data5","data6"]},"yAxis":{"type":"value"},"series":[{"data":[120,200,150,80,70,110,130],"type":"bar"}]}
堆叠柱状图归一化(type=3)：{"legend":{"selectedMode":false},"grid":{"left":100,"right":100,"top":50,"bottom":50},"yAxis":{"type":"value"},"xAxis":{"type":"category","data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]},"series":[{"name":"Direct","type":"bar","stack":"total","barWidth":"60%","label":{"show":true},"data":[100,302,301,334,390,330,320]},{"name":"Mail Ad","type":"bar","stack":"total","barWidth":"60%","label":{"show":true},"data":[320,132,101,134,90,230,210]},{"name":"Affiliate Ad","type":"bar","stack":"total","barWidth":"60%","label":{"show":true},"data":[220,182,191,234,290,330,310]},{"name":"Video Ad","type":"bar","stack":"total","barWidth":"60%","label":{"show":true},"data":[150,212,201,154,190,330,410]},{"name":"Search Engine","type":"bar","stack":"total","barWidth":"60%","label":{"show":true},"data":[820,832,901,934,1290,1330,1320]}]}
分组柱状图(type=4)：{"legend":{},"tooltip":{},"dataset":{"source":[["product","data1","data2","data3"],["xdata1",43.3,85.8,93.7],["xdata2",83.1,73.4,55.1],["xdata3",86.4,65.2,82.5],["xdata4",72.4,53.9,39.1]]},"xAxis":{"type":"category"},"yAxis":{},"series":[{"type":"bar"},{"type":"bar"},{"type":"bar"}]}
饼状图(type=5)：{"tooltip":{"trigger":"item"},"legend":{"orient":"vertical","left":"left"},"series":[{"name":"formTitle","type":"pie","radius":"50%","data":[{"value":1048,"name":"data1"},{"value":735,"name":"data2"},{"value":580,"name":"data3"},{"value":484,"name":"data4"},{"value":300,"name":"data5"}],"emphasis":{"itemStyle":{"shadowBlur":10,"shadowOffsetX":0,"shadowColor":"rgba(0, 0, 0, 0.5)"}}}]}
环状图(type=6)：{"tooltip":{"trigger":"item"},"legend":{"top":"5%","left":"center"},"series":[{"name":"formTitle","type":"pie","radius":["40%","70%"],"avoidLabelOverlap":false,"itemStyle":{"borderRadius":10,"borderColor":"#fff","borderWidth":2},"label":{"show":false,"position":"center"},"emphasis":{"label":{"show":true,"fontSize":40,"fontWeight":"bold"}},"labelLine":{"show":false},"data":[{"value":1048,"name":"data1"},{"value":735,"name":"data2"},{"value":580,"name":"data3"},{"value":484,"name":"data4"},{"value":300,"name":"data5"}]}]}
散点图(type=7)：{"xAxis":{},"yAxis":{},"series":[{"symbolSize":20,"data":[[10,8.04],[8.07,6.95],[13,7.58],[9.05,8.81],[11,8.33],[14,7.66],[13.4,6.81],[10,6.33],[14,8.96],[12.5,6.82],[9.15,7.2],[11.5,7.2],[3.03,4.23],[12.2,7.83],[2.02,4.47],[1.05,3.33],[4.05,4.96],[6.03,7.24],[12,6.26],[12,8.84],[7.08,5.82],[5.02,5.68]],"type":"scatter"}]}
多轴气泡图(type=8)：{"legend":{"data":["Punch Card"],"left":"right"},"tooltip":{"position":"top"},"grid":{"left":2,"bottom":10,"right":10,"containLabel":true},"xAxis":{"type":"category","data":["12a","1a","2a","3a","4a","5a","6a","7a","8a","9a","10a","11a","12p","1p","2p","3p","4p","5p","6p","7p","8p","9p","10p","11p"],"boundaryGap":false,"splitLine":{"show":true},"axisLine":{"show":false}},"yAxis":{"type":"category","data":["Saturday","Friday","Thursday","Wednesday","Tuesday","Monday","Sunday"],"axisLine":{"show":false}},"series":[{"name":"Punch Card","type":"scatter","data":[[0,0,5],[1,0,1],[2,0,0],[3,0,0],[4,0,0],[5,0,0],[6,0,0],[7,0,0],[8,0,0],[9,0,0],[10,0,0],[11,0,2],[12,0,4],[13,0,1],[14,0,1],[15,0,3],[16,0,4],[17,0,6],[18,0,4],[19,0,4],[20,0,3],[21,0,3],[22,0,2],[23,0,5],[0,1,7],[1,1,0],[2,1,0],[3,1,0],[4,1,0],[5,1,0],[6,1,0],[7,1,0],[8,1,0],[9,1,0],[10,1,5],[11,1,2],[12,1,2],[13,1,6],[14,1,9],[15,1,11],[16,1,6],[17,1,7],[18,1,8],[19,1,12],[20,1,5],[21,1,5],[22,1,7],[23,1,2],[0,2,1],[1,2,1],[2,2,0],[3,2,0],[4,2,0],[5,2,0],[6,2,0],[7,2,0],[8,2,0],[9,2,0],[10,2,3],[11,2,2],[12,2,1],[13,2,9],[14,2,8],[15,2,10],[16,2,6],[17,2,5],[18,2,5],[19,2,5],[20,2,7],[21,2,4],[22,2,2],[23,2,4],[0,3,7],[1,3,3],[2,3,0],[3,3,0],[4,3,0],[5,3,0],[6,3,0],[7,3,0],[8,3,1],[9,3,0],[10,3,5],[11,3,4],[12,3,7],[13,3,14],[14,3,13],[15,3,12],[16,3,9],[17,3,5],[18,3,5],[19,3,10],[20,3,6],[21,3,4],[22,3,4],[23,3,1],[0,4,1],[1,4,3],[2,4,0],[3,4,0],[4,4,0],[5,4,1],[6,4,0],[7,4,0],[8,4,0],[9,4,2],[10,4,4],[11,4,4],[12,4,2],[13,4,4],[14,4,4],[15,4,14],[16,4,12],[17,4,1],[18,4,8],[19,4,5],[20,4,3],[21,4,7],[22,4,3],[23,4,0],[0,5,2],[1,5,1],[2,5,0],[3,5,3],[4,5,0],[5,5,0],[6,5,0],[7,5,0],[8,5,2],[9,5,0],[10,5,4],[11,5,1],[12,5,5],[13,5,10],[14,5,5],[15,5,7],[16,5,11],[17,5,6],[18,5,0],[19,5,5],[20,5,3],[21,5,4],[22,5,2],[23,5,0],[0,6,1],[1,6,0],[2,6,0],[3,6,0],[4,6,0],[5,6,0],[6,6,0],[7,6,0],[8,6,0],[9,6,0],[10,6,1],[11,6,0],[12,6,2],[13,6,1],[14,6,3],[15,6,4],[16,6,0],[17,6,0],[18,6,0],[19,6,0],[20,6,1],[21,6,2],[22,6,2],[23,6,60]]}]}
基础k线图(type=9)：{"xAxis":{"data":["xdata1","xdata2","xdata3","xdata4"]},"yAxis":{},"series":[{"type":"candlestick","data":[[20,34,10,38],[40,35,30,50],[31,38,33,44],[38,15,5,42]]}]}
基础盒须图(type=10)：{"dataset":[{"source":[[850,740,900,1070,930,850,950,980,980,880,1000,980,930,650,760,810,1000,1000,960,960],[960,940,960,940,880,800,850,880,900,840,830,790,810,880,880,830,800,790,760,800],[880,880,880,860,720,720,620,860,970,950,880,910,850,870,840,840,850,840,840,840],[890,810,810,820,800,770,760,740,750,760,910,920,890,860,880,720,840,850,850,780],[890,840,780,810,760,810,790,810,820,850,870,870,810,740,810,940,950,800,810,870]]},{"transform":{"type":"boxplot","config":{"itemNameFormatter":"expr {value}"}}},{"fromDatasetIndex":1,"fromTransformResult":1}],"tooltip":{"trigger":"item","axisPointer":{"type":"shadow"}},"grid":{"left":"10%","right":"10%","bottom":"15%"},"xAxis":{"type":"category","boundaryGap":true,"nameGap":30,"splitArea":{"show":false},"splitLine":{"show":false}},"yAxis":{"type":"value","name":"km/s minus 299,000","splitArea":{"show":true}},"series":[{"name":"boxplot","type":"boxplot","datasetIndex":1},{"name":"outlier","type":"scatter","datasetIndex":2}]}
热力图(type=11)：{"tooltip":{"position":"top"},"grid":{"height":"50%","top":"10%"},"xAxis":{"type":"category","data":["12a","1a","2a","3a","4a","5a","6a","7a","8a","9a","10a","11a","12p","1p","2p","3p","4p","5p","6p","7p","8p","9p","10p","11p"],"splitArea":{"show":true}},"yAxis":{"type":"category","data":["Saturday","Friday","Thursday","Wednesday","Tuesday","Monday","Sunday"],"splitArea":{"show":true}},"visualMap":{"min":0,"max":10,"calculable":true,"orient":"horizontal","left":"center","bottom":"15%"},"series":[{"name":"Punch Card","type":"heatmap","data":[[0,0,5],[1,0,1],[2,0,"-"],[3,0,"-"],[4,0,"-"],[5,0,"-"],[6,0,"-"],[7,0,"-"],[8,0,"-"],[9,0,"-"],[10,0,"-"],[11,0,2],[12,0,4],[13,0,1],[14,0,1],[15,0,3],[16,0,4],[17,0,6],[18,0,4],[19,0,4],[20,0,3],[21,0,3],[22,0,2],[23,0,5],[0,1,7],[1,1,"-"],[2,1,"-"],[3,1,"-"],[4,1,"-"],[5,1,"-"],[6,1,"-"],[7,1,"-"],[8,1,"-"],[9,1,"-"],[10,1,5],[11,1,2],[12,1,2],[13,1,6],[14,1,9],[15,1,11],[16,1,6],[17,1,7],[18,1,8],[19,1,12],[20,1,5],[21,1,5],[22,1,7],[23,1,2],[0,2,1],[1,2,1],[2,2,"-"],[3,2,"-"],[4,2,"-"],[5,2,"-"],[6,2,"-"],[7,2,"-"],[8,2,"-"],[9,2,"-"],[10,2,3],[11,2,2],[12,2,1],[13,2,9],[14,2,8],[15,2,10],[16,2,6],[17,2,5],[18,2,5],[19,2,5],[20,2,7],[21,2,4],[22,2,2],[23,2,4],[0,3,7],[1,3,3],[2,3,"-"],[3,3,"-"],[4,3,"-"],[5,3,"-"],[6,3,"-"],[7,3,"-"],[8,3,1],[9,3,"-"],[10,3,5],[11,3,4],[12,3,7],[13,3,14],[14,3,13],[15,3,12],[16,3,9],[17,3,5],[18,3,5],[19,3,10],[20,3,6],[21,3,4],[22,3,4],[23,3,1],[0,4,1],[1,4,3],[2,4,"-"],[3,4,"-"],[4,4,"-"],[5,4,1],[6,4,"-"],[7,4,"-"],[8,4,"-"],[9,4,2],[10,4,4],[11,4,4],[12,4,2],[13,4,4],[14,4,4],[15,4,14],[16,4,12],[17,4,1],[18,4,8],[19,4,5],[20,4,3],[21,4,7],[22,4,3],[23,4,"-"],[0,5,2],[1,5,1],[2,5,"-"],[3,5,3],[4,5,"-"],[5,5,"-"],[6,5,"-"],[7,5,"-"],[8,5,2],[9,5,"-"],[10,5,4],[11,5,1],[12,5,5],[13,5,10],[14,5,5],[15,5,7],[16,5,11],[17,5,6],[18,5,"-"],[19,5,5],[20,5,3],[21,5,4],[22,5,2],[23,5,"-"],[0,6,1],[1,6,"-"],[2,6,"-"],[3,6,"-"],[4,6,"-"],[5,6,"-"],[6,6,"-"],[7,6,"-"],[8,6,"-"],[9,6,"-"],[10,6,1],[11,6,"-"],[12,6,2],[13,6,1],[14,6,3],[15,6,4],[16,6,"-"],[17,6,"-"],[18,6,"-"],[19,6,"-"],[20,6,1],[21,6,2],[22,6,2],[23,6,6]],"label":{"show":true},"emphasis":{"itemStyle":{"shadowBlur":10,"shadowColor":"rgba(0, 0, 0, 0.5)"}}}]}
漏斗图(type=12)：{"tooltip":{"trigger":"item","formatter":"{a} {b} : {c}%"},"toolbox":{"feature":{"dataView":{"readOnly":false},"restore":{},"saveAsImage":{}}},"legend":{"data":["Show","Click","Visit","Inquiry","Order"]},"series":[{"name":"Funnel","type":"funnel","left":"10%","top":60,"bottom":60,"width":"80%","min":0,"max":100,"minSize":"0%","maxSize":"100%","sort":"descending","gap":2,"label":{"show":true,"position":"inside"},"labelLine":{"length":10,"lineStyle":{"width":1,"type":"solid"}},"itemStyle":{"borderColor":"#fff","borderWidth":1},"emphasis":{"label":{"fontSize":20}},"data":[{"value":60,"name":"Visit"},{"value":40,"name":"Inquiry"},{"value":20,"name":"Order"},{"value":80,"name":"Click"},{"value":100,"name":"Show"}]}]}
雷达图(type=13)：{"legend":{"data":["Allocated Budget","Actual Spending"]},"radar":{"indicator":[{"name":"Sales","max":6500},{"name":"Administration","max":16000},{"name":"Information Technology","max":30000},{"name":"Customer Support","max":38000},{"name":"Development","max":52000},{"name":"Marketing","max":25000}]},"series":[{"name":"Budget vs spending","type":"radar","data":[{"value":[4200,3000,20000,35000,50000,18000],"name":"Allocated Budget"},{"value":[5000,14000,28000,26000,42000,21000],"name":"Actual Spending"}]}]}
基础桑基图(type=14)：{"series":{"type":"sankey","layout":"none","emphasis":{"focus":"adjacency"},"data":[{"name":"a"},{"name":"b"},{"name":"a1"},{"name":"a2"},{"name":"b1"},{"name":"c"}],"links":[{"source":"a","target":"a1","value":5},{"source":"a","target":"a2","value":3},{"source":"b","target":"b1","value":8},{"source":"a","target":"b1","value":3},{"source":"b1","target":"a1","value":1},{"source":"b1","target":"c","value":2}]}}
`;

      let _msg = `ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content

#Context
##角色描述
你是一位数据分析师，你需要根据用户的提问与ai的回答，读取并统计回答内容中的信息，以所需要的格式输出JSON数据来生成echarts图表
##上下文
你需要学习《完整版图表类型》《可视化图表的源数据格式》，并理解不同图表类型适用的场景以及绘制不同图表需要源数据表的格式。
##任务描述
你需要理解用户需求，并通过筛选关键信息、读取并检索对话中的相关信息并进行数据分析与统计，最后以Format example的形式输出统计结果。具体步骤如下：
1、读取对话数据或者数据信息，了解文档中的数据内容。
2、根据用户的需求，选择合适的可视化图表的类型（图表类型的选择可以从 图表列表 中进行筛选）根据分析的内容筛选出可以生成的图表并输出。
3、根据图表类型确定源数据格式，确定每行每列的字段，并在对话数据中，检索相关字段的信息，进行统计。源数据表的格式可以参考知识库中“可视化图表的源数据格式”进行统计。
4、输出结果需要与Format example格式一致,只输出json格式的内容并且可以使用JSON.parse()转换成对象,不需要输出多余的内容
5、如果没有合适的图表则返回空数组：'[]'。
6、如果对话数据无图表的数据，则放回空数组：'[]'

##对话数据

user:
${item.content}

ai:
${item.mdText}

##图表列表
${_eChartsMsg}

##Format example
[{"name":"折线图","type":0,"index":0,"title":"图表内容标题","option":{"xAxis":{"type":"category","data":["data1","data2","data3","data4","data5","data6","data7"]},"yAxis":{"type":"value"},"series":[{"data":[150,230,224,218,135,147,260],"type":"line"}]}},{"name":"柱状图","type":2,"index":1,"title":"图表内容标题","option":{"xAxis":{"type":"category","data":["data1","data2","data2","data3","data4","data5","data6"]},"yAxis":{"type":"value"},"series":[{"data":[120,200,150,80,70,110,130],"type":"bar"}]}},{"name":"基础k线图","type":9,"index":2,"title":"图表内容标题","option":{"xAxis":{"data":["xdata1","xdata2","xdata3","xdata4"]},"yAxis":{},"series":[{"type":"candlestick","data":[[20,34,10,38],[40,35,30,50],[31,38,33,44],[38,15,5,42]]}]}}]
`;

      let params = {
        model: "gpt-4o-2024-11-20",
        temperature: 0,
        max_tokens: 4096,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0,
        messages: [{ role: "user", content: _msg }],
        uid: uuidv4(),
        mind_map_question: "",
        stream: false
      };
      this.array.find(i => i.uid === item.uid).loading = true;
      this.ajax
        .post("https://gpt4.cocorobo.cn/chat", params)
        .then(res => {
          let _data = res.data.FunctionResponse.choices[0].message.content;
          _data = _data.replaceAll("```json", "").replaceAll("```", "");

          // const match = _data.match(/{[^{}]*"start"[\s\S]*?"end":\s*""[^{}]*}/);
          // let _result = JSON.parse(match[0]) || null;
          console.log("👉！！！！！！！！！！", _data);
          this.array.find(i => i.uid === item.uid).loading = false;
          this.array.find(i => i.uid === item.uid).echartList = JSON.parse(
            _data
          );
          // console.log("👉",_result)

          // this.$forceUpdate();
          // this.array.find(i => i.uid === item.uid).loading = false;
          // this.array.find(i => i.uid === item.uid).echartData = JSON.parse(
          //   _data
          // );
        })
        .catch(e => {
          console.log(e);
          this.array.find(i => i.uid === item.uid).loading = false;
          this.$message.error(`生成图表失败`);
        });

      return;
      //0：柱状图   1：折线图   2：圆饼图
      let _tableData = await this.getContentTable(item.aiContent);
      this.showPopoverUid = null;

      if (_tableData && _tableData.length > 0) {
        let _echartsType = {
          "0": {
            text: `{"xAxis":{"type":"category","data":["数据1","数据2","数据3","数据4","数据5","数据6","数据7"]},"yAxis":{"type":"value"},"series":[{"data":[120,200,150,80,70,110,130],"type":"bar"}]}`,
            label: "柱状图"
          },
          "1": {
            text: `{"xAxis":{"type":"category","data":["数据1","数据2","数据3","数据4","数据5","数据6","数据7"]},"yAxis":{"type":"value"},"series":[{"data":[150,230,224,218,135,147,260],"type":"line"}]}`,
            label: "折线图"
          },
          "2": {
            text: `{"tooltip":{"trigger":"item"},"series":[{"name":"表单名称","type":"pie","radius":"50%","data":[{"value":1048,"name":"数据1"},{"value":735,"name":"数据2"},{"value":580,"name":"数据3"},{"value":484,"name":"数据4"},{"value":300,"name":"数据5"}]}]}`,
            label: "圆饼图"
          }
        };

        let _msg = `ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content

#Context
##角色描述
你是一位数据分析师，你需要根据用户的提问，读取并统计表格内容中的信息，以所需要的格式输出JSON数据来生成echarts图表
##上下文
你需要学习《完整版图表类型》《可视化图表的源数据格式》，并理解不同图表类型适用的场景以及绘制不同图表需要源数据表的格式。
##任务描述
你需要理解用户需求，并通过筛选关键信息、读取并检索文档中的相关信息并进行数据分析与统计，最后以Format example的形式输出统计结果。具体步骤如下：
1、读取内容表格信息，了解文档中的数据内容。
2、根据用户的需求，选择合适的可视化图表的类型（图表类型的选择可以从柱状图、折线图、饼状图中进行选择。）如果用户提出的需求中已经指定图表类型，可以根据用户指定的输出。
3、根据图表类型确定源数据格式，确定每行每列的字段，并在用户上传的数据文档中，检索相关字段的信息，进行统计。源数据表的格式可以参考知识库中“可视化图表的源数据格式”进行统计。
4、输出结果需要与Format example格式一致,不需要输出多余的内容

##表格内容
${JSON.stringify(_tableData)}

##图表类型
${_echartsType[type].label}

##Format example
${_echartsType[type].text}

`;
        let params = {
          model: "gpt-4o-2024-11-20",
          temperature: 0,
          max_tokens: 4096,
          top_p: 1,
          frequency_penalty: 0,
          presence_penalty: 0,
          messages: [{ role: "user", content: _msg }],
          uid: uuidv4(),
          mind_map_question: "",
          stream: false
        };
        this.array.find(i => i.uid === item.uid).loading = true;
        this.ajax
          .post("https://gpt4.cocorobo.cn/chat", params)
          .then(res => {
            let _data = res.data.FunctionResponse.choices[0].message.content;
            _data = _data.replaceAll("```json", "").replaceAll("```", "");
            // const match = _data.match(/{[^{}]*"start"[\s\S]*?"end":\s*""[^{}]*}/);
            // let _result = JSON.parse(match[0]) || null;
            console.log("👉", _data);
            // console.log("👉",_result)

            this.$forceUpdate();
            this.array.find(i => i.uid === item.uid).loading = false;
            this.array.find(i => i.uid === item.uid).echartData = JSON.parse(
              _data
            );
          })
          .catch(e => {
            console.log(e);
            this.$message.error(`生成${_echartsType[type].label}失败`);
          });
      } else {
        return this.$message.error("未提取到表格内容");
      }
    },
    choseEcharts(item1, item2) {
      this.array.find(i => i.uid == item1.uid).loading = true;
      this.array.find(i => i.uid == item1.uid).echartData = item2.option;
      setTimeout(() => {
        this.array.find(i => i.uid == item1.uid).loading = false;
        this.$forceUpdate();
      }, 100);
    },
    getContentTable(_content) {
      return new Promise(resolve => {
        // let _content = this.data.jsonData.content;
        // const md = new markdownIt();   md.render(_content);
        let _contentHtml = _content;

        let _contentTableList = [];
        const rowRegex = /<tr[^>]*>([\s\S]*?)<\/tr>/g; // 匹配表格行，[\s\S] 匹配所有字符
        const cellRegex = /<(th|td)[^>]*>([\s\S]*?)<\/\1>/g; // 匹配单元格，[\s\S] 匹配所有字符

        let rowMatch;
        while ((rowMatch = rowRegex.exec(_contentHtml)) !== null) {
          const rowContent = rowMatch[1]; // 每一行的内容
          const rowData = [];
          let cellMatch;

          // 匹配每个单元格 (th 或 td)
          while ((cellMatch = cellRegex.exec(rowContent)) !== null) {
            let _text = cellMatch[2].trim();
            _text = _text.replace(/&[a-zA-Z]+;/g, "");
            _text = _text.replace(/<\/?[^>]+(>|$)/g, "");
            rowData.push(_text); // 将每个单元格的内容添加到当前行的数组中
          }

          // 如果该行有数据，推送到 _contentTableList 中
          if (rowData.length) {
            _contentTableList.push(rowData);
          }
        }

        // 输出提取的表格数据

        resolve(_contentTableList);
      });
    },
    handleBlur() {
      this.showPopoverUid = null;
    },
    async addNewChat(){
      this.array = [];
      this.fileId = [];
      this.fileList = [];
      this.cid = "";
      this.$parent.menuList = []
      this.$parent.userAsk = "";
      //await this.addChat(this.formList.map(i=>i.name).join(','))
      this.$message.success("新建会话成功")
    }
  },
  computed: {
    localFormList() {
      // 在 computed 属性中返回一个新的数组，而不是直接修改 prop
      let localFormList = [...this.formList];
      return JSON.stringify(localFormList);
    },
    pan() {
      return content => {
        try {
          return JSON.parse(content);
        } catch (error) {
          return [];
        }
      };
    },
    getLook() {
      return function(item) {
        let content = "";
        if (item.look == "1" || item.look == "") {
          content = "未发布";
        }
        let now = new Date().getTime();
        let isTime = item.over_at && new Date(item.over_at).getTime();
        if (
          item.over_at &&
          item.look == "2" &&
          now > isTime &&
          ((item.isUserCount > 0 && item.isUserCount > item.worksPerson) ||
            item.isUserCount == 0)
        ) {
          content = "逾期";
        }

        if (
          ((item.over_at && item.look == "2" && isTime > now) ||
            (!item.over_at && item.look == "2")) &&
          ((item.isUserCount == 0 && item.worksPerson > 0) ||
            (item.isUserCount > 0 &&
              0 < item.worksPerson &&
              item.worksPerson < item.isUserCount))
        ) {
          content = "进行中";
        }

        if (
          ((item.over_at && item.look == "2" && isTime > now) ||
            (!item.over_at && item.look == "2")) &&
          item.worksPerson == 0
        ) {
          content = "未进行";
        }

        if (
          item.look == "2" &&
          item.isUserCount > 0 &&
          item.isUserCount <= item.worksPerson
        ) {
          content = "已完成";
        }
        return content;
      };
    },
    getLookType() {
      return function(item) {
        let content = "";
        if (item.look == "1" || item.look == "") {
          // content = '未发布'
          content = "no";
        }
        let now = new Date().getTime();
        let isTime = item.over_at && new Date(item.over_at).getTime();
        if (
          item.over_at &&
          item.look == "2" &&
          now > isTime &&
          ((item.isUserCount > 0 && item.isUserCount > item.worksPerson) ||
            item.isUserCount == 0)
        ) {
          // content = '逾期'
          content = "noTime";
        }

        if (
          ((item.over_at && item.look == "2" && isTime > now) ||
            (!item.over_at && item.look == "2")) &&
          ((item.isUserCount == 0 && item.worksPerson > 0) ||
            (item.isUserCount > 0 &&
              0 < item.worksPerson &&
              item.worksPerson < item.isUserCount))
        ) {
          // content = '进行中'
          content = "doing";
        }

        if (
          ((item.over_at && item.look == "2" && isTime > now) ||
            (!item.over_at && item.look == "2")) &&
          item.worksPerson == 0
        ) {
          // content = '未进行'
          content = "nodo";
        }

        if (
          item.look == "2" &&
          item.isUserCount > 0 &&
          item.isUserCount <= item.worksPerson
        ) {
          // content = '已完成'
          content = "is";
        }
        return content;
      };
    },
    courseTextLength() {
      return this.courseText.length;
    },
    taskName() {
      let task = "";
      if (this.checkArray.length) {
        task = "任务";
        this.checkArray = this.checkArray.sort((a, b) => a - b);
        let a = JSON.parse(JSON.stringify(this.checkArray));
        for (let index = 0; index < a.length; index++) {
          a[index]++;
        }
        task += a.join("/");
      }
      return task + " " + this.part;
    },
    choseRoleList() {
      let result = [...this.roleList, ...this.publicRoleList];
      const _index = this.courseText.lastIndexOf("@");
      if (_index !== -1) {
        let roleName = this.courseText.substring(_index + 1);
        result = result.filter(i => i.assistantName.indexOf(roleName) != -1);
      } else {
        return [];
      }
      this.choseRoleItem = 0;
      return result;
    }
  },
  mounted() {
    // this.getChatList().then(_ => {
    //   this.$nextTick(() => {
    //     console.log(this.$refs.chatDialog.scrollHeight);
    //     this.$refs.chatDialog.scrollTop = this.$refs.chatDialog.scrollHeight;
    //   });
    // });
    // if(this.worksArray.length){
    // 	this.worksArray.forEach(el=>{
    // 		this.setJson(el)
    // 	})
    // }
    // this.selectTestType();
    // 添加初始消息
    this.array.push({
      uid: "", // 生成唯一 ID
      aiContent: "选择需要分析的数据，我将为您分析：", // 初始消息内容
      content: "", // 用户内容为空
      loading: false // 不加载
    });
  }
};
</script>

<style scoped>
.ai_body {
  /* height: calc(100% - 158px - 46px);
  width: 500px; */
  height: 100%;
  width: 100%;
  /* margin: 0 auto; */
  display: flex;
  flex-direction: column;
  /* position: fixed; */
  /* z-index: 999; */
  background: #fff;
  /* right: 30px; */
  /* bottom: 10px; */
  padding: 10px 20px;
  box-sizing: border-box;
  /* box-shadow: 0 0 5px 2px #00000045;
  border-radius: 5px; */
  position: relative;
}

.binfo_input {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  display: block;
  min-width: 0;
  outline: none;
  box-sizing: border-box;
  background: none;
  border: none;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  resize: none;
  font-family: "Microsoft YaHei";
  min-height: 48px;
  /* border: 1px solid #3682fc00; */
  border: 1.5px solid #cad1dc;
}

.binfo_textarea {
  border: 1.5px solid #cad1dc;
  font-size: 14px;
  resize: none;
  /* background: #f6f6f6; */
  font-family: "Microsoft YaHei";
}

.binfo_textarea::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
.binfo_textarea::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.1);
}

/*定义滑块 内阴影+圆角*/
.binfo_textarea::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
}

.binfo_input:focus-visible {
  border: 1.5px solid #3681fc !important;
}

.ai_body_input {
  position: relative;
  display: flex;

  margin-top: auto;
  width: 100%;
  /* height: auto; */
  /* max-height: 80vh; */
  justify-content: space-between;
  align-items: flex-end;
  border-radius: 10px;
  border: 1.5px solid #3681fc !important;
  /* padding: 10px;
	padding-top: 20px; */
  /* overflow: auto; */
}

.ai_b_i_btnArea {
  width: calc(100% - 10px);
  position: absolute;
  bottom: calc(100% + 5px);
  height: 30px;
  display: flex;
  /* justify-content: space-between; */
}

.ai_b_i_btnArea > div {
  display: flex;
  align-items: center;
}

.ai_b_i_btnArea > div > span {
  margin-left: 5px;
  cursor: pointer;
}

.ai_b_i_btnArea > .clear + .clear {
  margin-left: 10px;
}

.ai_b_i_btnArea > .clear {
  box-sizing: border-box;
  padding: 5px 10px;
  box-sizing: border-box;
  cursor: pointer;
  border: solid 1px #3781fb;
  border-radius: 15px;
  display: flex;
  font-size: 15px;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.ai_b_i_btnArea > .clear > svg {
  width: 17px;
  height: 17px;
  margin-right: 5px;
  fill: black;
}

.ai_b_i_btnArea > .clear:hover {
  background-color: #ebf4fe;
  color: #409eff;
}

.ai_b_i_btnArea > .clear:hover > svg {
  fill: #409eff;
}

.ai_b_i_textListBox {
  width: 100%;
  height: 300px;
  background-color: #fff;
  position: absolute;
  bottom: calc(100% + 5px);
  box-sizing: border-box;
  padding: 10px;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid #e7e7e7;
  box-shadow: 0 4px 10px 0 rgba(29, 57, 131, 0.08),
    1px 1px 20px 4px rgba(29, 57, 131, 0.05);
  display: flex;
}

.ai_b_i_tlb_left {
  width: 60px;
  height: 100%;
  background-color: red;
}

.ai_b_i_tlb_right {
  flex: 1;
  height: 100%;
  background-color: yellow;
}

.ai_b_i_roleListBox {
  width: 100%;
  height: 300px;
  background-color: #fff;
  position: absolute;
  bottom: calc(100% + 5px);
  box-sizing: border-box;
  padding: 10px;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid #e7e7e7;
  box-shadow: 0 4px 10px 0 rgba(29, 57, 131, 0.08),
    1px 1px 20px 4px rgba(29, 57, 131, 0.05);
}

.ai_b_i_rlb_item {
  width: calc(100% - 20px);
  height: auto;
  padding: 10px;
  background-color: #f3f7fd;
  margin-bottom: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 0.3s;
  cursor: pointer;
}

.ai_b_i_rlb_itemActive {
  background-color: #d1d5db !important;
}

/* .ai_b_i_rlb_item:hover{
	background-color: #d1d5db;
} */

.ai_b_i_rlb_itemTop {
  display: flex;
}

.ai_b_i_rlb_itemTop > img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 100%;
  overflow: hidden;
}

.ai_b_i_rlb_itemTop > div {
  display: flex;
  flex-direction: column;
}

.ai_b_i_rlb_itemTop > div > span {
  font-size: 16px;
  font-weight: bold;
}

.ai_b_i_rlb_itemTop > div > span:last-child {
  font-size: 14px;
  color: #999;
}

.ai_b_i_rlb_itemBottom {
  margin-top: 10px;
  display: flex;
}

.ai_b_i_rlb_itemBottom > span {
  width: 60px;
  height: 30px;
  border-radius: 15px;
  display: flex;
}

.ai_body_input_textarea {
  flex: 1;
  margin: 10px 5px 10px 5px;
  min-height: 35px;
  height: 35px;
  max-height: 100px;
  border: none;
  outline: none;
  resize: none;
  font-size: 16px;
  overflow: auto;
  padding-right: 100px;
  background-color: #fff !important;
}

.ai_body_input_textarea::-webkit-input-placeholder {
  font-size: 16px;
  /* 修改placeholder字体大小 */
  color: grey;
  /* 修改placeholder文字颜色 */
}

.ai_body_input_textarea::-moz-placeholder {
  font-size: 16px;
  /* 修改placeholder字体大小 */
  color: grey;
  /* 修改placeholder文字颜色 */
  opacity: 1;
  /* 修复Firefox的透明度问题 */
}

.ai_body_input_textarea::-moz-placeholder {
  font-size: 16px;
  /* 修改placeholder字体大小 */
  color: grey;
  /* 修改placeholder文字颜色 */
  opacity: 1;
  /* 修复Firefox的透明度问题 */
}

.ai_body_input_textarea::-ms-input-placeholder {
  font-size: 16px;
  /* 修改placeholder字体大小 */
  color: grey;
  /* 修改placeholder文字颜色 */
}

.ai_body_input_textarea::-webkit-scrollbar {
  width: 6px;
}

.ai_body_input_textarea::-webkit-scrollbar-track {
  background: #d8d9dc;
  border-radius: 2px;
}

.ai_body_input_textarea::-webkit-scrollbar-thumb {
  background: #c9c9c9;
  border-radius: 10px;
}

.ai_body_input_textarea::-webkit-scrollbar-thumb:hover {
  background: #c9c9c9;
}

.dialog_diy {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  z-index: 1;
  width: 150vw;
  height: 100vh;
  overflow: hidden;
  transition: none !important;
}

.dialog_diy >>> .el-dialog__header {
  background: #454545 !important;
  padding: 15px 20px;
}

.dialog_diy >>> .el-dialog__header > span {
  color: #fff;
}

.dialog_diy .el-dialog__header .el-dialog__title {
  color: #fff !important;
  /* 替换为您想要的颜色 */
  line-height: 14px;
  font-size: 14px;
}

/* 禁用过渡动画 */
.el-dialog__wrapper {
  animation: none !important;
  /* 禁用外部包裹层的过渡动画 */
}

.el-dialog {
  transition: none !important;
  /* 禁用弹窗内部的动画 */
}

.c_pub_button_confirm {
  /* position: absolute;
    bottom: 13px;
    right: 13px; */
  /* margin-top: 10px; */
  width: 60px;
  margin-right: 5px;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  position: absolute;
  right: 10px;
  bottom: 0px;
  white-space: nowrap;
  border-radius: 10px;
}

.c_pub_button_confirmVoice {
  width: 30px;
  height: 36px;
  min-width: auto;
  margin-right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  position: absolute;
  right: 10px;
  bottom: 0px;
  white-space: nowrap;
  border-radius: 10px;
  background-color: #3681fc;
  cursor: pointer;
  padding: 0 10px;
}

.c_pub_button_confirmVoice > svg {
  fill: #fff;
  width: 25px;
  height: 25px;
}

.c_pub_button_StopConfirmVoice {
  width: 30px;
  height: 36px;
  min-width: auto;
  margin-right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  position: absolute;
  right: 10px;
  bottom: 0px;
  white-space: nowrap;
  border-radius: 10px;
  background-color: #dde2e2;
  cursor: pointer;
  padding: 0 10px;
}

.c_pub_button_StopConfirmVoice > svg {
  width: 25px;
  height: 25px;
}

.c_voiceBtn {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 85px;
  bottom: 0px;
  margin-bottom: 17px;
  cursor: pointer;
}

.c_voiceBtn > svg {
  width: 100%;
  height: 100%;
}

.c_pub_button_confirmDisabled {
  background-color: #aeccfe;
}

.ai_body_dialog {
  padding: 10px 0;
  box-sizing: border-box;
  height: calc(100% - 70px);
  overflow: auto;
  /* min-height: calc(20vh - 10px); */
  /* height: calc(100%); */
  /* overflow: auto; */
  margin-bottom: 10px;
}

.dialog_content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.dialog_content > div {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.dialog_content + .dialog_content {
  margin: 15px 0;
}

.dialog_content > div .right {
  flex-direction: row-reverse;
}

.dialog_content > div .right .role {
  margin-right: 0;
  margin-left: 10px;
}

.dialog_content > div .role {
  min-width: 30px;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 50%;
}

.dialog_content > div .role > img {
  height: 100%;
  width: 100%;
  border-radius: 100%;
}

.dialog_content > div .content {
  padding: 10px 10px;
  border-radius: 2px 8px 8px 8px;
  width: auto;
  word-break: break-word;
  box-sizing: border-box;
  /* white-space: pre-line; */
  max-width: calc(100% - 85px);
  background: #f6f9ff;
  /* overflow: hidden; */
  margin: 0 10px;
  position: relative;
}

.loadingDiv {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 遮罩层样式 */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  /* 半透明黑色 */
  z-index: 10;
  /* 层级 */
}

.loadingDiv2 {
  background-color: #f6f9ff;
  border-radius: 8px;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
  z-index: 20;
  position: fixed;
  padding: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: none !important;
}

.loadingImg {
  width: 30px;
  height: 30px;
}

.guess_title {
  display: flex;
  align-items: center;
}

.guess_title > img {
  width: 16px;
  height: 16px;
}

.guess_title > span {
  font-weight: bold;
}

.guess_item {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 5px;
  margin-top: 10px;
  color: #666666;
  font-size: 14px;
  cursor: pointer;
  border: solid #ffffff 1px;
  box-shadow: 0 0 5px 2px #ffffff;
}

.guess_item:hover {
  border: solid #b8d2fe 1px;
  box-shadow: 0 0 5px 2px #b8d2fe;
}

.createTime {
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: -25px;
  left: 0;
  font-size: 14px;
  white-space: nowrap;
  color: #919191;
}

.dialog_content > div .content2 {
  background: #3681fc;
  color: #fff;
  border-radius: 8px 2px 8px 8px;
  margin-left: auto;
}

.custom-div {
  margin: 20px;
  width: 154px;
  height: 211px;
  border: 2px solid #4398f1;
  box-shadow: 0px 5px 10px rgba(128, 128, 128, 0.5);
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.custom-div.active {
  border: 2px solid blue;
}

.dialog_contentArea {
  margin-top: -17px;
  min-height: 70vh;
  max-height: 70vh;
  /* 设置内容区域的最大高度 */
  overflow-y: auto;
}

.custom-icon {
  background: url("../../../../assets/icon/test/test_upload.png") no-repeat;
  width: 142px;
  height: 142px;
  display: inline-block;
  background-size: contain;
}

.tableClass {
  margin-top: 10px;
  z-index: 5;
}

.tableClass >>> .el-dialog__body {
  padding: 13px 20px;
}

.is {
  color: rgb(57, 204, 127);
  background-color: rgba(57, 204, 127, 0.1);
}

.no {
  color: rgb(235, 154, 96);
  background-color: rgba(235, 154, 96, 0.1);
}

.noTime {
  color: rgb(77, 77, 77);
  background-color: rgba(77, 77, 77, 0.1);
}

.doing {
  color: rgb(54, 116, 231);
  background-color: rgba(54, 116, 231, 0.1);
}

.nodo {
  color: rgb(97, 184, 255);
  background-color: rgba(97, 184, 255, 0.1);
}

.test_type2 {
  font-size: 14px;
  border-radius: 5px;
  /* border: 1.5px solid; */
  padding: 3px 8px;
}
.student_bottom {
  display: flex;
  justify-content: space-between;
}
.pageCount {
  display: flex;
  align-items: center;
}
.student_head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 0 0;
}

.choose {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-between;
  height: 100%;
  justify-content: flex-start;
  /* width: 60%; */
  /* min-width: 868px; */
  align-items: center;
}

.choose > div {
  /* margin-left: 10px; */
  width: 180px;
  /* margin-top: 15px; */
}

.choose > div + div {
  margin-left: 10px;
}

.choose > .clear {
  width: 70px;
}

.student_search {
  display: flex;
  align-items: center;
  /* width: calc(100% / 3); */
  width: 190px;
}

.head_left {
  display: flex;
}

.student_input >>> .el-input__inner {
  height: 40px;
  width: 190px;
  font-size: 13px;
  padding: 0 10px;
}

.serach_icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background: url("../../../../assets/icon/test/test_search.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.ai_body_select {
  position: relative;
}

.ai_body_select > .check {
  background: #e7e7e7;
  display: flex;
  width: fit-content;
  padding: 0 10px;
  height: 30px;
  border-radius: 21px;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  color: #0061ff;
  font-weight: 700;
  margin: 10px 0;
  cursor: pointer;
}

.ai_body_select > .check::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background-image: url("../../../../assets/icon/course/aiPart.png");
  background-size: 100% 100%;
  margin-right: 5px;
}

.ai_body_select > .check::after {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background-image: url("../../../../assets/icon/course/aiPart_arrow.png");
  background-size: 100% 100%;
  margin-right: 5px;
}

.ai_body_select > .isCheck {
  background: #0061ff;
  display: flex;
  width: fit-content;
  padding: 0 10px;
  height: 30px;
  border-radius: 21px;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  margin: 10px 0;
  cursor: pointer;
  max-width: 100%;
  box-sizing: border-box;
}

.ai_body_select > .isCheck > span {
  width: calc(100% - 40px);
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ai_body_select > .isCheck::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background-image: url("../../../../assets/icon/course/aiPart_active.png");
  background-size: 100% 100%;
  margin-right: 5px;
}

.ai_body_select > .isCheck::after {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background-image: url("../../../../assets/icon/course/aiPart_arrow_active.png");
  background-size: 100% 100%;
  margin-right: 5px;
}

.ai_body_select > .checkBox {
  position: absolute;
  bottom: 40px;
  border: 1px solid #e0eafb;
  width: 100%;
  height: 300px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}

.ai_body_select > .checkBox > .task > .title,
.ai_body_select > .checkBox > .part > .title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
}

.ai_body_select > .checkBox > .task {
  height: calc(100% - 60px);
}

.ai_body_select > .checkBox > .part {
}

.ai_body_select > .checkBox > .task > .content {
  height: calc(100% - 40px);
  overflow: auto;
}

.ai_body_select > .checkBox > .task > .content > .span + .span {
  margin-top: 5px;
}

.ai_body_select > .checkBox > .task > .content > .span {
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}

.ai_body_select > .checkBox > .task > .content > .span > .check {
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  margin-right: 5px;
}

.ai_body_select > .checkBox > .task > .content > .span > .check > img {
  width: 100%;
  height: 100%;
}

.ai_body_select > .checkBox > .part > .content {
  display: flex;
  align-items: center;
  font-size: 14px;
  justify-content: space-between;
}

.ai_body_select > .checkBox > .part > .content > .span {
  padding: 3px 6px;
  border: 1px solid #e0eafb;
  border-radius: 40px;
  cursor: pointer;
}

.ai_body_select > .checkBox > .part > .content > .span.active {
  color: #0061ff;
  border-color: #0061ff;
}

.jlist_box {
  background: #f1f1f1;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 8px 18px 8px 8px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.jlist_box .cancel {
  position: absolute;
  top: 8px;
  right: 5px;
  cursor: pointer;
  font-size: 14px;
}

.jlist_box > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.ai_btn_box {
  min-width: fit-content;
  margin-top: auto;
  display: flex;
  flex-direction: column;
}

.ai_btn_box > img {
  cursor: pointer;
  width: 15px;
  margin-bottom: 10px;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 50px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: blue;
}

.popoverBox {
  width: auto;
  height: auto;
  position: relative;
  margin-bottom: 10px;
}

.btnBox {
  width: 15px;
  height: 15px;
}

.btnBox > img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.showBox {
  width: 60px;
  height: auto;
  padding: 10px;
  position: absolute;
  left: calc(100% + 10px);
  top: 0px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.showBox > span {
  width: 100%;
  height: auto;
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  background-color: #fff;
  transition: 0.3s;
  font-size: 16px;
}

.showBox > span:hover {
  background-color: #e2e2e2;
}

.eChartView {
  width: 100%;
  min-width: 500px;
  height: 400px;
}

.echartBtn {
  /* border-color: #66b1ff;
  background: none;
  color: #66b1ff; */
  color: #5087EC;
  margin-top: 10px;
  font-weight: bold;
  cursor: pointer;

}

.echartBtn>img{
  width: 15px;
  height: 15px;
  margin-right: 10px;
}

.echartBtn:hover{
  text-decoration: underline;
}

.ai_b_addNewChat{
  width: 40px;
  height: 40px;
  z-index: 99;
  box-sizing: border-box;
}

.ai_b_addNewChat>span{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  border-radius: 50%;
  cursor: pointer;
  color: #1296DB;
  box-sizing: border-box;
  /* border: solid 1px #1296DB; */
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, .2) 2px 2px 8px 0px;
}
</style>