<template>
    <div class="submit">
        <div class="page-top">
            <div class="pageTitle">赠送商品</div>
            <div class="product">
                <van-image width="74" height="104" :radius="6" :src="getImg(changeImgs(info.pic))" fit="cover" />
                <div class="product-content">
                    <div class="text1 van-multi-ellipsis--l2">
                        {{ info.name }}
                    </div>
                    <div class="text" v-if="info.number">编号:{{ info.number }}</div>
                    <div class="no"></div>

                    <div class="price">¥{{ info.price }}</div>
                </div>
            </div>
        </div>
        <driver />
        <div class="input">
            <div class="text1">请输入交易密码，验证信息</div>
            <div v-if="sets">
                <van-password-input :value="password" :focused="showKeyboard" @focus="showKeyboard = true" />
                <!-- 数字键盘 -->
                <van-number-keyboard
                    v-model="password"
                    :show="showKeyboard"
                    @blur="showKeyboard = false"
                    maxlength="6"
                />
                <div class="text2" @click="$router.push('/tradingPassword')">忘记密码？</div>
            </div>
            <div v-else class="text3" @click="$router.push('/tradingPassword')">您当前没有交易密码，点击去设置</div>
        </div>
        <driver />
        <div class="list">
            <div class="info">
                <div class="text1">GAS费用</div>
                <div class="text2">¥{{ gas }}</div>
            </div>

            <div class="pay">
                <div class="pay-item" @click="payType = item.type" v-for="(item, index) in payInfos" :key="index">
                    <img :src="item.icon" alt="" />
                    <span>{{ item.name }}</span>
                    <img :src="payType === item.type ? icons[1] : icons[0]" alt="" />
                </div>
            </div>
        </div>

        <div class="bottom van-safe-area-bottom" ref="bottom">
            <div class="bottom-content">
                <div class="btn1" @click="$router.go(-1)">
                    取消
                    <!-- <van-button @click="submit" :disabled="orderId"> 取消 </van-button> -->
                </div>
                <div class="btn2" @click="submit">支付GAS费</div>
            </div>
        </div>
    </div>
</template>

<script>
const path = require('path');
import { add } from 'mathjs';
import { mapState } from 'vuex';
import product from '../mixins/product';
// import Driver from '../components/Driver.vue';
let inWeixin = /micromessenger/i.test(navigator.userAgent);
export default {
    name: 'Submit',
    mixins: [product],
    data() {
        return {
            info: {},
            message: '',
            password: '',
            payType: inWeixin ? 'WEIXIN' : 'ALIPAY',
            payInfos: [
                {
                    icon: require('../assets/svgs/zhifubao.svg'),
                    name: '支付宝',
                    type: 'ALIPAY'
                },
                {
                    icon: require('../assets/svgs/wechat.svg'),
                    name: '微信',
                    type: 'WEIXIN'
                }
                // {
                //   icon: require("../assets/svgs/png-decp.svg"),
                //   name: "DCEP",
                // },
            ],
            icons: [require('../assets/svgs/icon_gouxuan_huise.svg'), require('../assets/svgs/icon_gouxuan_pre.svg')],
            bottom: null,
            orderId: 0,
            gas: 1,
            showKeyboard: false,
            inWeixin
        };
    },
    computed: {
        ...mapState(['userInfo']),
        money() {
            if (this.info.price) {
                return add(this.info.price, this.gas);
            } else {
                return 0;
            }
        }
    },
    mounted() {
        this.passFn();
        this.$http.get('/sysConfig/get/gas_fee').then(res => {
            this.gas = res.value;
        });
        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;
                console.log(this.info);
            });
        }
    },
    methods: {
        passFn() {
            this.$http
                .get('/user/tradeCodeStatus', {
                    userId: this.userInfo.id
                })
                .then(res => {
                    console.log(res);
                    this.sets = res.set;
                });
        },
        submit() {
            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.$nextTick(() => {
                                if (this.payType === 'ALIPAY') {
                                    document.location.replace(
                                        path.resolve(this.$baseUrl, 'payOrder/gift/alipay?id=' + res.id)
                                    );
                                } 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
                                                });
                                                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(
                                            path.resolve(this.$baseUrl, 'payOrder/gift/weixin_h5?id=' + res.id)
                                        );
                                    }
                                }
                            });
                        })
                        .catch(e => {
                            if (e) {
                                this.$toast(e.error);
                            }
                        });
                })
                .catch(e => {
                    if (e) {
                        this.$toast('失败点击忘记密码进行修改');
                    }
                });
        }
    }
};
</script>

<style lang="less" scoped>
.submit {
    padding: 20px 0;
}
.page-top {
    padding: 0 16px;
}

.pageTitle {
    font-size: 14px;
    color: #ffffff;
    line-height: 22px;
}
.input {
    padding: 20px 16px;
    .text1 {
        font-size: 14px;
        color: #ffffff;
        line-height: 24px;
        margin-bottom: 6px;
        text-align: center;
    }
    .text2 {
        font-size: 14px;
        text-align: right;
        font-weight: 400;
        color: @text3;
        line-height: 24px;
        margin-right: 15px;
    }

    .text3 {
        font-size: @font2;
        color: #ff4f50;
        line-height: 24px;
        margin-top: 25px;
        display: flex;
        justify-content: center;
    }
}

/deep/ .van-password-input {
    margin: 0 0;
    .van-password-input__security {
        border: 1px solid @text3;
        height: 42px;
        border-radius: 2px;
        li {
            background-color: transparent;
            &:not(:last-child) {
                border-right: 1px solid @text3;
            }
            i {
                background-color: #fff;
            }
        }
    }
}
/deep/.van-number-keyboard__body {
    background-color: #4a4a4a;
    .van-key {
        background-color: @bg;
        &:active {
            background-color: @bg3;
        }
    }
}
.list {
    padding: 0 16px;
}
.info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    border-bottom: 1px solid #202122;
    .text1 {
        font-size: 14px;
        color: #ffffff;
        line-height: 24px;
    }

    .text2 {
        font-size: 16px;
        font-weight: bold;
        color: #fdfb60;
        line-height: 24px;
    }

    .text3 {
        font-size: 14px;
        color: @text3;
        line-height: 20px;
    }
}
/deep/ .van-password-input {
    margin: 10px 0;
    padding: 0 25px;
    .van-password-input__security {
        border: 1px solid @text3;
        height: 42px;
        border-radius: 2px;
        li {
            background-color: transparent;
            &:not(:last-child) {
                border-right: 1px solid @text3;
            }
            i {
                background-color: #fff;
            }
        }
    }
}
.product {
    display: flex;
    padding: 12px 0 20px;
    .product-content {
        flex-grow: 1;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        .no {
            flex-grow: 1;
            padding: 4px 0 8px;
            font-size: 14px;
            color: @text3;
            line-height: 24px;
        }
        .text {
            font-size: 14px;
            color: @text3;
            line-height: 24px;
            margin-top: 4px;
        }
        .text1 {
            font-size: @font2;
            color: #ffffff;
            line-height: 24px;
        }
        .text3 {
            font-size: @font2;
            font-weight: 400;
            color: #b81c22;
            line-height: 24px;
            margin-top: 40px;
            display: flex;
            justify-content: center;
        }
        .price {
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
            line-height: 24px;
        }
    }
}

/deep/.van-field {
    padding: 20px 0;
    .van-field__label {
        font-size: 14px;
        color: #ffffff;
        line-height: 24px;
    }
    .van-field__control {
        text-align: right;
        color: @text3;
    }
}

.pay-item {
    display: flex;
    align-items: center;
    height: 60px;
    // border-top: 1px solid #202122;
    span {
        font-size: 14px;
        font-weight: bold;
        color: #ffffff;
        line-height: 24px;
        flex-grow: 1;
        padding: 0 10px;
    }
}

.bottom {
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    background-color: @bg;
    z-index: 20;
    border-top: 1px solid #313233;

    .bottom-content {
        padding: 6px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btn1 {
            width: 161px;
            height: 44px;
            border-radius: 22px;
            line-height: 44px;
            color: @text3;
            text-align: center;
            border: 1px solid @text3;
        }
        .btn2 {
            width: 162px;
            height: 44px;
            line-height: 44px;
            text-align: center;

            color: #333230;
            background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
            border-radius: 22px;
        }
        .van-button {
            flex-grow: 1;
            color: #333230 !important;
            max-width: 210px;
        }
        .text {
            font-size: 14px;
            color: @text3;
            line-height: 20px;
            word-break: keep-all;
        }

        .price {
            font-size: 34px;
            font-family: OSP;
            font-weight: normal;
            color: #fdfb60;
            line-height: 34px;
            // flex-grow: 1;
            margin: 0 10px;
            .font_family {
                font-size: 10px;
            }
        }
    }
}
</style>
