<!-- 用户编辑弹窗 -->
<template>
  <div class="page">
    <a-list
      class="comment-list"
      item-layout="horizontal"
      :data-source="notice"
    >
      <template #renderItem="{ item }">
          <a-list-item :class="`ele-body bg-${item.channel}`">
            <a-comment v-if="item.channel === 0" :avatar="item.avatar">
              <template #content>
                <div class="content"><byte-md-viewer :value="item.content" :plugins="plugins" /></div>
              </template>
              <template #datetime>
                <a-tooltip :title="item.createTime">
                  <span>{{ timeAgo(item.createTime) }}</span>
                </a-tooltip>
              </template>
              <template #actions>
                <a-space>
                  <a-button type="dashed" :size="'small'" class="ele-text-placeholder" @click="copyText(item.content)">复制</a-button>
                  <a-button type="dashed" :size="'small'" class="ele-text-placeholder" @click="remove(item)">删除</a-button>
                </a-space>
              </template>
            </a-comment>
            <a-comment v-if="item.channel === 1" :avatar="'https://file.wsdns.cn/20230325/2ce2f25fd6054309bed811213bd00a09.jpg'">
              <template #content>
                <div class="content" @touchstart="onTouch(item.content)"><byte-md-viewer :value="item.content" :plugins="plugins" /></div>
              </template>
              <template #datetime>
                <a-tooltip :title="item.createTime">
                  <span>{{ timeAgo(item.createTime) }}</span>
                </a-tooltip>
              </template>
              <template #actions>
                <a-space>
                  <a-button type="dashed" :size="'small'" class="ele-text-placeholder" @click="copyText(item.content)">复制</a-button>
                  <a-button type="dashed" :size="'small'" class="ele-text-placeholder" @click="remove(item)">删除</a-button>
                </a-space>
              </template>
            </a-comment>
          </a-list-item>
      </template>
      <a-pagination v-model:current="page" :total="total" style="display: flex; justify-content: center; padding:30px 0;" @change="onPage" />
    </a-list>
    <a-empty class="empty" v-if="notice.length === 0" />
    <a-card class="foot">
      <div class="send-box">
        <div class="left"></div>
        <a-space>
          <a-input
            v-model:value="content"
            placeholder="我是AI机器人，你想和我聊点什么?"
            size="large"
            :disabled="loading"
            class="chat-input"
            @pressEnter="onSend"
          >
            <template #suffix>
              <send-outlined @click="onSend" />
            </template>
          </a-input>
        </a-space>
      </div>
    </a-card>
    <a-back-top />
  </div>
</template>

<script lang="ts" setup>
import "bytemd/dist/index.min.css";
import { ref } from "vue";
import "github-markdown-css/github-markdown-light.css";
// // 链接、删除线、复选框、表格等的插件
import gfm from "@bytemd/plugin-gfm";
// // 插件的中文语言文件
import zh_HansGfm from "@bytemd/plugin-gfm/locales/zh_Hans.json";
// 中文语言文件
import "bytemd/dist/index.min.css";
import highlight from "@bytemd/plugin-highlight-ssr";
import "highlight.js/styles/default.css";
import { message} from "ant-design-vue";
import { storeToRefs } from "pinia";
import { timeAgo } from 'ele-admin-pro';
import { useThemeStore } from "@/store/modules/theme";
import { uploadFile } from "@/api/system/file";
import type { Notice } from "@/api/oa/notice/model";
import { FILE_SERVER } from "@/config/setting";
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
import { listNotice, pageNotice, removeNotice } from "@/api/oa/notice";
import { chat, send } from "@/api/oa/chatgpt";
import { copyText, isImage } from "@/utils/common";
import {
  SendOutlined
} from '@ant-design/icons-vue';

// 插件
const plugins = ref([
  gfm({
    locale: zh_HansGfm
  }),
  highlight()
]);

// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
// 请求状态
const loading = ref(false);
const noticeId = ref(0);
const content = ref('');
const files = ref<ItemType[]>([]);
const notice = ref<any>([]);
const total = ref<any>(0);
const page = ref<any>(1);

/* 上传事件 */
const uploadHandler = (file: File) => {
  const item: ItemType = {
    file,
    uid: (file as any).uid,
    name: file.name
  };
  if (!file.type.startsWith("image")) {
    message.error("只能选择图片");
    return;
  }
  if (file.size / 1024 / 1024 > 2) {
    message.error("大小不能超过 2MB");
    return;
  }
  onUpload(item);
};

const onUpload = (d: ItemType) => {
  uploadFile(<File>d.file)
    .then((result) => {
      files.value.push({
        uid: result.id,
        url: FILE_SERVER + result.path,
        name: isImage(result.path) ? 'image' : result.name,
        status: "done"
      });
      message.success("上传成功");
    })
    .catch((e) => {
      message.error(e.message);
    });
};

/* 向chatGPT提问 */
const onSend = () => {
  send({
    tenantId: Number(localStorage.getItem('tenantId')),
    content: content.value
  }).then((noticeId) => {
    query();
    onChat(noticeId);
  })
}

const onChat = (noticeId) => {
  chat({
    tenantId: Number(localStorage.getItem('tenantId')),
    content: content.value,
    noticeId
  }).then(() => {
    query();
    content.value = '';
  })
}

const onTouch =(content) => {
  setTimeout(function () {
    copyText(content)
  }, 500);
}

const onPage = (e) => {
  page.value = e;
  query();
}

/* 删除单个 */
const remove = (row: Notice) => {
  const hide = message.loading('请求中..', 0);
  removeNotice(row.noticeId)
    .then((msg) => {
      hide();
      message.success(msg);
      query();
    })
    .catch((e) => {
      hide();
      message.error(e.message);
    });
};

const query = () => {
  listNotice({limit: 1})
    .then((response) => {
      notice.value = response
    })
    .catch((e) => {
      message.error(e.message);
    });
};

query();
</script>
<script lang="ts">
export default {
  name: "ChatGPT"
};
</script>
<style lang="less" scoped>
*{
  max-width: 100% !important;
}
.page{
  background-color: #ffffff;
  .comment-list{
    .bg-0{
    }
    .bg-1{
      background-color: #ffffff !important;
    }
    width: 1000px !important;
    margin: 0 auto 40px auto;
  }
  .chat-item{
    display: flex;
    justify-content: space-between;
  }
  .content {
    max-width: 100%;
    padding: 0;
    .edit-md {
      margin-top: 50px;
    }
  }
  .foot{
    position: fixed;
    width: 100%;
    background-color: #f3f9ff;
    bottom: 0;
    height: 100px;
    //display: flex;
    //justify-content: center;
    .send-box{
      display: flex;
      margin-left: 0;
      .chat-input{
        width: 340px;
      }
    }
  }
  .user-avatar{
    padding: 20px 0;
  }
  .openai{
    background-image: url("@/assets/icon/openai-avatar.jpeg");
    background-size: 100%;
  }
  .markdown-body{
    background: none;
  }
  .empty{
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .action{
    padding: 20px 0;
    display: flex;
    justify-content: flex-end;
  }
  .copy-btn{display: flex; justify-content: flex-end;}
}
@media screen and (min-width:1200px) {
  .send-box{
    display: flex;
    justify-content: start;
    .left{
      width: 320px;
    }
  }
}
@media screen and (max-width:768px) {
  .send-box{
    display: flex;
    justify-content: center !important;
  }
}
</style>
