<template>
  <div style="display: flex">
    <el-input v-model="message[0].content" style="width: 240px" placeholder="Please input" /><el-button type="primary" @click="main()">启动！</el-button>
    <div class="box1" v-html="markdown.render(reasoning_content)"></div>
    <div class="box" v-html="markdown.render(content)"></div>

  </div>
</template>

<script setup>
import OpenAI from "openai";
import {onMounted, ref} from "vue";
import MarkdownIt from "markdown-it";
import myAxios from "@/api/myAxios";



const content = ref('')
const reasoning_content = ref('')
const msg = ref('')
const markdown = new MarkdownIt()
const productNum = ref('')

onMounted(()=>{
  // console.log(123123)
  // main()
  getTotalProduct()
})

const message = ref([
  {
    role: "user",
    content: ""
  }
])

const getTotalProduct = async ()=> {
  const res = await myAxios.get('/global/getAllGoods')
  if(res.data.code === 1) {
    // message.value[1].content = JSON.stringify(Object.entries(res.data.data))
  }
  console.log(JSON.stringify(Object.entries(res.data.data)));
  // JSON.stringify(Object.fromEntries(map))
}


const openAI = new OpenAI({
  baseURL: 'https://api.deepseek.com',
  apiKey: 'sk-d9ab76d589d642f19198ed92acd182c5',
  dangerouslyAllowBrowser: true
});

const main = async () => {
  const completion = await openAI.chat.completions.create({
    model:'deepseek-reasoner',
    messages: message.value,
    stream: true
  });

  for await ( const chunk of completion) {
    // console.log('chunk--->',chunk)
    if(chunk.choices[0].delta.reasoning_content != null) {
      reasoning_content.value += chunk.choices[0].delta.reasoning_content
    }
    if(chunk.choices[0].delta.content != null) {
      content.value += chunk.choices[0].delta.content
    }
    if(chunk.choices[0].finish_reason === 'stop') {
      break;
    }
  }
  // console.log(content)
}

</script>

<style scoped>
.box1{
  width: 500px;
  height: 100%;
  border: 1px solid red;
}
.box {
  width: 500px;
  height: 100%;
  border: 1px solid black;
}
</style>