<template>
  <div style="display: flex;justify-content: center;align-items: center;height: 500px;">
    <div v-if="loading" style="position: relative;">
      <img style="width: 220px;" src="../../assets/icon/course/FrameXK.gif"  alt="">
      <div class="loadCss">{{ lang.ssLoadingWordCloud }}</div>
    </div>
	  <div v-if="!loading" class="chart" id="charts_canvas" ref="chartRef"></div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import * as echarts from 'echarts';
import "echarts-wordcloud";
export default {
  name: "cloudWork",
  props: {
    dialogVisibleWordCloud: {
      type: Boolean
    },
    // 测试数据
    cloudData: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
        chartObj:"",
        loading:false
    }
  },

  mounted() {
    this.addNephogram();
  },
  methods: {
    //添加云图
    addNephogram() {
      if (!this.cloudData.length) return

        this.loading=true
      const _msg = `NOTICE
        Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
        ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
        Instruction: Based on the context, follow "Format example", write content.

        ## 任务

        请基于以下学生回答，提炼出10-20个答案，用于绘制词云图。

        ## 要求

        1. **提取关键词**：从提供的答案文本中提取出10-20个最具代表性的答案。
        2. **词频统计**：计算每个关键字在文本中出现的频率。
        3. **词汇大小**：根据词频数量，确定每个关键字在词云图中的大小。词频越高，词汇大小数值越大，数值范围1-100。
        4. **输出格式**：输出结果应包含每个关键字、对应的词频数量以及词汇大小数值。

        ## 输出格式

        ### 输出格式

        [
            {"value":1,"name":"氯化钠","textStyle":{"color":"#ee7959"}},
            {"value":2,"name":"溶液","textStyle":{"color":"#db9b34"}},
            {"value":1,"name":"实验","textStyle":{"color":"#9d9d82"}},
            {"value":3,"name":"质量分数","textStyle":{"color":"#ea5514"}},
            {"value":1,"name":"溶质","textStyle":{"color":"#c8161d"}},
            {"value":2,"name":"氢氧化钠","textStyle":{"color":"#e60012"}},
            {"value":1,"name":"溶解度","textStyle":{"color":"#1e2732"}},
            {"value":4,"name":"饱和溶液","textStyle":{"color":"#e3adb9"}}
        ]

        请仅仅输出表头，输出关键词和相应的内容，无需其它任何说明文字。
        冒号、逗号等符号均使用英文字符。

        ### 输出示例

        [
            {"value":1,"name":"氯化钠","textStyle":{"color":"#ee7959"}},
            {"value":2,"name":"溶液","textStyle":{"color":"#db9b34"}},
            {"value":1,"name":"实验","textStyle":{"color":"#9d9d82"}},
            {"value":3,"name":"质量分数","textStyle":{"color":"#ea5514"}},
            {"value":1,"name":"溶质","textStyle":{"color":"#c8161d"}},
            {"value":2,"name":"氢氧化钠","textStyle":{"color":"#e60012"}},
            {"value":1,"name":"溶解度","textStyle":{"color":"#1e2732"}},
            {"value":4,"name":"饱和溶液","textStyle":{"color":"#e3adb9"}}
        ]

        ## 学生回答 
        ${this.cloudData ? this.cloudData : ""}
        `;
      const _uuid = uuidv4();
      let params = {
        temperature: 0,
        max_tokens: 4096,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0,
        messages: [{ role: "user", content: _msg }],
        uid: _uuid,
        mind_map_question: "",
        stream: false,
        model: "gpt-4o-2024-11-20"
      };
      this.ajax
        .post("https://gpt4.cocorobo.cn/chat", params)
        .then(res => {
          let _data = res.data.FunctionResponse.choices[0];
          let _jsonData = _data.message.content;
          _jsonData = _jsonData.replaceAll("```json", "").replaceAll("```", "");
          let _result = JSON.parse(_jsonData);
          console.log('_result',_result);

          let poi = {
            tooltip: {
              show: false
            },
            series: [
              {
                type: "wordCloud",
                sizeRange: [14, 38],
                rotationRange: [0, 0],
                keepAspect: false,
                shape: "circle",
                left: "center",
                top: "center",
                right: null,
                bottom: null,
                width: "90%",
                height: "90%",
                rotationRange: [-90, 90],
                rotationStep: 45,
                data: _result
              }
            ]
          }
          console.log('poi',poi);
          this.getChartData(poi)
        //   this.saveData(poi)
        })
        .catch(e => {
          console.log(e);
          this.$message.error(this.lang.ssWordCloudFail);
          this.loading=false

        })
        .finally(_ => {
        });
    },
   
    getChartData(poi) {	
        this.loading=false
        setTimeout(() => {
          this.chartObj = echarts.init(this.$refs.chartRef);
          this.chartObj.setOption(poi);
          window.addEventListener("resize", () => {
                  this.chartObj.resize();
          });
        }, 100);
       
	},
  }
};
</script>

<style scoped>
.chart {
	width: 100%;
	height: 500px;
	background-color: #fff;
  margin: auto;
}
.loadCss{
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    width: 100%;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(54, 129, 252, 1);
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translate(-50%,0);
}
</style>
