import { RESPONSE_CODE } from '@/constants/enum';
import { PAYEE_OPTIONS } from '@/pages/Order/constant';
import {
  postServiceInvoiceAddInvoice,
  postServiceOrderQuerySalesCode,
} from '@/services';
import { enumToSelect } from '@/utils';
import { PlusOutlined } from '@ant-design/icons';
import {
  DrawerForm,
  ProFormDateTimePicker,
  ProFormGroup,
  ProFormList,
  ProFormMoney,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';
import { useEffect, useState } from 'react';

export default ({ onClose }) => {
  const [form] = Form.useForm<{
    invoiceNumber: '';
    invoiceStatus: '';
    purchaser: '';
    payee: '';
    contacts: '';
    sale: '';
    invoicingTime: '';
    notes: '';
    mainOrderIdObjs: [
      {
        mainOrderId: '';
      },
    ];
    money: '';
  }>();
  const [salesCodeOptions, setSalesCodeOptions] = useState([]);
  const getSalesCodeOptions = async () => {
    const res = await postServiceOrderQuerySalesCode();
    let options = res.data?.map((item) => {
      return {
        label: item.userName,
        value: item.userName,
        number: item.number,
      };
    });
    setSalesCodeOptions(options);
  };
  useEffect(() => {
    getSalesCodeOptions();
  }, []);
  return (
    <DrawerForm<{
      invoiceNumber: string;
      invoiceStatus: string;
      purchaser: string;
      payee: string;
      contacts: string;
      sale: string;
      invoicingTime: Date;
      notes: string;
      mainOrderIdObjs: [
        {
          mainOrderId: string;
        },
      ];
      money: string;
    }>
      title="新增开票"
      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 500,
      }}
      form={form}
      trigger={
        <Button type="primary">
          <PlusOutlined />
          新增
        </Button>
      }
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        console.log(values);
        const mainOrderIds = values.mainOrderIdObjs.flatMap(
          (item) => item.mainOrderId,
        );
        let attrs = { ...values, mainOrderIds };
        let res = await postServiceInvoiceAddInvoice({
          data: { ...attrs },
        });
        if (res.result === RESPONSE_CODE.SUCCESS) {
          message.success(res.message);
        } else {
          message.error(res.message);
          return false;
        }
        onClose();
        // 不返回不会关闭弹框
        return true;
      }}
    >
      <ProFormText
        name="invoiceNumber"
        width="md"
        label="发票号码"
        placeholder="请输入名称"
        rules={[{ required: true, message: '请输入名称!' }]}
      />
      <ProFormSelect
        name="invoiceStatus"
        label="发票类型"
        valueEnum={{
          SPECIALLY_INVOICED: '专票',
          COMMON_INVOICED: '普票',
        }}
        rules={[{ required: true, message: '请选择发票类型!' }]}
      />
      <ProFormText
        name="purchaser"
        width="md"
        label="购买方"
        placeholder="请输入购买方"
        rules={[{ required: true, message: '请输入购买方!' }]}
      />
      <ProFormSelect
        placeholder="收款单位"
        name="payee"
        width="lg"
        key="payee"
        showSearch
        label="开票收款单位"
        tooltip="财务开票将依据这个字段，选择对应的公司开票"
        options={enumToSelect(PAYEE_OPTIONS)}
      />
      <ProFormText
        name="contacts"
        width="md"
        label="联系人"
        placeholder="请输入联系人"
        rules={[{ required: true, message: '请输入联系人!' }]}
      />
      <ProFormSelect
        name="sale"
        key="sale"
        width="lg"
        showSearch
        label="销售代表"
        placeholder="请选择销售代表"
        options={salesCodeOptions}
      />
      <ProFormDateTimePicker
        name="invoicingTime"
        label="开票时间"
        fieldProps={{
          format: (value) => value.format('YYYY-MM-DD'),
        }}
        rules={[{ required: true, message: '请输入开票时间!' }]}
      />
      <ProFormTextArea name="notes" label="备注" placeholder="请输入名称" />
      <ProFormList
        name="mainOrderIdObjs"
        label="订单号"
        min={1}
        copyIconProps={false}
        deleteIconProps={{
          tooltipText: '删除',
        }}
        initialValue={[
          {
            mainOrderId: '',
          },
        ]}
      >
        <ProFormGroup key="group">
          <ProFormText
            rules={[{ required: true, message: '请输入关联订单!' }]}
            name="mainOrderId"
          />
        </ProFormGroup>
      </ProFormList>
      <ProFormMoney
        label="金额"
        name="money"
        customSymbol="￥"
        min={0}
        rules={[{ required: true, message: '请输入金额!' }]}
      />
    </DrawerForm>
  );
};