<template>
    <div>
        <el-form :model="queryForm" inline @submit.native.prevent="queryByTradeNo">
            <el-form-item label="订单号" prop="outTradeNo">
                <el-input v-model="queryForm.outTradeNo" placeholder="请输入订单号查询" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryByTradeNo" :loading="loading">查询</el-button>
                <el-button @click="resetHandle">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="order_info">
            <div class="item">
                <div class="title">
                    用户信息
                </div>
                <template v-if="orderInfo.userInfo">
                    <div class="row">
                        <span> 昵称：</span>{{ orderInfo.userInfo.userName }}
                    </div>
                    <div class="row">
                        <span> 手机号：</span>{{ orderInfo.userInfo.phone }}
                    </div>
                    <div class="row">
                        <span> 支付宝账号：</span>{{ orderInfo.userInfo.zhiFuBao }}
                    </div>
                    <div class="row">
                        <span>支付宝姓名：</span> {{ orderInfo.userInfo.zhiFuBaoName }}
                    </div>
                    <div class="row">
                        <span>状态：</span>
                        <span v-if="orderInfo.userInfo.status == 1" style="color: #67C23A;">正常</span>
                        <span v-else style="color: #F56C6C;">异常</span>
                    </div>
                    <div class="row" v-if="!orderInfo.userInfo.status">
                        <span>异常原因：</span> <span style="color: #F56C6C;">{{ orderInfo.userInfo.platform }}</span>
                    </div>
                </template>
                <div class="empty" v-else>空空如也~</div>
            </div>
            <div class="item">
                <div class="title">
                    <span>实名认证信息</span>
                </div>
                <template v-if="orderInfo.authInfo">
                    <div class="row">
                        <span>真实姓名：</span> {{ orderInfo.authInfo.certName }}
                    </div>
                    <div class="row">
                        <span>身份证号：</span> {{ orderInfo.authInfo.certNo }}
                    </div>
                    <div class="row">
                        <span>银行名称：</span> {{ orderInfo.authInfo.bankName }}
                    </div>
                    <div class="row">
                        <span>银行卡号：</span> {{ orderInfo.authInfo.accountNo }}
                    </div>
                    <div class="row">
                        <span>预留手机号：</span> {{ orderInfo.authInfo.mobile }}
                    </div>
                </template>
                <div class="empty" v-else>空空如也~</div>
            </div>
            <div class="item">
                <div class="title">
                    提现信息
                </div>
                <template v-if="orderInfo.withdrawTotal">
                    <div class="row">
                        <span>成功合计：</span> {{ orderInfo.withdrawTotal.success.total }}
                    </div>
                    <div class="row">
                        <span>成功笔数：</span> {{ orderInfo.withdrawTotal.success.count }}
                    </div>
                    <div class="row">
                        <span>失败合计：</span> {{ orderInfo.withdrawTotal.fail.total }}
                    </div>
                    <div class="row">
                        <span>失败笔数：</span> {{ orderInfo.withdrawTotal.fail.count }}
                    </div>
                    <div class="row">
                        <span>审核中合计：</span> {{ orderInfo.withdrawTotal.auditing.count }}
                    </div>
                    <div class="row">
                        <span>审核中笔数：</span> {{ orderInfo.withdrawTotal.auditing.count }}
                    </div>
                    <div class="row">
                        <span>其他合计：</span> {{ orderInfo.withdrawTotal.other.count }}
                    </div>
                    <div class="row">
                        <span>其他笔数：</span> {{ orderInfo.withdrawTotal.other.count }}
                    </div>
                </template>
                <div class="empty" v-else>空空如也~</div>
            </div>
            <div class="item">
                <div class="title">
                    支付信息
                </div>
                <template v-if="orderInfo.payTotal">
                    <div class="row">
                        <span>成功合计：</span> {{ orderInfo.payTotal.success.total }}
                    </div>
                    <div class="row">
                        <span>成功笔数：</span> {{ orderInfo.payTotal.success.count }}
                    </div>
                    <div class="row">
                        <span>失败合计：</span> {{ orderInfo.payTotal.fail.total }}
                    </div>
                    <div class="row">
                        <span>失败笔数：</span> {{ orderInfo.payTotal.fail.count }}
                    </div>
                    <div class="row">
                        <span>未付款合计：</span> {{ orderInfo.payTotal.unpaid.count }}
                    </div>
                    <div class="row">
                        <span>未付款笔数：</span> {{ orderInfo.payTotal.unpaid.count }}
                    </div>
                </template>
                <div class="empty" v-else>空空如也~</div>
            </div>
        </div>
    </div>
</template>

<script>
import { queryByTradeNo } from '@/api/viplist.js'
export default {
    data() {
        return {
            loading: false,
            queryForm: {
                // outTradeNo: '7ed7edc900884b6dabf871a330c3e13b-1075149450307057439'
                outTradeNo: ''
            },
            orderInfo: ''
        }
    },
    methods: {
        // 重置
        resetHandle() {
            this.queryForm.outTradeNo = ''
            this.orderInfo = ''
        },
        // 根据订单号查询
        async queryByTradeNo() {
            try {
                if (!this.queryForm.outTradeNo) return
                this.loading = true
                const res = await queryByTradeNo({ outTradeNo: this.queryForm.outTradeNo })
				console.log(res);
                if (res.data.code == 0) {
                    this.orderInfo = res.data.data
                } else {
                    this.orderInfo = ''
                    this.$message.error(res.data.msg)
                }
            } catch (error) {
                this.orderInfo = ''
                console.log(error);
            }
            this.loading = false
        }
    }
}
</script>

<style scoped lang="scss">
.order_info {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 15px;
    grid-row-gap: 15px;

    .item {
        border: 1px solid #ececec;
        padding: 15px;
        background-color: #fff;

        .title {
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 10px;
        }

        .row {
            margin-top: 10px;

            span {
                color: #999;
            }
        }

        .empty {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            padding-bottom: 45px;
        }
    }
}
</style>