import {
  Modal, Typography, Table, Button, Input,
  Statistic, Card, Row, Col, Space,
  DatePicker, Select, InputNumber
} from 'antd';
import React, { useState, useRef, useEffect, Suspense } from 'react';
import { ProFormSelect } from '@ant-design/pro-form';
import { GridContent } from '@ant-design/pro-layout';
import api from '../services';

const gridStyle = {
  width: '33%',
  textAlign: 'center',
  height: '20px',
};
const gridHeightStyle = {
  width: '100%',
  textAlign: 'center',
  height: '10px',
  marginTop: '1',
}
const SecondManage = (props) => {
  const actionRef = useRef();
  const { Text } = Typography;
  return (
    <Modal
      width={800}
      height={700}
      bodyStyle={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title="结算详情"
      visible={true}
      footer={false}
      onCancel={() => props.onCancel()}
      maskClosable={false}
    >
      <GridContent>
        <Card title="结算详情" type="inner" style={{ height: 120 }}>
          <div style={{ float: 'center', height: 100 }}>
            <Statistic style={{ float: 'center' }} title="结算金额" value={props.values.refund.settlementMoney} prefix="¥" />
          </div>
        </Card>
        {
          props.values.refund.refundOrderId != '' ? (
            <Card title="退款金额" type="inner" extra={props.values.refund.refundMoney} >
              <Card.Grid hoverable={false} style={gridHeightStyle}>商品信息</Card.Grid><br />
              {
                props.values.goodsList == undefined ? '' : (
                  props.values.goodsList.map((item, index) => {
                    return (<Card.Grid hoverable={false} style={{
                      width: '100%',
                      textAlign: 'center',
                    }}><Input value={item.goodsName} style={{ width: '33%', textAlign: 'center' }} disabled={false} />
                      <Input value={`${item.goodsNum}份`} style={{ width: '33%', textAlign: 'center' }} />
                      <Input value={`¥ ${item.goodsRealPrice}`} style={{ width: '33%', textAlign: 'center' }} /></Card.Grid>);
                  })
                )
              }
            </Card>
          ) : (
            <Card title="商品总价" type="inner" extra={props.values.refund.orderOriginalMoney} >
              <Card.Grid hoverable={false} style={gridHeightStyle}>商品信息</Card.Grid><br />
              {
                props.values.goodsList == undefined ? '' : (
                  props.values.goodsList.map((item, index) => {
                    return (<Card.Grid hoverable={false} style={{
                      width: '100%',
                      textAlign: 'center',
                    }}><Input value={item.goodsName} style={{ width: '33%', textAlign: 'center' }} disabled={false} />
                      <Input value={`${item.goodsNum}份`} style={{ width: '33%', textAlign: 'center' }} />
                      <Input value={`¥ ${item.goodsRealPrice}`} style={{ width: '33%', textAlign: 'center' }} /></Card.Grid>);
                  })
                )
              }
            </Card>
          )
        }
        {
          props.values.refund.refundOrderId == '' && props.values.refund.discountMoney != 0 ? (
            <Card style={{ height: 100 }} type="inner" title="优惠支出" extra={props.values.refund.discountMoney}>
              <Card.Grid hoverable={false} style={gridStyle}>{(props.values.refund.couponTypeValue == '' || props.values.refund.couponTypeValue == null) ? '优惠支出' : props.values.refund.couponTypeValue}</Card.Grid>
              <Card.Grid hoverable={false} style={{
                width: '66%',
                textAlign: 'right',
                height: '20px',
              }}>{`¥ ${props.values.refund.discountMoney}`}</Card.Grid>
            </Card>
          ) : (null)
        }
        {
          props.values.refund.refundOrderId == '' && props.values.refund.businessPrice != 0 ? (
            <Card style={{ height: 100 }} type="inner" title={props.values.refund.refundOrderId == '' ? '平台费支出' : '平台退款'} extra={props.values.refund.businessPrice}>
              <Card.Grid hoverable={false} style={gridStyle}>{props.values.refund.refundOrderId == '' ? '平台技术服务费' : '退款金额'}</Card.Grid>
              <Card.Grid hoverable={false} style={{
                width: '66%',
                textAlign: 'right',
                height: '20px',
              }}>{props.values.refund.businessPrice}¥</Card.Grid>
            </Card>
          ) : (null)
        }
        <Card type="inner" title="订单信息">
          <Card.Grid hoverable={false} style={gridStyle}>订单编号</Card.Grid>
          <Card.Grid hoverable={false} style={{
            width: '66%',
            textAlign: 'left',
            height: '10px',
          }}>{props.values.refund.orderId}</Card.Grid>
          <Card.Grid hoverable={false} style={gridStyle}>订单号</Card.Grid>
          <Card.Grid hoverable={false} style={{
            width: '66%',
            textAlign: 'left',
            height: '10px',
          }}>{props.values.refund.orderNumber}</Card.Grid>
          <Card.Grid hoverable={false} style={gridStyle}>下单时间</Card.Grid>
          <Card.Grid hoverable={false} style={{
            width: '66%',
            textAlign: 'left',
            height: '10px',
          }}> {props.values.refund.createdAt}</Card.Grid>
          <Card.Grid hoverable={false} style={gridStyle}>订单完成时间</Card.Grid>
          <Card.Grid hoverable={false} style={{
            width: '66%',
            textAlign: 'left',
            height: '10px',
          }}> {props.values.refund.completeTakeTime}</Card.Grid>
        </Card>
        {
          props.values.refund.refundOrderId != '' ? (
            <Card type="inner" title="退款订单信息">
              <Card.Grid hoverable={false} style={gridStyle}>订单编号</Card.Grid>
              <Card.Grid hoverable={false} style={{
                width: '66%',
                textAlign: 'left',
                height: '10px',
              }}> {props.values.refund.refundOrderId}</Card.Grid>
              <Card.Grid hoverable={false} style={gridStyle}>订单号</Card.Grid>
              <Card.Grid hoverable={false} style={{
                width: '66%',
                textAlign: 'left',
                height: '10px',
              }}> {props.values.refund.refundOrderNumber}</Card.Grid>
              <Card.Grid hoverable={false} style={gridStyle}>下单时间</Card.Grid>
              <Card.Grid hoverable={false} style={{
                width: '66%',
                textAlign: 'left',
                height: '10px',
              }}> {props.values.refund.refundCreatedAt}</Card.Grid>
              <Card.Grid hoverable={false} style={gridStyle}>订单完成时间</Card.Grid>
              <Card.Grid hoverable={false} style={{
                width: '66%',
                textAlign: 'left',
                height: '10px',
              }}> {props.values.refund.refundTime}</Card.Grid>
            </Card>
          ) : (null)
        }
      </GridContent>
    </Modal>
  );
};

export default SecondManage;
