import React from 'react';
import { Button, Card, Table, message, Descriptions, Col, Row } from 'antd';
import { getDeviceJobByOrg, exportDeviceJobByOrg } from '@/services/job';

export default (props) => {
  const { machine, userId } = props;

  const columns = [
    {
      title: '设备类型',
      dataIndex: 'deviceKind',
      key: 'deviceKind',
      render: (t) => (t === 'shensong' ? '深松' : t === 'feifang' ? '飞防' : '-'),
    },
    {
      title: '设备编号',
      dataIndex: 'deviceNo',
      key: 'deviceNo',
    },
    {
      title: '作业面积(亩)',
      dataIndex: 'jobArea',
      key: 'jobArea',
    },
    {
      title: '耕深(厘米)',
      dataIndex: 'depth',
      key: 'depth',
    },
    {
      title: '平均喷量(升/亩)',
      dataIndex: 'traffic',
      key: 'traffic',
    },
    {
      title: '作业时间',
      dataIndex: 'jobTime',
      key: 'jobTime',
    },
  ];

  const [loading, setLoading] = React.useState(false);
  const [list, setList] = React.useState([]);
  const [total, setTotal] = React.useState(0);
  const [page, setPage] = React.useState({ current: 1, pageSize: 10, total: 0 });

  const pagination = React.useMemo(
    () => ({
      ...page,
      showTotal: (total, range) => `总计 ${total} 条`,
      onChange: (page, pageSize) => {
        setPage({
          current: page,
          pageSize,
          total: 0,
        });

        queryData({
          machineryId: machine.machineryId,
          userId,
          pageNum: page,
          pageSize,
        });
      },
    }),
    [page, machine, userId],
  );

  const queryData = (params) => {
    setLoading(true);
    getDeviceJobByOrg({ ...params, startDate: '2000-01-01', endDate: '2099-12-31' })
      .then((res) => {
        setLoading(false);
        const { list: dtList, totalArea } = res;
        setList(dtList.records || []);
        setTotal(totalArea || 0);
        setPage({
          current: dtList.current,
          pageSize: dtList.size,
          total: dtList.total,
        });
      })
      .catch((err) => {
        console.error(err);
        setLoading(false);
      });
  };

  React.useEffect(() => {
    if (machine) {
      const { machineryId } = machine;
      queryData({
        machineryId,
        userId,
        pageNum: 1,
        pageSize: 10,
      });
    }
  }, [machine, userId]);

  return (
    <div>
      <div style={{ textAlign: 'left', marginBottom: '16px', fontSize: '16px' }}>
        <span>总作业面积 </span>
        <strong>{total}</strong>
        <span> 亩</span>
      </div>
      <Table
        loading={loading}
        rowKey="jobNo"
        columns={columns}
        dataSource={list}
        pagination={pagination}
      />
    </div>
  );
};