<template>
    <div class="content">
        <div class="gift_confirmation_top">
            <div class="gift_confirmation_top_one">GAS费用</div>
            <div class="gift_confirmation_top_two">
                <div class="gift_confirmation_top_two_text1">¥</div>
                <div class="gift_confirmation_top_two_text2">{{ gas }}</div>
            </div>
            <div class="gift_confirmation_top_three" @click="$router.go(-2)">
                <div class="gift_confirmation_top_three_text1">{{ info.name }}</div>
                <div class="gift_confirmation_top_three_text2">赠品详情</div>
                <img :src="require('@assets/more@3x.png')" alt="" class="gift_confirmation_top_three_img" />
            </div>
        </div>
        <div class="gift_confirmation_information">
            <div class="gift_confirmation_information_title">用户信息</div>
            <div class="gift_confirmation_information_con">
                <van-image
                    width="40px"
                    height="40px"
                    radius="65"
                    :src="getImg(infos.avatar)"
                    fit="cover"
                    style="margin-right: 10px"
                />
                <div>
                    <div class="gift_confirmation_information_con_name">{{ infos.realName || '保密' }}</div>
                    <div class="gift_confirmation_information_con_phone">手机号码&nbsp;{{ infos.phone }}</div>
                </div>
            </div>
        </div>
        <div class="transaction_password">
            <div class="transaction_password_one">
                <div class="transaction_password_one_title">请输入交易密码</div>
                <div class="transaction_password_forget" @click="$router.push('/tradingPassword')">
                    忘记密码
                    <van-divider />
                </div>
            </div>
            <div>
                <!-- 密码输入框 -->
                <van-password-input
                    :value="password"
                    :gutter="10"
                    :focused="showKeyboard"
                    @focus="showKeyboard = true"
                />
                <!-- 数字键盘 -->
                <van-number-keyboard
                    v-model="password"
                    :show="showKeyboard"
                    @blur="showKeyboard = false"
                    maxlength="6"
                    theme="custom"
                    close-button-text="完成"
                />
            </div>
            <!-- <div class="text3" @click="$router.push('/tradingPassword')">您当前没有交易密码，点击去设置</div> -->
        </div>
        <!-- <div class="additional_costs">
            <div class="additional_costs_left">GAS费用</div>
            <div class="additional_costs_right">¥{{ gas }}</div>
        </div> -->
        <div class="payment_method">
            <div class="payment_method_con" @click="payType = item.type" v-for="(item, index) in payInfos" :key="index">
                <div class="payment_method_con_text">
                    <div class="payment_method_con_left">
                        <img :src="item.icon" alt="" class="payment_method_img" />
                        <div class="payment_method_title">{{ item.name }}</div>
                    </div>
                    <!-- <van-radio-group v-model="payType">
                        <van-radio :name="item.type" icon-size="24px" checked-color="#28B6FF"></van-radio>
                    </van-radio-group> -->
                    <img class="choose-icon" :src="payType === item.type ? icons[1] : icons[0]" alt="" />
                </div>
                <!-- <van-divider /> -->
            </div>
            <!-- <div class="add_bank_card">
                <div class="add_bank_card_con">
                    <img :src="require('@assets/tianjia@3x.png')" alt="" class="add_bank_card_img_one" />
                    <div class="add_bank_card_con_title">添加银行卡付款</div>
                </div>
                <img :src="require('@assets/gengduo@3x.png')" alt="" class="add_bank_card_img_two" />
            </div> -->
        </div>
    </div>
    <div class="gift_button">
        <!-- <div class="gift_button_cancel" @click="$router.go(-1)">取消</div> -->
        <div class="gift_button_payment" @click="submit">
            <a id="pay" :href="hrefUrl"></a>
            确认支付
        </div>
    </div>
</template>

<script>
import resolveUrl from 'resolve-url';
import { add, im } from 'mathjs';
import { mapState } from 'vuex';
import product from '../mixins/product';
// import Driver from '../components/Driver.vue';
// import TopNavigation from "../components/TopNavigation.vue"
let inWeixin = /micromessenger/i.test(navigator.userAgent);
let inApp = /#cordova#/i.test(navigator.userAgent);
export default {
    name: 'Submit',
    mixins: [product],
    // components: {
    //     TopNavigation
    // },
    data() {
        return {
            info: {},
            infos: {},
            message: '',
            password: '',
            enable_wx_lite: false,
            enable_wx_pub: false,
            payType: 'ALIPAY',
            // payType: 'ALIPAY',
            payInfos: [
                {
                    icon: require('@assets/zhifubao@3x.png'),
                    name: '支付宝',
                    type: 'ALIPAY'
                }
                // {
                //     icon: require('@assets/weixin@3x.png'),
                //     name: '微信',
                //     type: 'WEIXIN'
                // }
                // {
                //   icon: require("@assets/svgs/png-decp.svg"),
                //   name: "DCEP",
                // },
            ],
            icons: [require('@assets/xuanzhong@3x.png'), require('@assets/xuanzhong@3x.png')],
            bottom: null,
            orderId: 0,
            gas: 1,
            showKeyboard: false,
            hrefUrl: '',
            inWeixin,
            inApp,
            timer: null,
            sets: false
        };
    },
    computed: {
        ...mapState(['userInfo']),
        money() {
            if (this.info.price) {
                return add(this.info.price, this.gas);
            } else {
                return 0;
            }
        }
    },
    mounted() {
        this.getGiverInformation();
        this.$toast.loading({
            message: '加载中...',
            forbidClick: true
        });
        if (this.$route.query.id) {
            this.$http.get('/asset/get/' + this.$route.query.id).then(res => {
                this.info = res;
                this.$toast.clear();
            });
        }

        Promise.all([
            this.$http.get('/sysConfig/get/gas_fee').then(res => {
                this.gas = res.value;
                return Promise.resolve();
            }),
            // inWeixin
            //     ? this.$http.get('/sysConfig/get/enable_wx_pub').then(res => {
            //           this.enable_wx_pub = res.value === '1';
            //           return Promise.resolve();
            //       })
            //     : Promise.resolve(),
            // this.$http.get('/sysConfig/get/enable_wx_lite').then(res => {
            //     this.enable_wx_lite = res.value === '1';
            //     return Promise.resolve();
            // })
        ]).then(() => {
            // if (!(this.enable_wx_lite || this.enable_wx_pub)) {
            //     this.payInfos.splice(1, 1);
            //     this.payType = 'ALIPAY';
            // } else if (this.enable_wx_pub) {
            //     this.payChannel = 'wx_pub';
            // } else {
            //     this.payChannel = 'wx_lite';
            // }

            // this.passFn();
        });
    },
    methods: {
        getGiverInformation() {
            this.$http
                .post('/user/searchByPhone', {
                    phone: this.$route.query.phone
                })
                .then(res => {
                    this.infos = res;
                });
        },
        passFn() {
            this.$http
                .get('/user/tradeCodeStatus', {
                    userId: this.userInfo.id
                })
                .then(res => {
                    console.log(res);
                    this.sets = res.set;
                });
        },
        getOrder(next = false) {
            this.$http.get('/giftOrder/get/' + this.orderId).then(res => {
                if (this.timer) {
                    clearTimeout(this.timer);
                }
                if (res.status === 'PROCESSING' || res.status === 'FINISH' || res.status === 'CANCELLED') {
                    this.$toast.clear();
                    this.$dialog
                        .alert({
                            title: '提示',
                            message: res.status === 'CANCELLED' ? '藏品转赠失败' : '藏品转赠成功'
                        })
                        .then(() => {
                            if (res.status === 'CANCELLED') {
                                this.$router.push({
                                    path: '/assetDetail',
                                    query: { id: this.info.id, collectionStatus: res.status }
                                });
                                this.$router.go(-2);
                            } else {
                                this.$router.push({
                                    path: '/assetDetail',
                                    query: { id: this.info.id, collectionStatus: res.status }
                                });
                                this.$router.go(-2);
                            }
                            // on close
                        });
                } else if (next) {
                    this.timer = setTimeout(() => {
                        this.getOrder(next);
                    }, 1000);
                }
            });
        },
        submit() {
            console.log("sasdas",this.payType)
            // this.$router.push({ path: '/assetDetail', query: { id: this.info.id, collectionStatus: 'CANCELLED'} })
            if (this.orderId) {
                return;
            }

            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .post('/user/verifyTradeCode', {
                    tradeCode: this.password
                })
                .then(() => {
                    this.$http
                        .post('/asset/gift', {
                            assetId: this.$route.query.id,
                            toUserId: this.$route.query.toUserId
                        })
                        .then(res => {
                            this.orderId = res.id;
                            console.log("sasdas",this.payType)
                            this.$nextTick(() => {
                                if (this.payType === 'ALIPAY') {
                                    // document.location.replace(
                                    //     resolveUrl(this.$baseUrl, 'payOrder/gift/alipay?id=' + res.id)
                                    // );
                                    console.log("sasda11eeeers",this.inWeixin)
                                    if (this.inWeixin) {
                                        if (this.gas === '0') {
                                            this.$http
                                                .get('/payOrder/gift/alipay_wx?id=' + res.id)
                                                .then(res => {
                                                    this.$toast.success('转赠成功');
                                                    this.getOrder(true);
                                                    // setTimeout(() => {
                                                    // this.$router.push({
                                                    //     path: '/orderDetail',
                                                    //     query: {
                                                    //         id: res.id,
                                                    //     }
                                                    // });
                                                    // this.$router.replace('/orders');
                                                    // document.location.replace("https://www.adcs.vip/9th/giftOrder/223639");
                                                    // this.$router.replace('/giftOrder/' + order.getId());
                                                    // }, 1000);
                                                })
                                                .catch(e => {
                                                    if (e.error) {
                                                        this.$toast(e.error);
                                                    }
                                                });
                                        } else {
                                            document.location.replace(
                                                resolveUrl(this.$baseUrl, '/payOrder/gift/alipay_wx?id=' + res.id)
                                            );
                                        }
                                    } else {
                                        if (this.gas === '0') {
                                            this.$http
                                                .get(
                                                    `/payOrder/gift/${this.inApp ? 'alipay_app' : 'alipay_h5'}?id=${
                                                        res.id
                                                    }`
                                                )
                                                .then(res => {
                                                    this.$toast.success('转赠成功');
                                                    this.getOrder(true);
                                                    // setTimeout(() => {
                                                    // this.$router.push({
                                                    //     path: '/orderDetail',
                                                    //     query: {
                                                    //         id: res.id,
                                                    //     }
                                                    // });
                                                    // this.$router.replace('/giftOrder/' + order.getId());
                                                    // this.$router.replace('/orders');
                                                    // document.location.replace("https://www.adcs.vip/9th/giftOrder/223639");
                                                    // }, 1000);
                                                })
                                                .catch(e => {
                                                    if (e.error) {
                                                        this.$toast(e.error);
                                                    }
                                                });
                                        } else {
                                            this.$http
                                                .get(
                                                    `/payOrder/gift/${this.inApp ? 'alipay_app' : 'alipay_h5'}?id=${
                                                        res.id
                                                    }`
                                                )
                                                .then(res => {
                                                    this.hrefUrl =
                                                        'alipays://platformapi/startapp?saId=10000007&qrcode=' + res;
                                                    // window.open(
                                                    //     'alipays://platformapi/startapp?saId=10000007&qrcode=' + res,
                                                    //     '_blank'
                                                    // );
                                                    this.$nextTick(() => {
                                                        document.getElementById('pay').click();
                                                    });

                                                    this.$toast.loading({
                                                        message: '加载中...',
                                                        forbidClick: true
                                                    });
                                                    this.getOrder(true);
                                                })
                                                .catch(e => {
                                                    if (e.error) {
                                                        this.$toast(e.error);
                                                    }
                                                });
                                        }
                                    }
                                } else if (this.payType === 'WEIXIN') {
                                    if (this.inWeixin) {
                                        this.$toast.loading('加载中');
                                        this.$http
                                            .post('/payOrder/gift/weixin', {
                                                id: res.id,
                                                openId: localStorage.getItem('openId')
                                            })
                                            .then(res => {
                                                console.log({
                                                    ...res,
                                                    package: res.package || res.packageValue,
                                                    timestamp: res.timestamp || res.timeStamp
                                                });
                                                let _this = this;
                                                wx.chooseWXPay({
                                                    ...res,
                                                    package: res.package || res.packageValue,
                                                    timestamp: res.timeStamp,
                                                    success(res) {
                                                        _this.$toast.success('支付成功');
                                                        setTimeout(() => {
                                                            _this.$router.replace('/orders');
                                                        }, 1000);
                                                    },
                                                    fail(e) {
                                                        console.log(e);
                                                        _this.$toast('支付失败，请稍后再试');
                                                    }
                                                });
                                            });
                                    } else {
                                        document.location.replace(
                                            resolveUrl(this.$baseUrl, 'payOrder/gift/weixin_h5?id=' + res.id)
                                        );
                                    }
                                }
                            });
                        })
                        .catch(e => {
                            if (e) {
                                this.$toast(e.error);
                            }
                        });
                })
                .catch(e => {
                    if (e) {
                        this.$toast('失败点击忘记密码进行修改');
                    }
                });
        }
    },
    beforeUnmount() {
        if (this.timer) {
            clearTimeout(this.timer);
            this.timer = null;
        }
    }
};
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #191d27;
    padding: 0px 15px;
    box-sizing: border-box;
    .gift_confirmation_top {
        padding: 30px 0px;
        box-sizing: border-box;
        .gift_confirmation_top_one {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 18px;
            opacity: 0.5;
            margin-bottom: 4px;
            text-align: center;
        }
        .gift_confirmation_top_two {
            display: flex;
            justify-content: center;
            margin-bottom: 6px;
            .gift_confirmation_top_two_text1 {
                font-size: 24px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #ffffff;
                line-height: 30px;
                margin-right: 4px;
                margin-top: 10px;
            }
            .gift_confirmation_top_two_text2 {
                font-size: 38px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #ffffff;
                line-height: 40px;
            }
        }
        .gift_confirmation_top_three {
            display: flex;
            justify-content: center;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 18px;
            opacity: 0.5;
            .gift_confirmation_top_three_text1 {
                margin-right: 10px;
            }
            .gift_confirmation_top_three_text2 {
                margin-right: 5px;
            }
            .gift_confirmation_top_three_img {
                width: 16px;
                height: 16px;
                margin-top: 2px;
            }
        }
    }
    .gift_confirmation {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        margin-bottom: 6px;
        color: #ffffff;
    }
    .gift_confirmation_tip {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #939599;
        margin-bottom: 20px;
    }
    .gift_confirmation_information {
        width: 100%;
        height: 117px;
        background: #1e222c;
        border-radius: 4px;
        padding: 15px;
        box-sizing: border-box;
        .gift_confirmation_information_title {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 18px;
            padding-bottom: 12px;
            box-sizing: border-box;
            opacity: 0.6;
            border-bottom: 1px solid rgba(151, 151, 151, 0.1);
            margin-bottom: 15px;
        }
        .gift_confirmation_information_con {
            // margin-top: 8px;
            display: flex;
            // .gift_confirmation_information_con_img{
            //     width: 40px;
            //     height: 40px;
            //     border-radius: 65px;
            //     margin-right: 10px;
            // }
            .gift_confirmation_information_con_name {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 20px;
                margin-bottom: 2px;
            }
            .gift_confirmation_information_con_phone {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                opacity: 0.3;
                line-height: 16px;
            }
        }
    }
    .transaction_password {
        width: 100%;
        // height: 103px;
        background: #1e222c;
        border-radius: 4px;
        padding: 15px;
        box-sizing: border-box;
        margin-top: 10px;
        .transaction_password_one {
            display: flex;
            justify-content: space-between;
            padding-bottom: 4px;
            border-bottom: 1px solid rgba(151, 151, 151, 0.1);
            opacity: 0.6;
            .transaction_password_one_title {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
            }
            .transaction_password_forget {
                width: 48px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
            }
        }
        /deep/ .van-password-input {
            margin: 0;
            margin-top: 8px;
            .van-password-input__item {
                width: 44px;
                height: 44px;
                background: #29293f;
                border-radius: 8px;
            }
        }
    }
    .additional_costs {
        width: 100%;
        margin-top: 10px;
        background: #29293f;
        border-radius: 8px;
        padding: 12px 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .additional_costs_left {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
        }
        .additional_costs_right {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #28b6ff;
        }
    }
    .payment_method {
        width: 100%;
        background: #1e222c;
        border-radius: 12px;
        padding: 20px 0px;
        box-sizing: border-box;
        margin-top: 10px;
        .add_bank_card {
            padding: 0px 15px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            .add_bank_card_con {
                display: flex;
                .add_bank_card_con_title {
                    font-size: 16px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 24px;
                }
                .add_bank_card_img_one {
                    width: 24px;
                    height: 24px;
                    margin-right: 10px;
                }
            }
            .add_bank_card_img_two {
                width: 22px;
                height: 22px;
            }
        }
        .payment_method_con {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            .choose-icon {
                width: 22px;
                height: 22px;
            }
            .van-divider {
                padding-left: 49px;
                margin-top: 20px;
                margin-bottom: 19px;
            }
            .van-divider::before {
                height: 1px;
                background: #979797;
                opacity: 0.1;
            }
            .payment_method_con_text {
                display: flex;
                justify-content: space-between;
                padding: 0px 15px;
                box-sizing: border-box;
            }
            .payment_method_con_left {
                display: flex;
                .payment_method_title {
                    margin-top: 2px;
                }
            }
            .payment_method_img {
                width: 24px;
                height: 24px;
                margin-right: 6px;
            }
        }
        // .payment_method_con:first-child {
        //     margin-bottom: 10px;
        //     border-bottom: 1px solid #5f646f;
        //     padding-bottom: 10px;
        //     box-sizing: border-box;
        // }
    }
    .fee_details_divider {
        margin: 10px 0;
    }
}
/deep/ .van-key {
    color: #333333;
}
.gift_button {
    position: fixed;
    bottom: 64px;
    width: 100%;
    height: 50px;
    // background: #191D27;
    padding: 0px 15px;
    box-sizing: border-box;
    .gift_button_cancel {
        width: 164px;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #28b6ff;
        box-sizing: border-box;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #28b6ff;
    }
    .gift_button_payment {
        width: 100%;
        height: 50px;
        background: #f9ddb3;
        border-radius: 8px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #503a1e;
        text-align: center;
        line-height: 50px;
    }
}
/deep/ .van-password-input__security i {
    background-color: #fff !important;
}
</style>
