import { PlusOutlined } from '@ant-design/icons';
import { Button, message, Input, Drawer, Modal } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import api from '../service';

const DetailsList = (props) => {
console.log("调试1",props);
  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      hideInTable: true,
      hideInSearch: true,
    },
    {
      title: '商品',
      dataIndex: 'name',
    },
    {
      title: '用餐时段',
      dataIndex: 'mealType',
      render: (_, record) => {
        if (record.mealType === '1') {
          return '早餐'
        }
        if (record.mealType === '2') {
          return '午餐'
        }
        if (record.mealType === '3') {
          return '晚餐'
        }
      }
    },
    {
      title: '预定数量',
      dataIndex: 'qty',
      sortDirections: ['ascend', 'descend'],
       sorter: (a, b) => a.value - b.value
    },
    {
      title: '预定时间',
      dataIndex: 'reservationTime',
    },
  ];
  return (
      <Modal
      title={'查看预定详情'}
      width={640}
      visible={props.createModalVisible}
      bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
      {<ProTable
        headerTitle="查看预定详情"
        rowKey="id"
        search={false}
        //数据绑定
        request={async (params) => {
          var goodsBomsData = [];
          var total = 0;
          if (props.values.id != undefined) {
            params['UserId'] = props.values.id;
            params['beginTime']= props.timeRange[0]._i;
            params['endTime']= props.timeRange[1]._i;
          }
          await api.GetReservationUserGoods(params).then((r) => {
            goodsBomsData = r.data.data;
            total = r.data.total;
          });
          return {
            data: goodsBomsData,
            success: true,
            total: total,
          };
        }}
        columns={columns}
      /> }
    </Modal>
  );
};

export default DetailsList;
