<template>
    <view class="membership-order">
        <view class="mo-header">
            <view class="mh-view">{{orderInfo.stadium_name || '-'}}</view>
            <text :class="['mh-text', orderInfo.member_card.status == 1?'active':'']">
                {{
                    orderInfo.member_card.status == 1 ? '使用中' :
                    orderInfo.member_card.status == 0 ? '无效' : '-'
                }}
            </text>
        </view>
        <view class="mo-section">
            <view class="ms-line">
                <view class="ml-view">订单编号：</view>
                <view class="ml-view">
                    <view class="mv-view">{{orderInfo.order_no || '-'}}</view>
                </view>
            </view>
            <view class="ms-line">
                <view class="ml-view">用户昵称：</view>
                <view class="ml-view">
                    <view class="mv-view">{{orderInfo.nickname || '-'}}</view>
                </view>
            </view>
            <view class="ms-line">
                <view class="ml-view">支付时间：</view>
                <view class="ml-view">
                    <view class="mv-view">{{orderInfo.pay_time || '-'}}</view>
                </view>
            </view>
            <view class="ms-line">
                <view class="ml-view">会员卡信息：</view>
                <view class="ml-view">
                    <view class="mv-view">{{orderInfo.member_card_name || '-'}}</view>
                </view>
            </view>
            <view class="ms-line">
                <view class="ml-view">会员卡余额：</view>
                <view class="ml-view">
                    <view class="mv-view"><text class="mv-text">¥{{orderInfo.balance || '0'}}</text></view>
                </view>
            </view>
            <view class="ms-line">
                <view class="ml-view">场地折扣：</view>
                <view class="ml-view">
                    <view class="mv-view">{{orderInfo.member_card.discount || '-'}}</view>
                </view>
            </view>
            <view class="ms-line">
                <view class="ml-view">购买途径：</view>
                <view class="ml-view">
                    <view class="mv-view">{{orderInfo.desc || '-'}}</view>
                </view>
            </view>
        </view>
        <view class="mo-bot">
            <view class="mb-view">支付方式：{{zh_pay_type(orderInfo.pay_type)}}</view>
            <view class="mb-view">实付款： ¥{{orderInfo.pay_amount || '-'}}</view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        orderInfo: {
            type: Object,
            default: {},
        }
    },
    computed: {
        zh_pay_type(){
            // 支付类型 0微信支付1支付宝支付2会员卡支付
            return status =>{
                const _obj = {
                    '0': '微信支付',
                    '1': '支付宝支付',
                    '2': '会员卡支付',
                }
                return _obj[`${status}`] || '-'
            }
        },
    }
}
</script>

<style lang="scss" scoped>
    @import "../../style/public.scss";
    .membership-order{
        padding: 0 20upx;
        background-color: #fff;
        border-radius: 10upx;
        .mo-header{
            margin-bottom: 18upx;
            height: 98upx;
            line-height: 96upx;
            border-bottom: 2upx solid #D8D8D8;
            @include centerFlex(space-between);
            .mh-view{
                font-size: 28upx;
                font-weight: 500;
                color: #1a1a1a;
                @include textHide(1);
            }
            .mh-text{
                flex-shrink: 0;
                font-size: 28upx;
                color: #9C9C9F;
                &.active{
                    color: $themeColor;
                }
            }
        }
        .mo-section{
            padding-bottom: 30upx;
            .ms-line{
                display: flex;
                .ml-view,.mv-view{
                    line-height: 40upx;
                    font-size: 24upx;
                    color: #9c9c9f;
                }
                .ml-view{
                    &:first-child{
                        flex-shrink: 0;
                    }
                    &+.ml-view{
                        flex-grow: 1;
                        .mv-view{
                            .mv-text{
                                color: #1A1A1A;
                            }
                            @include textHide(1);
                        }
                    }
                }
            }
        }
        .mo-bot{
            height: 90upx;
            border-top: 2upx solid #D8D8D8;
            @include centerFlex(space-between);
            .mb-view{
                line-height: 40upx;
                font-size: 24upx;
                color: #9c9c9f;
                &:first-child{
                    flex-shrink: 0;
                }
                &:last-child{
                    flex-grow: 1;
                    text-align: right;
                    @include textHide(1);
                }
            }
        }
    }
</style>