import React, { useState, useEffect } from 'react';
import { message, Modal } from 'antd';
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions';
import api from './service';

let defaultData = {};
const OrderflowDetail = (props) => {
  const { createModalVisible, onCancel } = props;
  return (
    <Modal
      title={'订单详情'}
      width={1000}
      visible={props.createModalVisible}
      bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null}
      destroyOnClose
      onCancel={() => onCancel()}
      maskClosable={false}
    >
      <ProDescriptions
        request={async () => {
          defaultData = await api.GetOrderDetails({ id: props.values.id });
          return Promise.resolve({
            success: true,
            data: defaultData,
          });
        }}
        columns={[
          {
            title: '会员姓名',
            key: 'customer_Name',
            dataIndex: 'customer_Name',
          },
          {
            title: '手机号',
            key: 'customer_Tel',
            dataIndex: 'customer_Tel',
          },
          {
            title: '订单流水',
            key: 'order_Number',
            dataIndex: 'order_Number',
          },
          {
            title: '订单号',
            key: 'transaction_ID',
            dataIndex: 'transaction_ID',
          },
          {
            title: '交易单号',
            key: 'trade_no',
            dataIndex: 'trade_no',
          },
          {
            title: '排队号',
            key: 'order_SortID',
            dataIndex: 'order_SortID',
          },
          {
            title: '折扣',
            key: 'discount',
            dataIndex: 'discount',
          },
          {
            title: '实付金额',
            dataIndex: 'order_RealMoney',
            valueType: 'money',
            fieldProps: {
              moneySymbol: '¥',
            },
          },
          {
            title: '应付金额',
            dataIndex: 'order_OriginalMoney',
            valueType: 'money',
            fieldProps: {
              moneySymbol: '¥',
            },
          },
          {
            title: '实付金额(退)',
            dataIndex: 'refundRealMoney',
            valueType: 'money',
            fieldProps: {
              moneySymbol: '¥',
            },
          },
          {
            title: '应付金额(退)',
            dataIndex: 'refundOriginalMoney',
            valueType: 'money',
            fieldProps: {
              moneySymbol: '¥',
            },
          },

          {
            title: '数量',
            dataIndex: 'order_Count',
            hideInSearch: true,
          },
          {
            title: '支付方式',
            dataIndex: 'payMode',
            key: 'payMode',
          },

          {
            title: '订单状态',
            dataIndex: 'order_Status',
            key: 'order_Status',
          },
        ]}
      ></ProDescriptions>
      <ProTable
        rowKey="id"
        request={async () => {
          defaultData = await api.GetOrderDetails({ id: props.values.id });
          return {
            data: defaultData.detailList,
            success: true,
          };
        }}
        columns={[
          {
            title: '商品分类',
            key: 'goodsTypeName',
            dataIndex: 'goodsTypeName',
          },
          {
            title: '商品名称',
            key: 'goodsName',
            dataIndex: 'goodsName',
          },
          {
            title: '应付金额',
            key: 'originalMoney',
            dataIndex: 'originalMoney',
            valueType: 'money',
            fieldProps: {
              moneySymbol: '¥',
            },
          },
          {
            title: '实付金额',
            dataIndex: 'realMoney',
            valueType: 'money',
            fieldProps: {
              moneySymbol: '¥',
            },
          },
          {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (_, record) => [
              <a
                key="config"
                onClick={() => {
                  api.printsmallticket({ "orderId": props.values.id,"subOrderId":record.id})
                    .then(re => {
                      debugger
                      if (re.data) {
                        message.success('打印成功');
                      } else {
                        message.error('打印失败');
                      }

                    })

                }} >
                打印小票
              </a>,
            ],
          },

        ]}
        toolBarRender={false}
        search={false}
      />
    </Modal>
  );
};

export default OrderflowDetail;
