<template>
    <div class="conatiner">
        <div class="orderInfo">
            <span style="margin-left:25px;">订单：{{orderInfo.orderCode}}</span>
            <span style="margin-left:25px;">{{productInfo.title}}</span>
            <span style="float:right">
                <span>应付金额</span>

                <span class="price" style="margin-left:10px;">¥</span>
                <span class="price" style="color:#FC2703;margin-right:24px;font-weight:bold;">{{orderInfo.dealPrice}}</span>
            </span>
        </div>

        <div class="orderTitle">
            选择支付方式
        </div>

        <div class="orderWayTitle">
            第三方账户支付
        </div>

        <div class="payStyle">
            <template>
                <el-radio v-model="payStyle" label="余额">
                    <img style="width:45px;height:45px;margin-left:8px;border-radius:100%;vertical-align: middle;" src="../assetsPre/quckmenu.png" alt="">
                    <span style="">余额支付</span>
                </el-radio>
                <el-radio v-model="payStyle" label="支付宝">
                    <img style="width:88px;height:30px;margin-left:14px;" src="../assetsPre/pay1.png" alt="">
                </el-radio>
                <el-radio v-model="payStyle" label="微信">
                    <img style="width:125px;height:43px;margin-left:8px;" class="payIcon" src="../assetsPre/pay2.png" alt="">
                </el-radio>
                <el-radio v-model="payStyle" label="银联">
                    <img style="width:150px;height:39px;margin-left:8px;" class="payIcon" src="../assetsPre/pay3.png" alt="">
                </el-radio>
            </template>
        </div>

        <div class="pay-btn">
            <el-button class="pay" type="primary" @click="payOrder">立即支付</el-button>
        </div>
    </div>
</template>

<script>
import miniHead from '../components/MiniHead'
import menuFoot from '../pagesPre/MenuFoot'
import { mapState } from 'vuex'
export default {
    name: 'submit',
    data() {
        return {
            tableData3: [],
            productInfo: {},
            num: 1,
            remark: '',
            orderInfo: {},
            payStyle: '余额'
        }
    },
    mounted() {
        this.$http.get({
            url: '/userOrder/getOne',
            data: {
                id: this.$route.query.orderId
            }
        }).then(res => {
            if (res.success) {
                this.orderInfo = res.data
                this.productInfo = res.data.productInfo
            }
        }).catch(e => {
            console.log(e)

        })

    },
    computed: {
        ...mapState(['userInfo']),
    },
    methods: {
        payOrder() {

            this.pay().then((value) => {
                console.log(value)
                if (value.success) {
                    var confirmButtonText = '立即上传'
                    if (this.productInfo.typeFlag == 1) {
                        confirmButtonText = '查看订单详情'
                    }
                    this.$confirm('<img src="' + require('../assetsPre/success.png') + '" style="width:48px;height:47px;vertical-align: middle;"><span style="font-size:24px;font-family:MicrosoftYaHei;color:rgba(51,51,51,1);margin-left:12px;line-height:17px;vertical-align: middle;">订单支付成功！</span>', '', {
                        confirmButtonText: confirmButtonText,
                        cancelButtonText: '返回订单管理',
                        dangerouslyUseHTMLString: true,
                        center: true,
                        cancelButtonClass: 'btn-cancel',
                        confirmButtonClass: 'btn-confirm',
                        closeOnClickModal: false,
                    }).then(() => {
                        if (this.productInfo.typeFlag == 1) {
                            this.$router.replace({
                                name: 'userOrder',
                            })
                        }
                        else {
                            this.$router.replace({
                                name: 'orderUpload',
                                query: {
                                    orderId: this.$route.query.orderId
                                }
                            })
                        }


                    }).catch(() => {
                        this.$router.replace({
                            name: 'userOrder',
                        })

                    });
                }
                else {
                    this.$confirm('<img src="' + require('../assetsPre/fail.png') + '" style="width:48px;height:47px;vertical-align: middle;"><span style="font-size:24px;font-family:MicrosoftYaHei;color:rgba(51,51,51,1);margin-left:12px;line-height:17px;vertical-align: middle;">' + value.error + '</span>', '', {
                        confirmButtonText: '重新支付',
                        cancelButtonText: '返回订单管理',
                        dangerouslyUseHTMLString: true,
                        center: true,
                        cancelButtonClass: 'btn-cancel',
                        confirmButtonClass: 'btn-confirm',
                        closeOnClickModal: false,
                    }).then(() => {

                    }).catch(() => {
                        this.$router.push({
                            name: 'userOrder',
                        })

                    });
                }
            })



        },
        pay() {
            return new Promise((resolve, reject) => {
                if (this.payStyle == '余额') {
                    this.$http.post({
                        url: '/userOrder/pay',
                        data: {
                            orderId: this.$route.query.orderId,
                            coin: 0,
                            point: 0,
                            cash: 0,
                        }
                    }).then(res => {
                        resolve(res)
                    }).catch(e => {
                        console.log(e)

                    })
                }
            })

        }
    },
    components: {
        miniHead, menuFoot
    }
}
</script>

<style lang="less" scoped>
.conatiner {
    background-color: #fff;
    padding: 18px 33px 31px 29px;
    .orderInfo {
        height: 50px;
        background: rgba(246, 246, 246, 1);
        line-height: 50px;

        span {
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            line-height: 50px;

            &.price {
                font-size: 24px;
                font-family: MicrosoftYaHei;
                color: rgba(153, 153, 153, 1);
            }
        }
    }

    .orderTitle {
        margin: 26px 0 17px 25px;
        font-size: 18px;
        font-family: MicrosoftYaHei;
        color: rgba(51, 51, 51, 1);
        line-height: 24px;
    }
    .orderWayTitle {
        width: 1131px;
        height: 24px;
        background: rgba(246, 246, 246, 1);
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: rgba(51, 51, 51, 1);
        line-height: 24px;
        padding-left: 28px;
    }

    .payStyle {
        margin-left: 25px;
        line-height: 84px;
        border-bottom: 1px solid #eaeaea;
    }

    .pay-btn {
        overflow: hidden;

        .pay {
            width: 176px;
            border-radius: 2px;
            float: right;
            margin-top: 86px;
        }
    }
}
</style>
