<template>
  <div class="app-containere">
    <div class="material">
      <div class="title">
        <img src="@/assets/images/caseIcon.png" alt="" />
        <span>任务素材</span>
      </div>
      <div>
        <p>
          根据内容主题，利用推荐的三个AI工具，撰写相关的文章。
          <br />
          1、撰写博客文章：假设你是一个美食博客的作者，想要撰写一篇关于“如何推荐外地游客品尝本地美食”的文章。
          <br />
          2、编写产品描述：你是一家电子商务公司的营销人员，需要为一款新型智能手表编写产品描述，突出其独特功能和设计。
          <br />
          3、撰写研究报告摘要：你是一名研究人员，需要为一篇关于“可持续发展城市”的研究报告撰写摘要。
        </p>
      </div>
    </div>
    <div class="material">
      <div class="title">
        <img src="@/assets/images/步骤.png" alt="" />
        <span>任务提交</span>
        <span style="font-size: 13px">(请按照任务素材顺序依次提交)</span>
      </div>
      <div style="margin-top: 10px; width: 200px">
        <el-upload ref="uploadRef" class="upload-demo" :file-list="previewFile1" :auto-upload="false" :on-change="handleChange1" :show-file-list="true" :limit="1">
          <el-button type="primary" class="uploadBtn">+任务提交1</el-button>
        </el-upload>
      </div>
      <div style="margin-top: 10px; width: 200px">
        <el-upload ref="uploadRef" class="upload-demo" :file-list="previewFile2" :auto-upload="false" :on-change="handleChange2" :show-file-list="true" :limit="1">
          <el-button type="primary" class="uploadBtn">+任务提交2</el-button>
        </el-upload>
      </div>
      <div style="margin-top: 10px; width: 200px">
        <el-upload ref="uploadRef" class="upload-demo" :file-list="previewFile3" :auto-upload="false" :on-change="handleChange3" :show-file-list="true" :limit="1">
          <el-button type="primary" class="uploadBtn">+任务提交3</el-button>
        </el-upload>
      </div>
    </div>
    <div class="material" style="margin-top: 20px">
      <div class="title">
        <img src="@/assets/icons/svg/sxbg.svg" style="width: 30px; height: 30px" />
        <span>大模型参考工具</span>
      </div>
      <div style="display: flex">
        <div class="case">
          <div class="bgItem">
            <img src="@/assets/images/1723156589-image.png" alt="" />
          </div>
          <div class="detail">
            <div class="title">讯飞写作</div>
            <el-tooltip popper-class="tooltip" effect="light" content="讯飞写作是科大讯飞推出的一款智能AI写作助手，它基于科大讯飞的星火大模型，专注于写作、创作、学习等办公场景的应用，为各行各业提供AIGC新质生产力工具。用户可以通过讯飞写作快速生成新闻稿件、种草文案、品宣策划、工作总结、心得体会等各类文本内容。它支持AI对话写作、多场景模板、AI工具润色改写扩写缩写续写、AI文生图图生图、素材辅助写作等功能，全面提升用户的写作效率。" placement="top-start">
              <div style="line-height: 24px; font-size: 13px">讯飞写作是科大讯飞推出的一款智能AI写作助手，它基于科大讯飞的星火大模型，专注于写作、创作、学习等办公场景的应用，为各行各业提供AIGC新质生产力工具。用户可以通过讯飞写作快...</div>
            </el-tooltip>
            <a class="btn" href=" https://huixie.iflyrec.com/" target="_blank">
              <span>访问官网</span>
            </a>
          </div>
        </div>
        <div class="case">
          <div class="bgItem">
            <img src="@/assets/images/huoshan.png" alt="" />
          </div>
          <div class="detail">
            <div class="title">火山写作</div>
            <el-tooltip popper-class="tooltip" effect="light" content="火山写作是由字节跳动推出的一款中英文AI写作助手，它集成了创作、润色、纠错、改写、翻译等多种功能，旨在帮助用户提高写作质量和效率。此外，火山写作还提供了一系列实用工具，比如博客文章生成器、小红书文案生成器、SEO元标签、知乎回答、电商产品描述等，以支持内容创作和营销活动。" placement="top-start">
              <div style="line-height: 24px; font-size: 13px">火山写作是由字节跳动推出的一款中英文AI写作助手，它集成了创作、润色、纠错、改写、翻译等多种功能，旨在帮助用户提高写作质量和效率。此外，火山写作还提供了一系列实用工具，比如博客文章生成器...</div>
            </el-tooltip>
            <a class="btn" href="https://www.writingo.net/" target="_blank">
              <span>访问官网</span>
            </a>
          </div>
        </div>
        <div class="case">
          <div class="bgItem">
            <img src="@/assets/images/Pasted-628.png" alt="" />
          </div>
          <div class="detail">
            <!-- <div class="icon">
              <div class="iconItem">AI工具</div>
              <span>＞</span>
              <div class="iconItem">AI写作对话</div>
            </div> -->
            <div class="title">豆包AI</div>
            <el-tooltip popper-class="tooltip" effect="light" content="豆包AI是由字节跳动公司开发的一款多功能人工智能助手，它具备强大的对话能力、个性化互动、文案创作与优化、文档阅读与深度分析、文本到图片生成、AI音乐生成、学习辅助工具、信息搜索与整合、日常生活与工作规划、个性化AI智能体创建等功能。" placement="top-start">
              <div style="line-height: 24px; font-size: 13px">豆包AI是由字节跳动公司开发的一款多功能人工智能助手，它具备强大的对话能力、个性化互动、文案创作与优化、文档阅读与深度分析、文本到图片生成、AI音乐生成、学习辅助工具、信息搜索与整合...</div>
            </el-tooltip>
            <a class="btn" href="https://www.doubao.com/chat/" target="_blank">
              <span>访问官网</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import popModal from "@/views/components/popModal.vue";
import { getUserInfo } from "@/utils/auth";
import * as portraitModel from "@/api/portraitModel";
import { uploadFile } from "@/api/portraitModel";
import { downBlobFile } from "@/utils/index.js";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
});
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const previewFile1 = ref([]);
const previewFile2 = ref([]);
const previewFile3 = ref([]);
const fileList1 = ref([]);
const fileList2 = ref([]);
const fileList3 = ref([]);
const handleChange1 = async (info) => {
  fileList1.value = [];
  fileList1.value.push(info);
  let formData = new FormData();
  formData.append("file", fileList1.value[0].raw);
  formData.append("userId", JSON.parse(getUserInfo()).userId);
  formData.append("module", "AI写作");
  formData.append("count", 1);
  try {
    previewFile1.value = [];
    const res = await uploadFile(formData);
    // registerParams.value.imgAddress = res.data;
    proxy.$modal.msgSuccess("上传成功！");
    previewFile1.value.push({
      name: fileList1.value[0].raw.name,
    });
    // getMessage();
  } catch (e) {
    // console.log(e);
  }
};
const handleChange2 = async (info) => {
  fileList2.value = [];
  fileList2.value.push(info);
  let formData = new FormData();
  formData.append("file", fileList2.value[0].raw);
  formData.append("userId", JSON.parse(getUserInfo()).userId);
  formData.append("module", "AI写作");
  formData.append("count", 2);
  try {
    previewFile2.value = [];
    const res = await uploadFile(formData);
    // registerParams.value.imgAddress = res.data;
    proxy.$modal.msgSuccess("上传成功！");
    previewFile2.value.push({
      name: fileList2.value[0].raw.name,
    });
    // getMessage();
  } catch (e) {
    // console.log(e);
  }
};
const handleChange3 = async (info) => {
  fileList3.value = [];
  fileList3.value.push(info);
  let formData = new FormData();
  formData.append("file", fileList3.value[0].raw);
  formData.append("userId", JSON.parse(getUserInfo()).userId);
  formData.append("module", "AI写作");
  formData.append("count", 3);
  try {
    previewFile3.value = [];
    const res = await uploadFile(formData);
    // registerParams.value.imgAddress = res.data;
    proxy.$modal.msgSuccess("上传成功！");
    previewFile3.value.push({
      name: fileList3.value[0].raw.name,
    });
    // getMessage();
  } catch (e) {
    // console.log(e);
  }
};
// 监听props.info
watch(
  () => props.info,
  (newVal) => {
    if (newVal && newVal.length > 0) {
      newVal.forEach((item) => {
        item.name = item.fileName;
        item.uid = Date.now();
      });
      if (newVal[0]) previewFile1.value = [newVal[0]];
      if (newVal[1]) previewFile2.value = [newVal[1]];
      if (newVal[2]) previewFile3.value = [newVal[2]];
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.app-containere {
  margin: 10px 4px 10px 10px;
  border: 1px solid #0452c6;
  //   background-color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 29, 64, 0.5);
  padding: 25px;
  color: #fff;
  .material {
    .title {
      display: flex;
      align-items: center;
      font-size: var(--student-fs-h1);
      span {
        margin-left: 10px;
      }
    }
    p {
      font-size: var(--student-fs-body);
      line-height: 30px;
    }
    .case {
      margin-right: 18px;
      padding: 10px;
      padding-top: 20px;
      padding-bottom: 20px;
      color: #fff;
      margin-top: 10px;
      //   width: calc(100% - 100px);
      width: 500px;
      //   background: #fff;
      //   background: #002c5b;
      background: #011031;
      border-radius: 10px;
      border: 1px solid #003e7c;
      display: flex;
      align-items: center;

      .bgItem {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          // 186px
          width: 258px;
          height: 134px;
          border-radius: 5px;
          scale: 0.8;
        }
        // background-color: #e6e8ed;
        background-color: #002c5b;
        width: 240px;
        height: 170px;
        // padding: 20px;
        border-radius: 10px;
        box-shadow: 0 30px 20px -20px rgba(0, 0, 0, 0.15);
      }
      .detail {
        width: 300px;
        margin-left: 20px;
        .icon {
          display: flex;
          align-items: center;
          span {
            color: #f1404b;
          }
          .iconItem {
            background-color: #f1404b;
            color: #fff;
            font-size: var(--student-fs-caption);
            padding: 2px;
            border-radius: 4px;
            padding-left: 4px;
            padding-right: 4px;
          }
        }
        .title {
          font-size: var(--student-fs-display);
          font-weight: bold;
          margin-top: 5px;
          margin-bottom: 5px;
          // font-weight: bold;
        }
        .btn {
          display: block;
          background-color: #e7e6e8;
          color: #333;
          width: 90px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border-radius: 5px;
          margin-top: 10px;
          cursor: pointer;
        }
        .btn:hover {
          background-color: #409eff;
          color: #fff;
        }
      }
    }
  }
}
</style>
<style>
.tooltip {
  max-width: 260px;
}
</style>
