import { RESPONSE_CODE } from '@/constants/enum';
import {
  postServiceOrderAddOrder,
  postServiceOrderQueryCustomerNameInformation,
  postServiceOrderQueryProductInformation,
  postServiceOrderQuerySalesCode,
  postServiceOrderUpdateOrder,
} from '@/services';
import {
  enumToSelect,
  getAliYunOSSFileNameFromUrl,
  getUserInfo,
} from '@/utils';
import {
  DrawerForm,
  FormListActionType,
  ProCard,
  ProFormDateTimePicker,
  ProFormDigit,
  ProFormList,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormUploadDragger,
} from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';
import { cloneDeep } from 'lodash';
import { useEffect, useRef, useState } from 'react';
import {
  INVOCING_STATUS_OPTIONS,
  INVOCING_STATUS_OPTIONS_OLD,
  PAYMENT_CHANNEL_OPTIONS,
  PAYMENT_METHOD_OPTIONS,
  PRODUCT_BELONG_DEPARTMENT_OPTIONS,
} from '../constant';

export default ({ onClose, data, subOrders, orderOptType }) => {
  const [invoicingStatus, setInvoicingStatus] = useState('');
  const [salesCodeOptions, setSalesCodeOptions] = useState([]);
  const [form] = Form.useForm<{
    salesCode: '';
    customerName: '';
    customerContactNumber: '';
    institution: '';
    institutionContactName: '';
    customerShippingAddress: '';
    totalPayment: '';
    paymentChannel: '';
    paymentMethod: '';
    productBelongBusiness: '';
    invoicingStatus: '';
    invoiceIdentificationNumber: '';
    invoicingTime: '';
    bank: '';
    bankAccountNumber: '';
    deleteSubOrderLists: [];
    notes: '';
    list: [
      {
        productCode: '';
        productName: '';
        quantity: '';
        productPrice: '';
        parameters: '';
        subOrderPayment: '';
        unit: '';
        serialNumber: '';
        notes: '';
      },
    ];
  }>();

  let originSubOrders = cloneDeep(subOrders);
  /**
   * 获取当前的操作类型boolean值
   * @param type 操作类型，如果与当前匹配返回true
   */
  function optType(type: string) {
    return orderOptType === type;
  }

  /**
   *
   * @returns 获取开票选项
   */
  function getInvoicingSelect() {
    if (optType('edit')) {
      return enumToSelect(INVOCING_STATUS_OPTIONS_OLD);
    }
    return enumToSelect(INVOCING_STATUS_OPTIONS);
  }

  const fileList: any = [];

  const getSalesCodeOptions = async () => {
    const res = await postServiceOrderQuerySalesCode();
    let options = res.data?.map((item) => {
      return { label: item.userName, value: item.userName };
    });
    setSalesCodeOptions(options);

    if (optType('copy') || optType('edit')) {
      let includeFlag = false;
      //销售代码校验，如果是旧的销售代码，则提示并清空
      for (let option of options) {
        if (option.value === data.salesCode) {
          includeFlag = true;
        }
      }
      console.log(includeFlag);
      if (!includeFlag) {
        form.resetFields(['salesCode']);
        message.warning('检测到销售代码为旧的，已清空，请重新选择');
      }
    }
  };

  useEffect(() => {
    getSalesCodeOptions();
  }, []);

  useEffect(() => {
    // 在组件挂载或数据变化时，更新组件状态
    if (data) {
      setInvoicingStatus(data.invoicingStatus);
    }
  }, [data]);

  // let mainInfoDisbled = optType('edit');
  if (optType('edit') || optType('copy')) {
    //如果是复制，需要开票，不回显是否需要开票字段
    if (optType('copy')) {
      if (data.invoicingStatus === 'INVOICED') {
        data.invoicingStatus = undefined;
      }
    }
    //订单修改和新增的子订单列表命名是list
    data.list = data.subOrderInformationLists;
    //主订单事业部默认显示子订单第一条的事业部
    data.productBelongBusiness = data.list[0].productBelongBusiness;
    data.paymentMethod = data.list[0].paymentMethod;
    data.paymentChannel = data.list[0].paymentChannel;
    data.invoicingStatus = data.list[0].invoicingStatus;

    data.list = data.list?.map((item) => {
      item.filePaths = item.listAnnex?.map((path) => {
        let i = 0;
        return {
          uid: i++,
          name: getAliYunOSSFileNameFromUrl(path),
          status: 'uploaded',
          url: path,
          response: { data: [path] },
        };
      });
      return item;
    });
  }

  //复制的时候，如果是不需要开票，要把开票信息清空
  if (optType('copy') && data.invoicingStatus === 'UN_INVOICE') {
    data.invoiceIdentificationNumber = undefined;
  }

  if (subOrders !== undefined && subOrders.length > 0) {
    data.list = subOrders;
  }

  const actionRef = useRef<
    FormListActionType<{
      name: string;
    }>
  >();

  useEffect(() => {
    form.setFieldsValue({ ...data });
    //如果是新建，需要清空list
    if (optType('add')) {
      form.resetFields(['list']);
    }
  }, [data]);

  /**
   *
   * @param option 商品名称所对应的商品数据
   * @param currentRowData list中当前行的数据
   */
  function autoFillProductInfo(option: any, currentRowData: any) {
    let copyList = form.getFieldValue('list');
    let currentData = copyList[currentRowData.field.key];
    currentData.productCode = option?.productCode;
    currentData.parameters = option?.specifications;
    currentData.unit = option?.unit;
    form.setFieldValue('list', copyList);
  }

  /**
   * 选择收货人后自动填充信息
   * @param option 收货人信息
   */
  function autoFillCustomerInfo(option: any) {
    form.setFieldValue('institution', option.institution);
    form.setFieldValue('institutionContactName', option.institutionContactName);
    form.setFieldValue(
      'customerShippingAddress',
      option.customerShippingAddress,
    );
    form.setFieldValue('customerContactNumber', option.customerContactNumber);
    form.setFieldValue('customerName', option.customerName);
  }

  /**
   * 计算子订单金额
   * @param listMeta 当前商品信息
   */
  function computeSubOrderPayment(listMeta: any) {
    let quantity = listMeta?.record?.quantity;
    let productPrice = listMeta?.record?.productPrice;
    quantity = quantity === '' || quantity === undefined ? 0 : quantity;
    productPrice =
      productPrice === '' || productPrice === undefined ? 0 : productPrice;

    listMeta.subOrderPayment = quantity * productPrice;
    let list = form.getFieldValue('list');
    list[listMeta?.index].subOrderPayment = quantity * productPrice;
    form.setFieldValue('list', list);
  }

  /**
   * 计算支付总额
   */
  function computeTotalPayment() {
    let list = form.getFieldValue('list');
    let totalPayment = 0;
    list?.forEach((subOrder: any) => {
      let subOrderPayment = subOrder?.subOrderPayment;
      if (subOrderPayment === '' || subOrderPayment === undefined) {
        totalPayment += 0;
      } else {
        totalPayment += subOrderPayment;
      }
    });
    form.setFieldValue('totalPayment', totalPayment);
  }

  return (
    <DrawerForm<{
      deleteSubOrderLists: any;
      name: string;
      company: string;
    }>
      open
      width="35%"
      title={optType('add') || optType('copy') ? '新建订单' : '修改订单'}
      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
      }}
      // layout="horizontal"
      // labelCol={{ span: 8 }}
      form={form}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
        maskClosable: false,
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        let res = {};
        //附件处理
        let list = values.list;
        // console.log(list);
        list = list.map((item) => {
          item.filePaths = item.filePaths?.map((file) => {
            console.log(file);
            return { url: file.response.data[0] };
          });
          return item;
        });

        values.list = list;
        values.institution = values.institution?.trim();
        values.institutionContactName = values.institutionContactName?.trim();

        if (optType('add') || optType('copy')) {
          res = await postServiceOrderAddOrder({ data: values });
        } else {
          //计算已删除的子订单id
          const originIds = originSubOrders.map((item) => {
            return item.id;
          });
          const curIds = form.getFieldValue('list')?.map((item) => {
            return item.id;
          });
          let diff = originIds.filter((item) => !curIds.includes(item));
          values.deleteSubOrderLists = diff;
          res = await postServiceOrderUpdateOrder({ data: values });
        }

        if (res.result === RESPONSE_CODE.SUCCESS) {
          message.success(res.message);
          // 不返回不会关闭弹框
          onClose(true);
          return true;
        }
      }}
      onOpenChange={(val) => {
        return !val && onClose();
      }}
    >
      <h2>订单基本信息</h2>
      <ProFormText
        key="id"
        name="id"
        width="lg"
        disabled
        label="id"
        placeholder="id"
        hidden
      />
      <ProFormSelect
        name="salesCode"
        key="salesCode"
        width="lg"
        showSearch
        label="销售代表"
        placeholder="请输入销售代表"
        rules={[{ required: true, message: '销售代表必填' }]}
        options={salesCodeOptions}
        // disabled={mainInfoDisbled}
      />
      <ProFormSelect
        key="customerName"
        label="收货人"
        width="lg"
        showSearch
        name="customerName"
        // options={options}
        placeholder="请输入收货人"
        rules={[{ required: true, message: '收货人必填' }]}
        onChange={(_, option) => {
          autoFillCustomerInfo(option);
        }}
        fieldProps={{
          optionItemRender(item) {
            if (item.type === 'add') {
              return (
                <div title={item.customerName + '（新增商品信息）'}>
                  <span style={{ color: '#333333' }}>{item.customerName}</span>
                  {' | '}
                  <span style={{ color: 'orange' }}>自定义</span>
                </div>
              );
            }
            return (
              <div
                title={
                  item.customerName +
                  ' | ' +
                  item.customerContactNumber +
                  ' | ' +
                  (item.customerShippingAddress === undefined
                    ? '无地址'
                    : item.customerShippingAddress) +
                  ' | ' +
                  item.institutionContactName +
                  ' | ' +
                  item.institution
                }
              >
                <span style={{ color: '#333333' }}>{item.customerName}</span>
                {' | '}
                <span style={{ color: '#339999' }}>
                  {item.customerContactNumber === undefined
                    ? '无电话号码'
                    : item.customerContactNumber}
                </span>
                {' | '}
                <span style={{ color: '#666666' }}>
                  {item.customerShippingAddress === undefined
                    ? '无地址'
                    : item.customerShippingAddress}
                </span>
                {' | '}
                <span style={{ color: '#666666' }}>
                  {item.institutionContactName === undefined
                    ? '无课题组'
                    : item.institutionContactName}
                </span>
                {' | '}
                <span style={{ color: '#666666' }}>
                  {item.institution === undefined ? '无单位' : item.institution}
                </span>
              </div>
            );
          },
        }}
        request={async (value, { params }) => {
          const keywords = value.keyWords;
          const { data } = await postServiceOrderQueryCustomerNameInformation({
            data: { customerName: keywords },
            params: params,
          });
          let options = data.map((c: any) => {
            return {
              ...c,
              label: c.customerName,
              value: c.id,
              key: c.id,
            };
          });

          //第一个商品默认为要新增的商品
          if (keywords.trim() !== '') {
            options.unshift({
              customerName: keywords,
              type: 'add',
              label: keywords,
              value: 3.1415926,
              key: keywords,
            });
          }
          return options;
        }}
      />
      <ProFormText
        width="lg"
        key="customerContactNumber"
        name="customerContactNumber"
        label="联系方式"
        placeholder="请输入联系方式"
        rules={[{ required: true, message: '联系方式必填' }]}
        // disabled={mainInfoDisbled}
      />
      <ProFormText
        width="lg"
        key="institution"
        name="institution"
        label="单位"
        placeholder="请输入单位"
        rules={[{ required: true, message: '单位必填' }]}
        // disabled={mainInfoDisbled}
      />
      <ProFormText
        width="lg"
        key="institutionContactName"
        name="institutionContactName"
        label="课题组"
        placeholder="请输入课题组"
        rules={[{ required: true, message: '课题组必填' }]}
        // disabled={mainInfoDisbled}
      />
      <ProFormTextArea
        width="lg"
        key="customerShippingAddress"
        name="customerShippingAddress"
        label="收货地址"
        placeholder="请输入收货地址"
        rules={[{ required: true, message: '收货地址必填' }]}
        // disabled={mainInfoDisbled}
      />
      <div id="total-payment">
        <ProFormDigit
          name="totalPayment"
          width="lg"
          key="totalPayment"
          label="支付总额（￥）"
          rules={[{ required: true, message: '支付总额必填' }]}
          tooltip="点击计算，合计所有子订单金额"
          fieldProps={{
            addonAfter: (
              <Button
                className="rounded-l-none"
                type="primary"
                onClick={computeTotalPayment}
              >
                计算
              </Button>
            ),
          }}
          // disabled={mainInfoDisbled}
        />
      </div>

      <ProFormSelect
        placeholder="请输入支付渠道"
        name="paymentChannel"
        width="lg"
        key="paymentChannel"
        label="支付渠道"
        options={enumToSelect(PAYMENT_CHANNEL_OPTIONS)}
        rules={[{ required: true, message: '支付渠道必填' }]}
        // disabled={mainInfoDisbled}
      />
      <ProFormSelect
        placeholder="请输入支付方式"
        name="paymentMethod"
        width="lg"
        key="paymentMethod"
        label="支付方式"
        options={enumToSelect(PAYMENT_METHOD_OPTIONS)}
        rules={[{ required: true, message: '支付方式必填' }]}
        // disabled={mainInfoDisbled}
      />
      <ProFormSelect
        placeholder="选择是否需要开票"
        name="invoicingStatus"
        width="lg"
        key="invoicingStatus"
        label="是否需要开票"
        options={getInvoicingSelect()}
        // disabled={mainInfoDisbled}
        onChange={(_, option) => {
          setInvoicingStatus(option.value);
          if (option.value === 'UN_INVOICE') {
            form.setFieldValue('invoiceIdentificationNumber', undefined);
            form.setFieldValue('bank', undefined);
            form.setFieldValue('bankAccountNumber', undefined);
          }
        }}
        rules={[{ required: true, message: '是否需要开票必填' }]}
      />
      <ProFormText
        width="lg"
        name="invoiceIdentificationNumber"
        label="开票信息"
        key="invoiceIdentificationNumber"
        // disabled={mainInfoDisbled}
        hidden={invoicingStatus === 'UN_INVOICE'}
        placeholder="请输入开票信息"
        rules={[
          {
            required: invoicingStatus === 'UN_INVOICE' ? false : true,
            message: '开票信息必填',
          },
        ]}
      />

      {getUserInfo().roleSmallVO?.code === 'admin' ? (
        <ProFormDateTimePicker
          width="lg"
          key="invoicingTime"
          name="invoicingTime"
          // disabled={mainInfoDisbled}
          hidden={invoicingStatus === 'UN_INVOICE'}
          label="开票时间"
          placeholder="请输入开票时间"
        />
      ) : (
        ''
      )}
      <ProFormText
        width="lg"
        name="bank"
        key="bank"
        label="开户银行"
        // disabled={mainInfoDisbled}
        hidden={invoicingStatus === 'UN_INVOICE'}
        placeholder="请输入开户银行"
      />
      <ProFormText
        width="lg"
        key="bankAccountNumber"
        name="bankAccountNumber"
        hidden={invoicingStatus === 'UN_INVOICE'}
        label="银行账号"
        // disabled={mainInfoDisbled}
        placeholder="请输入银行账号"
      />
      <ProFormTextArea
        width="lg"
        name="notes"
        label="备注"
        key="notes"
        // disabled={mainInfoDisbled}
        placeholder="请输入备注"
        rules={[
          {
            max: 120, // 最大长度为120个字符
            message: '备注不能超过120个字符',
          },
        ]}
      />

      <h2>商品信息</h2>
      <ProFormList
        creatorButtonProps={{ disabled: false }}
        name="list"
        label=""
        copyIconProps={false} //复制按钮不显示
        initialValue={[
          {
            productCode: '',
            productName: '',
            quantity: '',
            productPrice: '',
            parameters: '',
            subOrderPayment: '',
          },
        ]}
        actionGuard={{
          beforeRemoveRow: async (index) => {
            return new Promise((resolve) => {
              if (index === 0) {
                message.error('第一行数据不能删除');
                resolve(false);
                return;
              }
              resolve(true);
            });
          },
        }}
        itemRender={(doms, listMeta) => {
          if (optType('edit')) {
            let i = 0;
            let defaultFileList = listMeta.record?.listAnnex?.map((annex) => {
              return {
                uid: i++,
                name: annex,
                status: 'uploaded',
                url: annex,
                response: { data: [annex] },
              };
            });
            fileList[listMeta.index] = defaultFileList;
          }
          let itemFileList = fileList[listMeta.index];
          return (
            <ProCard
              bordered
              extra={doms.action}
              title={'商品' + (listMeta.index + 1)}
              style={{
                marginBlockEnd: 8,
              }}
            >
              {[
                <ProFormSelect
                  key="key"
                  label="商品名称"
                  width="lg"
                  showSearch
                  name="productName"
                  // options={options}
                  placeholder="请搜索商品"
                  rules={[{ required: true, message: '商品名称必填' }]}
                  onChange={(_, option) => {
                    autoFillProductInfo(option, listMeta);
                  }}
                  fieldProps={{
                    optionItemRender(item) {
                      if (item.type === 'add') {
                        return (
                          <div title={item.productName + '（新增商品信息）'}>
                            <span style={{ color: '#333333' }}>
                              {item.productName}
                            </span>
                            {' | '}
                            <span style={{ color: 'orange' }}>新增商品</span>
                          </div>
                        );
                      }
                      return (
                        <div
                          title={
                            item.label +
                            ' | ' +
                            (item.specifications === undefined
                              ? '无参数'
                              : item.specifications) +
                            ' | ' +
                            item.unit
                          }
                        >
                          <span style={{ color: '#333333' }}>{item.label}</span>
                          {' | '}
                          <span style={{ color: '#339999' }}>
                            {item.specifications === undefined
                              ? '无参数'
                              : item.specifications}
                          </span>
                          {' | '}
                          <span style={{ color: '#666666' }}>
                            {item.unit === undefined ? '无单位' : item.unit}
                          </span>
                        </div>
                      );
                    },
                  }}
                  request={async (value, { params }) => {
                    const keywords = value.keyWords;
                    const { data } =
                      await postServiceOrderQueryProductInformation({
                        data: { productName: keywords },
                        params: params,
                      });
                    let options = data.map((p: any) => {
                      return {
                        ...p,
                        label: p.productName,
                        value: p.id + '|' + p.productName,
                        key: p.id,
                      };
                    });

                    //第一个商品默认为要新增的商品
                    if (keywords.trim() !== '') {
                      options.unshift({
                        productName: keywords,
                        type: 'add',
                        label: keywords,
                        value: 13 + '|' + keywords,
                        key: keywords,
                      });
                    }
                    return options;
                  }}
                />,
                <ProFormText
                  key={'productCode' + listMeta.index}
                  width="lg"
                  name="productCode"
                  disabled
                  label={
                    <>
                      <span>商品编码</span>
                      <span className="pl-2 text-xs text-gray-400">
                        新增商品时，商品编码由系统自动生成
                      </span>
                    </>
                  }
                  placeholder="未输入商品名称"
                />,
                <ProFormText
                  key={'parameters' + listMeta.index}
                  width="lg"
                  name="parameters"
                  label="商品参数"
                  placeholder="请输入商品参数"
                  rules={[{ required: true, message: '商品参数必填' }]}
                />,
                <ProFormDigit
                  key={'quantity' + listMeta.index}
                  width="lg"
                  name="quantity"
                  label="商品数量"
                  fieldProps={{
                    onChange: (value) => {
                      listMeta.record.quantity = value;
                      computeSubOrderPayment(listMeta);
                    },
                  }}
                  placeholder="请输入商品数量"
                  rules={[{ required: true, message: '商品数量必填' }]}
                />,
                <ProFormDigit
                  key={'productPrice' + listMeta.index}
                  width="lg"
                  name="productPrice"
                  label="商品单价"
                  fieldProps={{
                    onChange: (value) => {
                      listMeta.record.productPrice = value;
                      computeSubOrderPayment(listMeta);
                    },
                  }}
                  placeholder="请输入商品单价"
                  rules={[{ required: true, message: '商品单价必填' }]}
                />,
                <ProFormText
                  key={'unit' + listMeta.index}
                  width="lg"
                  name="unit"
                  label="商品单位"
                  placeholder="请输入商品单位"
                  rules={[{ required: true, message: '商品单位必填' }]}
                />,

                <ProFormDigit
                  width="lg"
                  key={'subOrderPayment' + listMeta.index}
                  name="subOrderPayment"
                  label="子订单金额"
                  placeholder="请输入子订单金额"
                  tooltip="商品数量和单价变化后会自动计算子订单金额"
                  rules={[{ required: true, message: '子订单金额必填' }]}
                />,
                <ProFormSelect
                  key={'productBelongBusiness' + listMeta.index}
                  placeholder="请输入所属事业部"
                  name="productBelongBusiness"
                  width="lg"
                  label="所属事业部"
                  options={enumToSelect(PRODUCT_BELONG_DEPARTMENT_OPTIONS)}
                  initialValue={'EXPERIMENTAL_CONSUMABLES'}
                  rules={[{ required: true, message: '所属事业部必填' }]}
                  // disabled={mainInfoDisbled}
                />,
                <ProFormTextArea
                  key={'notes' + listMeta.index}
                  width="lg"
                  name="notes"
                  label={
                    <div>
                      <span>备注</span>
                      <span className="pl-2 text-xs text-gray-400">
                        备注将体现在出货单上，请将需要仓管看见的信息写在备注上，例如需要开收据等信息。
                      </span>
                    </div>
                  }
                  placeholder="请输入备注"
                  rules={[
                    {
                      max: 120, // 最大长度为120个字符
                      message: '备注不能超过120个字符',
                    },
                  ]}
                />,
                <>
                  <ProFormUploadDragger
                    key={'filePaths' + listMeta.index}
                    label="附件"
                    name="filePaths"
                    action="/api/service/order/fileProcess"
                    fieldProps={{
                      headers: { Authorization: localStorage.getItem('token') },
                      itemFileList,
                    }}
                  />
                </>,
              ]}
            </ProCard>
          );
        }}
        actionRef={actionRef}
      ></ProFormList>
    </DrawerForm>
  );
};