import React, { useRef, useState, useEffect } from 'react';
import moment from 'moment';
import { Button } from 'antd';
import { useSearchParams } from 'react-router-dom';
import { getGuaranteeTask } from '@/services/guaranteeTask';
import { getGuaranteeDetailList } from '@/services/guaranteeTask';
import Styles from './style.less';

export default (props) => {
  const [dataSource, setDataSource] = useState({});
  const [list, setList] = useState([]);
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id');

  const onPrint = () => {
    window.print();
  }
  
  useEffect(() => {
    if (id) {
      // setLoading(true);
      getGuaranteeTask(id).then(res => {
        // setLoading(false);
        setDataSource(res);
      }).catch(() => {
        // setLoading(false);
      });
      
      // setLoading(true);
      getGuaranteeDetailList({ pageNum: 1, pageSize: 500, guaranteeId: id }).then(res => {
        // setLoading(false);
        setList(res.records || []);
      }).catch(() => {
        // setLoading(false);
      })
    }
  }, [id]);

  const details = list.map(x => `${x.dishName} × ${x.dishAmount}`).join('，');
  const startDate = dataSource.startDate ? moment(dataSource.startDate).format('YYYY-MM-DD') : '';
  const endDate = dataSource.endDate ? moment(dataSource.endDate).format('YYYY-MM-DD') : '';
  const dateStr = `${startDate} ~ ${endDate}`;

  return (
    <div className={Styles['print-page']}>
      <table className={Styles['print-table']}>
        {/* col 用于固定宽度 */}
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
        <thead>
          <tr>
            <th className={Styles['title']} colSpan={8}>江苏省海安军供站军供保障受领单</th>
          </tr>
          <tr className={Styles['sub-title']}>
            <th colSpan={2}><div>军代表：{dataSource.deputyMan || ' '}</div></th>
            <th colSpan={2}><div>电话：{dataSource.deputyPhone || ' '}</div></th>
            <th colSpan={2}><div>通报时间：{dataSource.gotDate || ' '}</div></th>
            <th colSpan={2}><div>受领人：{dataSource.receiver || ' '}</div></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><div>保障序号</div></td>
            <td colSpan={2}><div>{dataSource.guaranteeNo || ' '}</div></td>
            <td><div>军运号</div></td>
            <td colSpan={2}><div>{dataSource.transportNo || ' '}</div></td>
            <td><div>车次</div></td>
            <td><div>{dataSource.tripsNo || ' '}</div></td>
          </tr>
          <tr>
            <td><div>保障日期</div></td>
            <td colSpan={3}>{dateStr}</td>
            <td><div>保障时间</div></td>
            <td colSpan={3}>{dataSource.timeRange || ' '}</td>
          </tr>
          <tr>
            <td rowSpan={2}><div>保障人数</div></td>
            <td rowSpan={2}>{dataSource.totalPersonNum || ' '}</td>
            <td><div>其中回民</div></td>
            <td>{dataSource.huiPersonNum || ' '}</td>
            <td rowSpan={2}><div>伙食标准</div></td>
            <td colSpan={3}>{dataSource.standard || ' '}</td>
          </tr>
          <tr>
            <td className={Styles['bd-left']}><div>其中病号</div></td>
            <td>{dataSource.patientNum || ' '}</td>
            <td colSpan={3}>套餐: {dataSource.packageName || ' '}</td>
          </tr>
          <tr>
            <td><div>保障地点</div></td>
            <td colSpan={7}>{dataSource.address || ' '}</td>
          </tr>
          <tr>
            <td><div>部队联系人</div></td>
            <td colSpan={3}>{dataSource.concatPerson || ' '}</td>
            <td><div>联系电话</div></td>
            <td colSpan={3}>{dataSource.concatPhone || ' '}</td>
          </tr>
          <tr>
            <td><div>制餐人</div></td>
            <td colSpan={3}>{dataSource.chef || ' '}</td>
            <td><div>联系电话</div></td>
            <td colSpan={3}>{dataSource.chefPhone || ' '}</td>
          </tr>
          <tr>
            <td><div>配送人</div></td>
            <td colSpan={3}>{dataSource.deliveryMan || ' '}</td>
            <td><div>联系电话</div></td>
            <td colSpan={3}>{dataSource.deliveryPhone || ' '}</td>
          </tr>
          <tr className={Styles['cell-lg']}>
            <td>配餐明细</td>
            <td colSpan={7}><div>{details}</div></td>
          </tr>
          <tr className={Styles['cell-lg']}>
            <td>备注</td>
            <td colSpan={7}><div>{dataSource.remark || ' '}</div></td>
          </tr>
        </tbody>
      </table>
      <div className={Styles['print-btn']}>
        <Button type="primary" onClick={onPrint}>打印</Button>
      </div>
      <div></div>
    </div>
  )
}
