<script setup lang="ts">
import icon from '../images/icon_ai_test@2x.png'
import CodeBlock from './CodeBlock.vue'
import moment from 'moment'
import MarkdownIt from 'markdown-it'
import 'github-markdown-css/github-markdown.css'

const PromptdialogVisible = ref(false)
const testquestionvalue = ref('')
const previewLoading = ref(false)

const props = defineProps({
  prompttext: {
    type: String
  },
  testquestion: {
    type: Boolean,
    default: true
  },
  promptValue: {
    type: Array
  },
  
})

const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  breaks: true
})

const renderedMessage = (content) => {
  return md.render(content)
}

const prompttext = ref(props.prompttext)
const testquestion = ref(props.testquestion)
watch(
  () => props.prompttext,
  (current) => {
    prompttext.value = current
  }
)
watch(
  () => props.testquestion,
  (current) => {
    testquestion.value = current
  }
)

const handleclickprompt = () => {
  PromptdialogVisible.value = true
}

// 导出为txt
const exporttxt = () => {
  // 创建 Blob 对象
  const blob = new Blob([prompttext.value], { type: 'text/plain' })
   // 创建下载链接
   const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  const currentDate = moment();
  const formattedDate = currentDate.format('YYYY-MM-DD HH:mm');
  link.download = `${formattedDate} Prompt.txt` // 自定义文件名
  
  // 触发下载
  link.click()
  
  // 清理内存
  URL.revokeObjectURL(link.href)
}

const unformattedJson = ref({})
const testtype = ref('')

const PromptAITest = (val:any) => {
  if(testquestion.value == false) {
    unformattedJson.value = {}
    previewLoading.value = true
    $api.PromptAITest({
      test_ai_method: val,
      test_question: testquestionvalue.value,
      prompt: prompttext.value
    }).then((res) => {
      if (res.code === 200) {
        previewLoading.value = false
        unformattedJson.value = res.data.data
        testtype.value = res.data.type
      }
    })
  }
}


</script>

<template>
  <div>
    <div class="preview">
      <div class="preview_title">
        新的prompt预览
        <el-button class="el-button--default" @click="handleclickprompt"><span class="font_family icon-icon_view_b icon_dark" style="margin-right: 5px;" ></span>查看完整Prompt</el-button>
      </div>
      <el-dialog
        v-model="PromptdialogVisible"
        width="1000px"
        :modal="false"
        align-center
        :close-on-click-modal="false"
      > 
        <template #header>
          <div class="dialog-header">
            <div style="width: 55%;display: flex;justify-content: end;">查看完整Prmopt</div>
            <el-button class="el-button--default" @click="exporttxt"><span class="font_family icon-icon_import_b icon_dark" style="margin-right: 5px;" ></span>导出完整日志</el-button>
          </div>
        </template>
        <pre class="diaolog-content">
          {{ prompttext }}
        </pre>
      </el-dialog>
      <div class="preview_content" v-if="promptValue.length == 0">暂无数据</div>
      <div class="preview_content" v-else>
        <div class="preview_content_title">提示词摘要</div>
        <div class="preview_content_item" v-for="(item, index) in promptValue" :key="index">{{ item }}</div>
      </div>
    </div>
    <div class="test">
      <div class="test_title">
        测试问题
      </div>
      <div class="test_diabled" v-if="testquestion">
        请设置<span class="test_disabled_bold">系统角色+表结构+响应规则+输出格式</span>后再进行测试
      </div>
      <div v-else>
        <el-input type="textarea" v-model="testquestionvalue"></el-input>
      </div>
      <div class="test_flex">
        <div class="test_button" :class="{opacity: testquestion}" @click="PromptAITest('DS')">
          <div class="test_button_color"><img :src="icon" width="16px" /> Test with DS</div>
        </div>
        <div class="test_button" :class="{opacity: testquestion}" @click="PromptAITest('Claude')">
          <div class="test_button_color"><img :src="icon" width="16px" />Test with Claude</div>
        </div>
      </div>
      <div class="test_title">
        测试结果
      </div>
      <div class="test_result"  v-vloading="previewLoading">
        <div v-if="Object.keys(unformattedJson).length == 0" class="test_result_text">暂无数据</div>
        <div v-else style="width: 100%;">
          <div style="padding: 8px;" v-if="testtype == 'markdown'" v-html="renderedMessage(unformattedJson)" class="markdown-body markdown-test"></div>
          <CodeBlock v-else language="json" :raw-code="JSON.stringify(unformattedJson)">
          </CodeBlock>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.preview {
  background: var(--color-prompt-preview-bg);
  padding: 16px;
}
.preview_title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-neutral-1);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.preview_content {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-neutral-3);
}
.test {
  padding: 0 16px;
}
.test_title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-neutral-1);
  margin: 17px 0 8px 0;
}
.test_diabled {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--color-prompt-disabled-border);
  background-color: var(--color-prompt-disabled-bg);
  color: var(--color-neutral-3);
  font-size: 12px;
  font-weight: 400;
}
.test_disabled_bold {
  font-weight: 700;
  color: var(--color-neutral-3);
  font-size: 12px;
}
.test_flex {
  display: flex;
  margin-top: 8px;
}
.test_button {
  border: 2px solid transparent;
  border-radius: 12px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to bottom, var(--color-mode), var(--color-mode)), linear-gradient(to bottom, #FF7500, #8112FF);
  padding: 8px;
  margin-right: 8px;
  cursor: pointer;
}
.test_button_color {
  background: linear-gradient(90deg, var(--1-gradient-ai-robot-0, #FF7500) 1.87%, var(--1-gradient-ai-robot-100, #8112FF) 56.62%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.test_result {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  background-color: #2B2F36;
  color: rgba(240, 241, 243, 0.30);
  border:1px solid var(--color-border);
  border-radius: 6px;
  position: relative;
}
.test_result_text {
  color: rgba(240, 241, 243, 0.30);
}
.opacity {
  opacity: 0.3;
  cursor: no-drop;
}
.preview_content_title {
  font-weight: 400;
  font-size: 14px;
  color: var(--color-neutral-1);
}
.preview_content_item {
  font-weight: 400;
  font-size: 14px;
  color: var(--color-neutral-2);
  margin: 8px 0;
}
.preview_content_item:last-child{
  margin-bottom: 0;
}
.el-button--default {
  width: 158px;
  height: 40px;
  background-color: transparent;
}
.diaolog-content {
  background-color: var(--color-prompt-diaolog-bg);
  padding: 8px;
  max-height: 720px;
  line-height: 21px; 
  overflow-y: scroll;
  white-space: break-spaces;
}
:deep(.el-dialog) {
  min-height: 800px;
}
.dialog-header {
  height: 48px;
  width: 95%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:deep(.el-dialog__header ) {
  padding: 0;
  height: 48px;
}
:deep(.v-loading-spinner) {
  transform: translateY(30%);
}
:deep(.circular) {
  width: 30px;
  height: 30px;
}
</style>