<template>
  <PageWrapper dense contentFullHeight fixedHeight class="bg-white">
    <div class="content-box">
      <a-upload-dragger
        name="file"
        :action="action"
        :headers="headers"
        :showUploadList="false"
        accept=".doc,.docx,.txt"
        @change="handleChange"
      >
        <img :src="orderPng" />
        <a-button> 点击上传文件 </a-button>
      </a-upload-dragger>
      <BasicForm @register="registerForm" />
    </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 { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { getAppEnvConfig } from '/@/utils/env';
  import { getToken } from '/@/utils/auth';
  import orderPng from '/@/assets/ai/order.png';

  const formSchema: FormSchema[] = [
    {
      field: 'contractName',
      label: '合同名称',
      component: 'Input',
      colProps: {
        span: 12,
      },
    },

    {
      field: 'paymentMethod',
      label: '付款方式',
      component: 'Input',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'totalAmount',
      label: '总金额',
      component: 'Input',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'orderId',
      label: '关联订单id',
      component: 'Input',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'customerName',
      label: '客户名称',
      component: 'Input',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'deliveryDate',
      label: '交货日期',
      component: 'Input',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'contractLocation',
      label: '合同签订地点',
      component: 'Input',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'breachClause',
      label: '违约责任条款',
      component: 'Input',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'contractExpiryDate',
      label: '合同有效期',
      component: 'Input',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'customerSignature',
      label: '客户签字',
      component: 'Input',
      colProps: {
        span: 12,
      },
    },
  ];

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

  const [registerForm, { setFieldsValue }] = useForm({
    schemas: formSchema,
    showActionButtonGroup: false,
    layout: 'vertical',
    rowProps: {
      gutter: 32,
    },
  });

  const handleChange = (e) => {
    spinning.value = true;
    if (e.file.status === 'done') {
      if (e.file.response.code === 0) {
        setFieldsValue(e.file.response.data);
      } else {
        message.error(e.file.response.msg || '上传失败');
      }
      spinning.value = false;
    }
  };
</script>
<style lang="less" scoped>
  .content-box {
    padding: 10px 16px;
    height: 100%;
    overflow: auto;

    :deep(.ant-upload) {
      height: auto;
      background: #f8fbff;

      img {
        margin-left: calc(50% - 25px);
        margin-bottom: 20px;
      }

      .ant-btn {
        background: #cde6ff;
        border-color: #cde6ff;
      }
    }

    :deep(.ant-form) {
      margin: 20px -16px 0;
    }
  }
</style>
