import { RESPONSE_CODE } from '@/constants/enum';
import '@/pages/OrderPrint/index.less';
import { postServiceOrderPrintOrder } from '@/services';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { Modal, Select, Space, message } from 'antd';
import printJS from 'print-js';
import { useState } from 'react';
import { printerCSS } from './PrinterCSS';
import DalangPrinter from './components/DalangPrinter';
import HoujiePrinter from './components/HoujiePrinter';
import ZhuguangPrinter from './components/ZhuguangPrinter';

export default ({ mainOrder, subOrders, isRePrint, setVisible, onClose }) => {
  const [printerType, setPrinterType] = useState('Houjie');
  const { confirm } = Modal;
  const handleChange = (value: string) => {
    setPrinterType(value);
  };
  const showPropsConfirm = () => {
    if (isRePrint) {
      return;
    }
    confirm({
      title: '确认打印出货单',
      icon: <ExclamationCircleFilled />,
      content: '您是否已打印出货单？',
      okText: '是的我已打印',
      okType: 'primary',
      okButtonProps: {},
      cancelText: '取消',
      async onOk() {
        let body = {
          subIds: subOrders.map((item) => {
            return item.id;
          }),
        };
        const res = await postServiceOrderPrintOrder({ data: body });
        if (res.result === RESPONSE_CODE.SUCCESS) {
          message.success(res.message);
          onClose();
        }
      },
      onCancel() {
        message.info('取消打印出货单');
      },
    });
  };

  return (
    <Modal
      title="打印出货单"
      centered
      open
      onOk={() => {
        //printJS打印出货单
        printJS({
          printable: 'printArea', // 元素id,不支持多个
          scanStyles: false,
          type: 'html',
          targetStyle: ['* '],
          targetStyles: ['*'],
          style: printerCSS(),
          onPrintDialogClose: () => {
            showPropsConfirm();
          },
        });

        // onClose();
      }}
      onCancel={() => setVisible(false)}
      width={1000}
    >
      <Space direction="vertical" className="py-2">
        <span>打印类型</span>
        <Select
          defaultValue="Houjie"
          style={{ width: 'auto' }}
          onChange={handleChange}
          options={[
            { value: 'Houjie', label: '科路得出货单-厚街' },
            { value: 'Dalang', label: '科路得出货单-大朗' },
            { value: 'Zhuguang', label: '烛光出货单' },
          ]}
        />
      </Space>

      {printerType === 'Houjie' ? (
        <HoujiePrinter mainOrder={mainOrder} subOrders={subOrders} />
      ) : (
        ''
      )}

      {printerType === 'Zhuguang' ? (
        <ZhuguangPrinter mainOrder={mainOrder} subOrders={subOrders} />
      ) : (
        ''
      )}

      {printerType === 'Dalang' ? (
        <DalangPrinter mainOrder={mainOrder} subOrders={subOrders} />
      ) : (
        ''
      )}
    </Modal>
  );
};