<template>
  <PageWrapper dense contentFullHeight fixedHeight class="flex justify-center">
    <div class="contract-container">
      <div class="content-top">
        <div class="top-left">
          <div class="title">AI合同评审</div>
          <div class="detail">
            AI评审-方便快捷
            <span>请上传word文件，后缀名为.docx</span>
          </div>
        </div>
        <img :src="contractPng" />
      </div>
      <div class="content-upload">
        <a-upload-dragger
          name="file"
          :action="action"
          :headers="headers"
          :showUploadList="false"
          accept=".docx"
          @change="handleChange"
        >
          <img :src="filePng" />
          <span class="upload-text">将文件拖到此处，或</span>
          <span class="upload-tip">点击上传</span>
        </a-upload-dragger>
      </div>
    </div>
  </PageWrapper>
  <LoadingBox v-if="spinning" />
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { message } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import { LoadingBox } from '/@/components/ModalPanel/index';
  import { getAppEnvConfig } from '/@/utils/env';
  import { getToken } from '/@/utils/auth';
  import { downloadByData } from '/@/utils/file/download';
  import { getContractReview } from '/@/api/aiCreateTable';
  import contractPng from '/@/assets/ai/contract.png';
  import filePng from '/@/assets/ai/file.png';

  const action = `${getAppEnvConfig().VITE_GLOB_API_URL}/system/ai/kimi/upload-file`;
  const headers = { Authorization: `Bearer ${getToken()}` };
  const spinning = ref<boolean>(false);

  const handleChange = async (e) => {
    spinning.value = true;
    if (e.file.status === 'done') {
      if (e.file.response.code === 0) {
        const res = await getContractReview(e.file.response.data);
        downloadByData(
          res.data,
          `合同.docx`,
          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        );
      } else {
        message.error(e.file.response.msg || '上传失败');
      }
      spinning.value = false;
    }
  };
</script>
<style lang="less" scoped>
  .contract-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    width: 1000px;

    .content-top {
      display: flex;
      justify-content: space-between;
      align-items: end;
      width: 100%;

      .top-left {
        margin-bottom: 20px;

        .title {
          font-size: 40px;
          font-weight: bold;
        }

        .detail {
          font-size: 16px;
          color: #666;

          span {
            font-size: 14px;
            margin-left: 5px;
            color: #bbb;
          }
        }
      }
    }

    .content-upload {
      width: 100%;

      :deep(.ant-upload) {
        border-radius: 10px;
        padding: 50px;

        img {
          margin-left: calc(50% - 60px);
        }

        .upload-tip {
          color: #5daeff;
        }
      }
    }
  }
</style>
