<!-- 确认支付 -->
<template>
    <div class="pay">
        <div class="box order-cost">
            <!-- 预约费用 -->
            <div class="order-left">￥</div>
            <div class="order-right">
                <div>支付金额</div>
                <div style="color:red;font-size:.4rem;">
                    ￥
                    <span style="font-size:.7rem;">{{ price | getPrice }}</span>
                </div>
            </div>
        </div>

        <van-radio-group v-model="radio">
            <van-cell-group class="box pay-type">
                <van-cell clickable @click="radio = '1'" class="pay-type-item">
                    <div slot="default">
                        <van-icon name="wechat" color="#00c901" />
                        <span style="margin-left:.2rem;">微信支付</span>
                    </div>
                    <van-radio slot="right-icon" name="1" />
                </van-cell>
                <!--<van-cell clickable @click="radio = '2'" class="pay-type-item">
                    <div slot="default">
                        <van-icon name="alipay" color="#01a9f0" />
                        <span style="margin-left:.2rem;">支付宝支付</span>
                    </div>
                    <van-radio slot="right-icon" name="2" />
                </van-cell>-->
            </van-cell-group>
        </van-radio-group>
        <div class="button" @click="wxPay">确认支付</div>
    </div>
</template>
<script>
export default {
    name: "confirmPay",
    data() {
        return {
            radio: "1", //1 =>微信
            ordercode: this.$route.query.ordercode,
            price: this.$route.query.price,
            type: this.$route.query.type || 1, // 1=>  拼优医,普通坐诊  2=> 手术预约订单 3=> 视频支付
            data: {}
        };
    },
    created() {
        // 移除拼团确认数据以免造成数据混乱
        sessionStorage.removeItem("unionDetail");
        sessionStorage.removeItem("ConfirmData");
        sessionStorage.removeItem("HospitalID");
        console.log(this.$route.query);
    },
    methods: {
        wxPay() {
            let _this = this;
            this.$toast({
                message: "支付中...",
                type: "loading",
                duration: 0,
                forbidClick: true
            });
            this.$http
                .wxPay(this.ordercode)
                .then(
                    ({ data }) => {
                        this.$toast.clear();
                        if (data.IsSuccess) {
                            _this.data = data.ResultObject;
                        } else {
                            this.$toast(data.ResultMsg);
                            return;
                        }
                    },
                    err => {
                        this.$toast.clear();
                        this.$toast("网络错误");
                    }
                )
                .then(() => {
                    function onBridgeReady() {
                        WeixinJSBridge.invoke("getBrandWCPayRequest", JSON.parse(_this.data), function(res) {
                            if (res.err_msg == "get_brand_wcpay_request:ok") {
                                // 使用以上方式判断前端返回,微信团队郑重提示：
                                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                // 成功 订单详情  普通坐诊支付
                                if (_this.type == 1) {
                                    _this.$router.replace({
                                        name: "allOrder",
                                        query: {
                                            id: _this.ordercode
                                        }
                                    });
                                } else if (_this.type == 2) {
                                    // 成功 手术预约坐诊
                                    _this.$router.replace({
                                        name: "surgeryDetail",
                                        query: {
                                            id: _this.ordercode
                                        }
                                    });
                                } else if (_this.type == 3) {
                                    // 成功 视频详情页面
                                    if (_this.$route.query.videoId) {
                                        setTimeout(_ => {
                                            _this.$router.replace({
                                                name: "healthCourse",
                                                query: {
                                                    id: _this.$route.query.videoId
                                                }
                                            });
                                        }, 500);
                                    }
                                }
                            } else {
                                // 支付失败， 坐诊订单详情
                                if (_this.type == 1) {
                                    _this.$router.replace({
                                        name: "reservationDetail",
                                        query: { id: _this.ordercode }
                                    });
                                } else if (_this.type == 2) {
                                    // 支付失败 手术预约记录
                                    _this.$router.replace({
                                        name: "surgeryList"
                                    });
                                } else if (_this.type == 3) {
                                    // 支付失败 视频详情页面
                                    if (_this.$route.query.videoId) {
                                        setTimeout(_ => {
                                            _this.$router.replace({
                                                name: "healthCourse",
                                                query: {
                                                    id: _this.$route.query.videoId
                                                }
                                            });
                                        }, 500);
                                    }
                                }
                            }
                        });
                    }

                    if (typeof WeixinJSBridge == "undefined") {
                        if (document.addEventListener) {
                            document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
                        } else if (document.attachEvent) {
                            document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
                            document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
                        }
                    } else {
                        onBridgeReady();
                    }
                });
        }
    }
};
</script>
<style lang="less" scoped>
.pay {
    padding-top: 0.2rem;
    min-height: 100vh;
    background-color: #f7f7f8;
    font-size: 0.28rem;
    color: #333333;

    .box {
        width: 7.1rem;
        background-color: #ffffff;
        border-radius: 0.1rem;
        box-shadow: 0.03rem 0.04rem 0.32rem 0rem rgba(61, 145, 254, 0.14);
        margin: 0 auto 0.2rem;
    }

    .order-cost {
        padding: 0.65rem 0.5rem;
        display: flex;
        .order-left {
            width: 1.1rem;
            height: 1.1rem;
            line-height: 1.1rem;
            background-color: #4ca0ff;
            font-size: 0.6rem;
            border-radius: 50%;
            color: #fff;
            margin-right: 0.4rem;
        }
        .order-right {
            line-height: 1.3;
            text-align: left;
        }
    }

    .pay-type {
        .pay-type-item {
            font-size: 0.28rem;
            vertical-align: middle;

            /deep/ .van-cell__value div {
                font-size: 0.28rem;
                display: flex;
                align-items: center;
            }
        }
    }

    .button {
        margin-top: 3rem;
    }
}
</style>
