import '@/pages/OrderPrint/index.less';
import { formatDateTime, formatSalesCode } from '@/utils';

export default ({ mainOrder, subOrders }) => {
  //合计数量
  let totalQuantity = 0;
  //业务员：英文名称（销售代码）
  let salesCode = mainOrder.salesCode;
  salesCode = formatSalesCode(salesCode);
  for (let order of subOrders) {
    let subOrderQuantity = parseInt(order.quantity);
    totalQuantity += subOrderQuantity === undefined ? 0 : subOrderQuantity;
  }
  let columns = [];
  for (let i = 0; i < subOrders.length; i++) {
    let subOrder = subOrders[i];
    columns.push(
      <tr height="30" style={{ height: '15.00pt' }}>
        <td height="30" colSpan={1} style={{ height: '15.00pt' }}></td>
        <td className="xl72" colSpan={3}>
          {subOrder.productName}
        </td>
        <td className="xl72" colSpan={3}>
          {subOrder.parameters}
        </td>
        <td className="xl72" colSpan={2}>
          {subOrder.unit}
        </td>
        <td className="xl72" colSpan={1}>
          {subOrder.quantity}
        </td>
        <td className="xl72" colSpan={4} style={{ textAlign: 'left' }}>
          {subOrder.notes}
        </td>
      </tr>,
    );
  }

  //补充空白行，使表格不少于六行
  for (let i = subOrders.length; i < 6; i++) {
    columns.push(
      <tr height="30" style={{ height: '15.00pt' }}>
        <td height="30" style={{ height: '15.00pt' }} colSpan={1}></td>
        <td className="xl72" colSpan={3}></td>
        <td className="xl72" colSpan={3}></td>
        <td className="xl72" colSpan={2}></td>
        <td className="xl72" colSpan={1}></td>
        <td className="xl72" colSpan={4}></td>
      </tr>,
    );
  }

  return (
    <div className="flex items-center justify-center bg-gray-100">
      <div className="w-full max-w-4xl p-10 my-10 bg-white border border-gray-300">
        <table
          id="printArea"
          className="p-10"
          width="855"
          border={0}
          cellPadding={0}
          cellSpacing={0}
          style={{
            width: '423.00pt',
            borderCollapse: 'collapse',
            tableLayout: 'fixed',
          }}
        >
          <col width="57" />
          <col width="57" />
          <col width="57" />
          <col width="57" />
          <col width="57" />
          <col width="57" />
          <col width="57" />
          <col width="57" />
          <col width="57" />
          <col width="57" />
          <col width="57" />
          <col width="57" />
          <col width="57" />
          <col width="57" />
          <col width="57" />
          <tr height="42" style={{ height: '15.00pt' }}></tr>
          <tr height="42" style={{ height: '21.00pt' }}>
            <td height="42" colSpan={5} style={{ height: '21.00pt' }}></td>
            <td
              className="xl65"
              colSpan={5}
              style={{ borderRight: 'none', borderBottom: 'none' }}
            >
              广东烛光新能源科技有限公司
            </td>
            <td height="42" colSpan={5} style={{ height: '21.00pt' }}></td>
          </tr>
          <tr height="30" style={{ height: '15.00pt' }}>
            <td height="30" colSpan={3} style={{ height: '15.00pt' }}></td>
            <td
              className="xl66"
              colSpan={5}
              style={{ borderRight: 'none', borderBottom: 'none' }}
            >
              网址：www.canrd.com
            </td>
            <td
              className="xl66"
              colSpan="4"
              style={{
                borderRight: 'none',
                borderBottom: 'none',
                textAlign: 'left',
              }}
            >
              QQ：2902385824
            </td>
          </tr>
          <tr height="35" style={{ height: '17.50pt' }}>
            <td height="35" colSpan={5} style={{ height: '17.50pt' }}></td>
            <td
              className="xl67"
              colSpan={5}
              style={{ borderRight: 'none', borderBottom: 'none' }}
            >
              销售出货单
            </td>
            <td height="35" colSpan={5} style={{ height: '17.50pt' }}></td>
          </tr>
          <tr height="30" style={{ height: '15.00pt' }}>
            <td
              className="xl69"
              colSpan={1}
              style={{ borderRight: 'none', borderBottom: 'none' }}
            ></td>
            <td
              className="xl69"
              colSpan="5"
              style={{ borderRight: 'none', borderBottom: 'none' }}
            >
              单位名称：{mainOrder.institution}
            </td>
            <td
              className="xl69"
              colSpan={2}
              style={{ borderRight: 'none', borderBottom: 'none' }}
            ></td>
            <td
              className="xl69"
              colSpan={7}
              style={{ borderRight: 'none', borderBottom: 'none' }}
            >
              单号：{mainOrder.id}
            </td>
          </tr>
          <tr height="30" style={{ height: '15.00pt' }}>
            <td height="30" colSpan={1} style={{ height: '15.00pt' }}></td>
            <td
              className="xl69"
              colSpan={5}
              style={{ borderRight: 'none', borderBottom: 'none' }}
            >
              联系人：{mainOrder.customerName}
            </td>
            <td height="30" colSpan={2} style={{ height: '15.00pt' }}></td>
            <td
              className="xl69"
              colSpan={7}
              style={{ borderRight: 'none', borderBottom: 'none' }}
            >
              开单日期：{formatDateTime(mainOrder.createTime)}
            </td>
          </tr>
          <tr height="30" style={{ height: '15.00pt' }}>
            <td height="30" colSpan={1} style={{ height: '15.00pt' }}></td>
            <td
              className="xl69"
              colSpan={5}
              style={{ borderRight: 'none', borderBottom: 'none' }}
            >
              联系电话：{mainOrder.customerContactNumber}
            </td>
            <td className="xl70"></td>
          </tr>
          <tr height="30" style={{ height: '15.00pt' }}>
            <td height="30" colSpan={1} style={{ height: '15.00pt' }}></td>
            <td
              className="xl69"
              colSpan={5}
              style={{ borderRight: 'none', borderBottom: 'none' }}
            >
              送货地址：{mainOrder.customerShippingAddress}
            </td>
          </tr>
          <tr height="30" style={{ height: '15.00pt' }}>
            <td height="30" colSpan={1} style={{ height: '15.00pt' }}></td>
            <td className="xl71" colSpan={3}>
              货品名称
            </td>
            <td className="xl71" colSpan={3}>
              规格
            </td>
            <td className="xl71" colSpan={2}>
              单位
            </td>
            <td className="xl71" colSpan={1}>
              数量
            </td>
            <td className="xl71" colSpan={4}>
              备注
            </td>
          </tr>

          {columns}

          <tr style={{ height: '19.00pt' }}>
            <td height="30" colSpan={1} style={{ height: '15.00pt' }}></td>
            <td
              className="xl74"
              colSpan={3}
              style={{
                borderRight: '0.5pt solid windowtext',
                borderBottom: '0.5pt solid windowtext',
              }}
            >
              合计
            </td>
            <td
              className="xl74"
              colSpan={10}
              style={{
                textAlign: 'left',
                borderRight: '0.5pt solid windowtext',
                borderBottom: '0.5pt solid windowtext',
              }}
            >
              {totalQuantity}
            </td>
          </tr>

          <tr style={{ height: '19.00pt' }}>
            <td height="30" colSpan={1} style={{ height: '15.00pt' }}></td>
            <td
              className="xl74"
              colSpan={3}
              style={{
                borderRight: '0.5pt solid windowtext',
                borderBottom: '0.5pt solid windowtext',
              }}
            >
              摘要
            </td>
            <td
              className="xl74"
              colSpan={10}
              style={{
                textAlign: 'left',
                borderRight: '0.5pt solid windowtext',
                borderBottom: '0.5pt solid windowtext',
              }}
            ></td>
          </tr>

          <tr style={{ height: '19.00pt' }}>
            <td style={{ height: '19.00pt' }}></td>
            <td className="xl73">销货单位</td>
            <td
              className="xl74"
              colSpan={2}
              style={{
                borderRight: '0.5pt solid windowtext',
                borderBottom: '0.5pt solid windowtext',
              }}
            >
              发货地址
            </td>
            <td
              className="xl74"
              colSpan={4}
              style={{
                textAlign: 'left',
                borderRight: '0.5pt solid windowtext',
                borderBottom: '0.5pt solid windowtext',
              }}
            >
              广东省东莞市大朗镇松木山祥明路38号
            </td>
            <td className="xl73" colSpan={2}>
              开户银行及账号
            </td>
            <td
              className="xl74"
              colSpan={4}
              style={{
                textAlign: 'left',
                borderRight: '0.5pt solid windowtext',
                borderBottom: '0.5pt solid windowtext',
              }}
            >
              广发银行股份有限公司东莞松山湖支行
              <br />
              106016516010004141
            </td>
          </tr>

          <tr style={{ height: 30 }}>
            <td height="30" style={{ height: '15.00pt' }}></td>
            <td className="xl76" colSpan={3} style={{ msoIgnore: 'colSpan' }}>
              客户签名：
            </td>
            <td className="xl76" colSpan={3}>
              仓管员：Luo YH
            </td>
            <td
              className="xl78"
              colSpan={4}
              style={{ borderRight: 'none', borderBottom: 'none' }}
            >
              业务员：{salesCode}
            </td>
            <td
              className="xl78"
              colSpan={2}
              style={{ borderRight: 'none', borderBottom: 'none' }}
            >
              开单人：莫丽娟
            </td>
          </tr>
          <tr style={{ display: 'none', width: 0 }}>
            <td width="26" style={{ width: 13 }}></td>
            <td width="53" style={{ width: 26 }}></td>
            <td width="116" style={{ width: 58 }}></td>
            <td width="170" style={{ width: 85 }}></td>
            <td width="165" style={{ width: 83 }}></td>
            <td width="96" style={{ width: 48 }}></td>
            <td width="114" style={{ width: 57 }}></td>
          </tr>
        </table>
      </div>
    </div>
  );
};