<script lang="ts" setup>
import type { PPTTempItem, ResultItem } from './typing';

import { onMounted, reactive, ref } from 'vue';

import { notification } from 'ant-design-vue';

import { getWorkflowInfo, getWorkflowList, sendPpt } from '#/api';

import { PptListView, PptWorkView } from './components';

let temp = reactive<PPTTempItem>({
  id: 'ee3889b6-50fa-463e-b956-3b93447727fc',
  name: '海南科技项目可研报告PPT生成',
});

const hitsory = ref([]);
const loading = ref(true);
const itemMessage = ref<ResultItem[]>([]);

const getLogs = async (appid: string, limit: number) => {
  loading.value = true;
  hitsory.value = await getWorkflowList({
    appid,
    limit,
  });
  loading.value = false;
};

async function handleClick(item: PPTTempItem) {
  temp = item;
  const res = await getWorkflowInfo({
    appid: temp.appId,
    workflowRunId: item.workflowRunId,
  });
  itemMessage.value = [];
  if (res.inputs) {
    itemMessage.value.push({
      key: itemMessage.value.length + 1,
      role: 'user',
      content: res.inputs.declarationDoc,
    });
  }
  if (res.outputs) {
    itemMessage.value.push({
      key: itemMessage.value.length + 1,
      role: 'ai',
      content: res.outputs.result,
    });
  }
}

async function handleClickMode(item: PPTTempItem) {
  notification.success({
    message: `${item.name}`,
    description: '已选取',
    duration: 3,
  });
  temp = item;
}

onMounted(() => {
  getLogs(temp.id, 5);
});
</script>

<template>
  <div class="layout">
    <div class="lg:w-1/6">
      <PptListView
        title="选择模板"
        :items="hitsory"
        :loading="loading"
        @click-mode="handleClickMode"
        @click="handleClick"
      />
    </div>
    <PptWorkView
      :item="temp"
      :run-workflow="sendPpt"
      :item-message="itemMessage"
    />
  </div>
</template>

<style scoped lang="less">
.layout {
  width: 100%;
  min-width: 1400px;
  height: 100%;
  display: flex;
  background: hsl(216deg 21.74% 95.49%);
  font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif;
  border-radius: v-deep(var(--ant-border-radius));
}
</style>
