<template>
    <div v-if="$store.state.showPayBox" class="pay-box-wrapper">
        <div class="pay-box shadow-2xl">

            <div class="pb-header">
                <img @click="$store.commit('HIDE_PAY_BOX')" class="w-30px h-30px" src="/imgs/logion-close.png">
            </div>

            <div class="pb-body">
                <template v-if="$store.state.payBoxType === 'vip'">
                    <div class="order-num">订单号：{{$store.state.vipPayData.number}}</div>
                    <table class="order-table">
                        <thead>
                        <tr>
                            <th>套餐名称</th>
                            <th>会员时长</th>
                            <th>金额</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{{$store.state.vipPayData.refVipSmName}}</td>
                            <td>{{$store.state.vipPayData.expire}}</td>
                            <td>{{$store.state.vipPayData.sum}}</td>
                        </tr>
                        </tbody>
                    </table>
                </template>


                <table v-if="$store.state.payBoxType === 'product'" class="order-table">
                    <thead>
                    <tr>
                        <th>产品图</th>
                        <th>产品名称</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>金额</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="text-center">
                            <div class="flex justify-center"><img :src="$store.state.productPayData.coverUrl" class="w-100px h-100px object-contain" /></div>
                        </td>
                        <td>{{$store.state.productPayData.productName}}</td>
                        <td>{{$store.state.productPayData.price}}</td>
                        <td>{{$store.state.productPayData.num}}</td>
                        <td>{{$store.state.productPayData.sum}}</td>
                    </tr>

                    </tbody>
                </table>
                <div class="pay-info">
                    <div v-if="$store.state.payBoxType === 'vip'" class="sum">应付金额（含税）: <span class="text-[#FF0000]">¥{{$store.state.vipPayData.sum}}</span></div>
                    <div v-if="$store.state.payBoxType === 'product'" class="sum">应付金额（含税）: <span class="text-[#FF0000]">¥{{$store.state.productPayData.sum}}</span>
                    </div>
                    <div class="tips">*有任何支付问题请联系官方客服：400-0000-000</div>
                    <div class="pay-type">请选择支付方式</div>
                    <div>
                        <el-radio-group>
                            <el-radio>线下汇款（银行账户或银行卡汇款）</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="pt-60px">
                        <el-button @click="handlePay" type="primary" class="w-200px h-60px">立即支付</el-button>
                    </div>
                </div>
            </div>


        </div>
    </div>
</template>

<script>
    export default {
        name: "pay-box",
        data() {
            return {
                show: false,
            }
        },
        methods: {
            handlePay() {
                this.$store.commit('HIDE_PAY_BOX');
                if(this.$store.state.payBoxType === 'vip'){
                    this.$router.push('/upload-pay-pic?code=' + this.$store.state.vipPayData.code + '&type=' + this.$store.state.payBoxType)
                }else{
                    this.$router.push('/upload-pay-pic?code=' + this.$store.state.productPayData.code + '&type=' + this.$store.state.payBoxType)

                }
            }
        },
        async created() {



        }
    }
</script>

<style scoped>
    .pay-box-wrapper {
        position: fixed;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
        z-index: 99;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pay-box {
        width: 1200px;
        background-color: white;
        padding-bottom: 30px;
    }


    .pb-header {
        padding: 30px;
        display: flex;
        justify-content: flex-end;
    }


    .order-table {
        width: 100%;
    }


    .pb-body {
        padding-left: 60px;
        padding-right: 60px;
    }

    .pb-body > table {
        width: 100%;
        font-size: 20px;
        font-weight: 400 !important;
        color: #000000;
        background-color: #F6F7F9;
        border: 1px solid #EEEEEE;
        margin-top: 32px;
    }

    .pd-body table th, td {
        border: 1px solid #EEEEEE;
    }

    .pb-body table td {
        color: #707070;
        line-height: 70px;
        text-align: center;
    }

    .pb-body table th {
        font-weight: normal;
        border: 1px solid #EEEEEE;
        line-height: 70px;
        text-align: center;
    }

    .order-num {
        font-size: 20px;
        font-weight: bold;
    }

    .pay-info {
        border-radius: 10px;
        margin-top: 40px;
        background: #F6F7F9;
        padding: 48px 64px;
    }

    .sum {
        font-size: 30px;
    }

    .tips {
        padding-top: 30px;
        font-size: 16px;
        color: #707070;
    }

    .pay-type {
        font-size: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
    }


</style>