import React, { useState, useEffect } from 'react';
import { Button, Card, Image, Timeline, message, Tag } from 'antd';
import styles from './index.less';
import { ExclamationCircleOutlined, UserOutlined, RedEnvelopeOutlined, WhatsAppOutlined } from '@ant-design/icons';
import { history } from 'umi';
import orderReportAPI from "./service";
import { PageContainer } from '@ant-design/pro-layout';

const orderNumber = history.location.query.orderNumber;

/**
 * 订单详情
 * @returns 
 */
export default function Index() {

    const [orderInfo, setOrderInfo] = useState({
        memberInfo: {},             //用户信息
        goodsInfo: [],              //商品信息
        informationRefundInfo: [],  //售后信息
        discountInfo: []            //优惠信息
    });

    const [orderStatus, setOrderStatus] = useState('');

    const onQueryOrderDetail = async () => {
        if (orderNumber) {
            const response = await orderReportAPI.getOrderReporByNumber(orderNumber);
            if (response.statusCode === 200) {
                setOrderInfo(response.data);
                orderIsNormal(response.data);
            } else {
                message.error(response.errors || '订单详情获取失败');
            }
        }
    }

    const orderIsNormal = (order) => {
        let orderStatus = '';
        switch (order.orderStatus) {
            case 0:
                orderStatus = '未付款';
                break;
            case 1:
                orderStatus = '已付款';
                break;
            case -1:
                orderStatus = '退单申请';
                break;
            case -2:
                orderStatus = '退单中';
                break;
            case -3:
                orderStatus = '已退单';
                break;
            case -4:
                orderStatus = '取消交易';
                break;
            case -5:
                orderStatus = '撤销申请';
                break;
        }
        setOrderStatus(orderStatus);
    }

    useEffect(() => {
        onQueryOrderDetail();
    }, []);

    return (
        <PageContainer>
            <div className={styles['order-detail-container']}>
                {/* 用户基本信息 */}
                <div className={styles['order-head-card']}>
                    <div className={styles['order-head']}>
                        <div className={styles['order-number']}>
                            #{orderInfo.sortId}
                        </div>
                        <div className={styles['order-cook-state']}>
                        <div className={styles['order-status-true']}>{orderStatus}</div>
                        </div>
                        <div className={styles['order-cook-date']}>
                            {orderInfo.createdAt}
                        </div>
                    </div>
                    <div className={styles['member-info']}>
                        <div className={styles['member-info-img']}>
                            <Image
                                width={100}
                                height={100}
                                src={orderInfo.memberInfo.headUrl}
                                fallback="data:image/png;base64,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"
                            />
                        </div>
                        <div className={styles['member-info-row']}>
                            <div className={styles['member-info-head']}>
                                {orderInfo.memberInfo.memberName || '系统用户'}
                            </div>
                            <div className={styles['member-info-label']}>
                                <span>#门店新客</span>
                                <span>#门店会员</span>
                            </div>
                        </div>
                    </div>
                    <div className={styles['member-info-privacy']}>
                        <ExclamationCircleOutlined />
                        <span>为保证服务体验，您在拨打或接听隐私号电话时，可能被录音</span>
                    </div>
                    <div className={styles['member-info-item']}>
                        <span className={styles['member-info-prefix']}>
                            顾客电话
                        </span>
                        <span className={styles['member-info-suffix']}>
                            {orderInfo.memberInfo.phone || '暂无电话'}
                        </span>
                    </div>
                    <div className={styles['prepare-meals']}>
                        <div className={styles['prepare-meals-title']}>
                            优惠信息
                        </div>
                        <div className={styles['prepare-meals-status']}>
                            {
                                orderInfo.discountInfo?.map(discountItem => {
                                    return (
                                        <div>
                                            {discountItem.type === 1 ? <Tag icon={<UserOutlined />} color="#f50">{discountItem.name}：{discountItem.value}</Tag> : null}
                                            {discountItem.type === 2 ? <Tag icon={<RedEnvelopeOutlined />} color="#87d068">{discountItem.name}：{discountItem.value}</Tag> : null}
                                            {discountItem.type === 3 ? <Tag icon={<WhatsAppOutlined />} color="#108ee9">{discountItem.name}：{discountItem.value}</Tag> : null}
                                        </div>
                                    )
                                })
                            }

                        </div>
                    </div>
                </div>
                {/* 订单数据 */}
                <div className={styles['order-base-card']}>
                    <div className={styles['goods-title']}>
                        订单信息
                    </div>
                    <div className={styles['goods-calc-item']}>
                        <div className={styles['goods-calc-prefix']}>订单编号</div>
                        <div className={styles['goods-calc-sufix']}>{orderInfo.orderNumber}</div>
                    </div>
                    <div className={styles['goods-calc-item']}>
                        <div className={styles['goods-calc-prefix']}>支付方式</div>
                        <div className={styles['goods-calc-sufix']}>微信支付</div>
                    </div>
                    <div className={styles['goods-calc-item']}>
                        <div className={styles['goods-calc-prefix']}>下单时间</div>
                        <div className={styles['goods-calc-sufix']}>{orderInfo.createdAt}</div>
                    </div>
                    <div className={styles['goods-calc-item']}>
                        <div className={styles['goods-calc-prefix']}>就餐人数</div>
                        <div className={styles['goods-calc-sufix']}>商家按餐量提供</div>
                    </div>
                    <div className={styles['goods-calc-item']}>
                        <div className={styles['goods-calc-prefix']}>桌台号码</div>
                        <div className={styles['goods-calc-sufix']}>0</div>
                    </div>
                </div>
                {/* 商品信息 */}
                <div className={styles['goods-card']}>
                    <div className={styles['goods-title']}>
                        商品信息
                    </div>
                    <div className={styles['goods-list']}>
                        {
                            orderInfo.goodsInfo.map(item => {
                                return (
                                    <div className={styles['goods-item']} key={item.goodsId}>
                                        <div className={styles['goods-item-img']}>
                                            <Image
                                                width={80}
                                                height={80}
                                                src={item.goodsImg}
                                                fallback="data:image/png;base64,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"
                                            />
                                        </div>
                                        <div className={styles['goods-item-name']}>
                                            {item.goodsName || '暂无名称'}
                                        </div>
                                        <div className={styles['goods-item-price']}>
                                            ￥{item.memberPrice}
                                        </div>
                                        <div className={styles['goods-item-count']}>
                                            x{item.count}份
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    {/* 小计 */}
                    <div className={styles['goods-calc']}>
                        <div className={styles['goods-calc-title']}>小计</div>
                        <div className={styles['goods-calc-item']}>
                            <div className={styles['goods-calc-prefix']}>优惠金额</div>
                            <div className={styles['goods-calc-sufix']}>￥{orderInfo.discountMoney}</div>
                        </div>
                        <div className={`${styles['goods-calc-item']} ${styles['goods-calc-pay']}`}>
                            <div className={styles['goods-calc-prefix']}>支付金额</div>
                            <div className={styles['goods-calc-sufix']}>￥{orderInfo.orderRealMoney}</div>
                        </div>
                    </div>
                </div>
                {/* 售后信息 */}
                <div className={styles['sale-after-card']}>
                    <div className={styles['goods-title']}>
                        售后信息
                    </div>
                    <Timeline>
                        {
                            orderInfo.informationRefundInfo.length > 0 ?
                                orderInfo.informationRefundInfo.map(item => {
                                    return (
                                        <Timeline.Item color="green" key={item.id}>
                                            <div className={styles['sale-after-line']}>
                                                {item.createdAt} {item.refundDesc}
                                            </div>
                                        </Timeline.Item>
                                    )
                                })
                                :
                                <Timeline.Item color="green">
                                    暂无售后信息
                                </Timeline.Item>
                        }
                    </Timeline>
                </div>
            </div>
        </PageContainer>

    )
}
