<template>
    <div class="submit">
        <div class="pageTitle">{{ info.minter }}</div>
        <div class="product">
            <van-image
                width="74"
                height="104"
                :radius="6"
                :src="getImg(changeImgs(info.pics || info.pic))"
                fit="cover"
            />
            <div class="product-content">
                <div class="text1">
                    {{ info.name }}
                </div>
                <div class="no"></div>
                <div class="price">¥{{ info.price }}</div>
            </div>
        </div>

        <div class="list">
            <div class="info">
                <div class="text1">商品费用</div>
                <div class="text2">¥{{ info.price }}</div>
            </div>
            <div class="info">
                <div class="text1">GAS费用</div>
                <div class="text2">¥{{ gas }}</div>
            </div>

            <van-field type="text" label="订单留言" placeholder="选填" v-model="message" />

            <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">
                <span class="text">总计</span>
                <span class="price"> <i class="font_family icon-icon_jiage"></i>{{ money }} </span>
                <div class="btn">
                    <van-button
                        round
                        color="linear-gradient(135deg, #FDFB60 0%, #FF8F3E 100%)"
                        @click="submit"
                        :disabled="orderId"
                    >
                        立即支付
                    </van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
const path = require('path');
import { add } from 'mathjs';
import product from '../mixins/product';
let inWeixin = /micromessenger/i.test(navigator.userAgent);
export default {
    name: 'Submit',
    mixins: [product],
    data() {
        return {
            info: {},
            message: '',
            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,
            inWeixin
        };
    },
    computed: {
        money() {
            if (this.info.price) {
                return add(this.info.price, this.gas);
            } else {
                return 0;
            }
        }
    },
    mounted() {
        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('/collection/get/' + this.$route.query.id).then(res => {
                this.info = res;
                setTimeout(() => {
                    this.$toast.clear();
                    this.bs.value.refresh();
                }, 100);

                // this.$http('/sysConfig/get/gas_fee')
            });
        } else {
            this.$http.get('/order/get/' + this.$route.query.orderId).then(res => {
                this.info = res;
                this.orderId = res.id;
                setTimeout(() => {
                    this.bs.value.refresh();
                }, 100);
                this.$dialog
                    .alert({
                        title: '提示',
                        message:
                            res.status === 'NOT_PAID' || res.status === 'CANCELLED'
                                ? '订单支付失败,点击重新下单'
                                : '订单已支付,点击查看订单详情'
                    })
                    .then(() => {
                        if (res.status === 'NOT_PAID' || res.status === 'CANCELLED') {
                            this.$router.back();
                        } else {
                            this.$router.replace('/orderDetail?id' + res.id);
                        }
                        // on close
                    });
            });
        }

        this.bottom = this.$refs.bottom;
    },
    methods: {
        submit() {
            this.$toast.loading('加载中');
            this.$http
                .post('/order/create?collectionId=' + this.$route.query.id + '&qty=1')
                .then(res => {
                    this.$toast.clear();
                    this.orderId = res.id;
                    this.$router.replace('/submit?orderId=' + res.id);
                    this.$nextTick(() => {
                        if (this.payType === 'ALIPAY') {
                            document.location.replace(path.resolve(this.$baseUrl, 'payOrder/alipay?id=' + res.id));
                        } else if (this.payType === 'WEIXIN') {
                            if (this.inWeixin) {
                                this.$toast.loading('加载中');
                                this.$http
                                    .post('/payOrder/weixin', { id: res.id, openId: localStorage.getItem('openId') })
                                    .then(res => {
                                        console.log({
                                            ...res,
                                            package: res.package || res.packageValue
                                        });
                                        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/weixin_h5?id=' + res.id)
                                );
                            }
                        }
                    });
                })
                .catch(e => {
                    if (e) {
                        this.$toast(e.error);
                    }
                });
        }
    }
};
</script>

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

.pageTitle {
    font-size: 14px;
    color: #ffffff;
    line-height: 22px;
}

.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: #939599;
        line-height: 20px;
    }
}

.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: #939599;
            line-height: 24px;
        }

        .text1 {
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
            line-height: 22px;
        }

        .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: #939599;
    }
}

.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;

        .btn {
            flex-grow: 1;
            display: flex;
            justify-content: flex-end;
        }
        .van-button {
            flex-grow: 1;
            color: #333230 !important;
            max-width: 210px;
        }
        .text {
            font-size: 14px;
            color: #939599;
            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>
