import { postServiceOrderModifiedDiff } from '@/services';
import { enumValueToLabel, getAliYunOSSFileNameFromUrl } from '@/utils';
import { getReceivingCompanyOptions, isSupplier } from '@/utils/order';
import { Button, Divider, Modal, Space, Table, TableProps } from 'antd';
import { useEffect, useState } from 'react';
import {
  PAYEE_OPTIONS,
  PAYMENT_CHANNEL_OPTIONS,
  PAYMENT_METHOD_OPTIONS,
  PRODUCT_BELONG_DEPARTMENT_OPTIONS,
  SHIPPING_WAREHOUSE_OPTIONS,
} from '../constant';
import './table.less';

export default ({ setVisible, subOrders, mainOrder, onClose }) => {
  let subIds = subOrders?.map((item: any) => {
    return item.id;
  });

  let mainId = mainOrder?.id;

  const [subOrderDiffs, setSubOrderDiffs] = useState([]);
  const [mainOrderDiffs, setMainOrderDiffs] = useState([]);

  function isSupplierUnvisibleField(field: any) {
    //主订单字段
    let unvisibleFields = [
      'receivingCompany',
      'invoiceIdentificationNumber',
      'bankAccountNumber',
      'bank',
      'totalPayment',
      'institution',
      'institutionContactName',
    ];
    //子订单字段
    unvisibleFields.push(
      ...[
        'listAnnex',
        'shippingWarehouse',
        'productBelongBusiness',
        'subOrderPayment',
        'productPrice',
      ],
    );

    return isSupplier() && unvisibleFields.includes(field);
  }

  async function loadData() {
    let res = await postServiceOrderModifiedDiff({
      data: {
        subOrderIds: subIds,
        mainOrderId: mainId,
      },
    });
    let subOrderDiffs = res?.data?.subOrderDiffs;
    let mainOrderDiffs = res?.data?.mainOrderDiffs;

    setSubOrderDiffs(subOrderDiffs);
    setMainOrderDiffs(mainOrderDiffs);
  }

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

  function toChineseName(key: any, text: any) {
    let newText = text;
    if (key === '所属事业部') {
      newText = enumValueToLabel(text, PRODUCT_BELONG_DEPARTMENT_OPTIONS);
    }
    if (key === '发货仓库') {
      newText = enumValueToLabel(text, SHIPPING_WAREHOUSE_OPTIONS);
    }
    if (key === '支付渠道') {
      newText = enumValueToLabel(text, PAYMENT_CHANNEL_OPTIONS);
    }
    if (key === '支付方式') {
      newText = enumValueToLabel(text, PAYMENT_METHOD_OPTIONS);
    }
    if (key === '单价' || key === '合计') {
      newText = '￥' + newText;
    }
    if (key === '开票收款单位') {
      newText = enumValueToLabel(
        text,
        getReceivingCompanyOptions(PAYEE_OPTIONS),
      );
    }
    return newText;
  }

  function cellRender(value: any, record: any) {
    if (record.fieldName === '附件') {
      return (
        <Space className="max-w-[300px]" wrap>
          {value?.map((item: any, index: any) => {
            let fileName = getAliYunOSSFileNameFromUrl(item);
            return (
              <Button
                className="p-0 pr-2"
                key={index}
                danger={record.isDiff}
                type="link"
                onClick={() => {
                  window.open(
                    '/previewApi/onlinePreview?url=' +
                      encodeURIComponent(Base64.encode(item)),
                  );
                }}
              >
                {fileName}
              </Button>
            );
          })}
        </Space>
      );
    }
    return (
      <div
        title={toChineseName(record.fieldName, value)}
        className="max-w-[250px] whitespace-no-wrap overflow-hidden overflow-ellipsis"
      >
        <span className={record.isDiff ? 'text-[red]' : ''}>
          {toChineseName(record.fieldName, value)}
        </span>
      </div>
    );
  }

  interface DataType {
    fieldName: string;
    oldValue: string;
    newValue: string;
    isDiff: boolean;
  }

  const columns: TableProps<DataType>['columns'] = [
    {
      title: '字段名',
      dataIndex: 'fieldName',
      key: 'fieldName',
      render(value) {
        return (
          <div
            title={value}
            className="max-w-[80px] whitespace-no-wrap overflow-hidden overflow-ellipsis"
          >
            {value}
          </div>
        );
      },
    },
    {
      title: '修改前字段值',
      dataIndex: 'oldValue',
      key: 'oldValue',
      render(value, record) {
        return cellRender(value, record);
      },
    },
    {
      title: '修改后（当前）字段值',
      dataIndex: 'newValue',
      key: 'newValue',
      render(value, record) {
        return cellRender(value, record);
      },
    },
  ];

  function loadSubOrderDiffTable(item: any, index: any) {
    //转换为表格数据
    let oldDatas = item[0];
    let curDatas = item[1];
    let diffFiledNames = oldDatas?.diffFieldsName;

    let tableData = [];
    let visibleFields = [
      ['productName', '商品名称'],
      ['productCode', '商品编码'],
      ['parameters', '商品参数'],
      ['quantity', '数量'],
      ['productPrice', '单价'],
      ['unit', '单位'],
      ['subOrderPayment', '合计'],
      ['productBelongBusiness', '所属事业部'],
      ['shippingWarehouse', '发货仓库'],
      ['notes', '备注'],
      ['paymentChannel', '支付渠道'],
      ['paymentMethod', '支付方式'],
      ['listAnnex', '附件'],
    ];
    for (let field of visibleFields) {
      let filedKey = field[0];
      let filedName = field[1];

      if (!isSupplierUnvisibleField(filedKey)) {
        tableData.push({
          fieldName: filedName,
          oldValue: oldDatas[filedKey],
          newValue: curDatas[filedKey],
          isDiff: diffFiledNames?.includes(filedKey),
        });
      }
    }
    return (
      <>
        <Divider orientation="left">商品{index + 1}：</Divider>
        <Table
          className="myTable"
          size="small"
          pagination={false}
          key={index}
          columns={columns}
          dataSource={tableData}
        />
      </>
    );
  }

  function loadMainOrderDiffTable(item: any, index: any) {
    if (!item || item.length <= 0) {
      return;
    }
    //转换为表格数据
    let oldDatas = item[0];
    let curDatas = item[1];
    let diffFiledNames = oldDatas?.diffFieldsName;

    let tableData = [];
    let visibleFields = [
      ['salesCode', '销售代号'],
      ['customerName', '收货人姓名'],
      ['customerContactNumber', '收货人联系手机号'],
      ['customerShippingAddress', '收货人地址信息'],
      ['institutionContactName', '单位联系人'],
      ['institution', '单位'],
      ['totalPayment', '支付总金额'],
      ['notes', '备注'],
      ['bank', '开户银行'],
      ['bankAccountNumber', '银行账号'],
      ['invoiceIdentificationNumber', '开票识别号'],
      ['receivingCompany', '开票收款单位'],
    ];
    for (let field of visibleFields) {
      let filedKey = field[0];
      let filedName = field[1];

      if (!isSupplierUnvisibleField(filedKey)) {
        tableData.push({
          fieldName: filedName,
          oldValue: oldDatas[filedKey],
          newValue: curDatas[filedKey],
          isDiff: diffFiledNames?.includes(filedKey),
        });
      }
    }
    return (
      <Table
        className="myTable"
        size="small"
        pagination={false}
        key={index}
        columns={columns}
        dataSource={tableData}
      />
    );
  }

  return (
    <>
      <Modal
        width={700}
        open
        title="信息对比"
        okText="返回"
        cancelText={false}
        onOk={() => {
          setVisible(false);
          onClose();
        }}
        onCancel={() => {
          setVisible(false);
        }}
        cancelButtonProps={{
          hidden: true,
        }}
        destroyOnClose={true}
      >
        <Divider>主订单信息：</Divider>
        {loadMainOrderDiffTable(mainOrderDiffs, 0)}

        <Divider>子订单信息：</Divider>
        {subOrderDiffs?.map((item: any, index) => {
          return loadSubOrderDiffTable(item, index);
        })}
      </Modal>
    </>
  );
};