<template>
    <div class="pay">
        <div class="title">总计</div>
        <div class="price">
            <img src="@assets/jiage_huang.png" alt="" />
            <span>{{ price }}</span>
        </div>

        <van-cell title="支付银行卡" isLink @click="chooseBank">
            <div class="code" v-if="bankCard && bankCard.bindCardId">{{ bankName }}</div>
            <div class="code not" v-else>请选择</div>
        </van-cell>

        <div class="btn">
            <van-button
                type="primary"
                block
                round
                :disabled="!(this.bankCard && this.bankCard.bindCardId)"
                @click="submit"
            >
                确认支付
            </van-button>
        </div>

        <phone-code ref="code" @onSubmit="onSubmit" @bind="bind"></phone-code>
    </div>
</template>

<script>
import phoneCode from '../../components/phoneCode.vue';
import { mapState } from 'vuex';
export default {
    components: { phoneCode },
    data() {
        return {
            orderId: 0,
            price: 0,
            payOrder: {},
            type: 'order',
            paymentType: ''
        };
    },
    computed: {
        ...mapState(['bankCard', 'companyId']),
        bankName() {
            if (this.bankCard && this.bankCard.bindCardId) {
                return this.bankCard.bankName + '(' + this.bankCard.bankNo.slice(-4) + ')';
            }
            return '';
        }
    },
    mounted() {
        if (this.$route.query.id) {
            this.orderId = this.$route.query.id;
        }
        if (this.$route.query.type) {
            this.type = this.$route.query.type;
        }
        if (this.$route.query.paymentType) {
            this.paymentType = this.$route.query.paymentType;
        }
        if (this.type === 'gift') {
            this.$http.get('/giftOrder/get/' + this.orderId).then(res => {
                this.price = res.gasPrice;
            });
        } else if (this.type === 'mint') {
            this.$http.get('/mintOrder/get/' + this.orderId).then(res => {
                this.price = res.gasPrice;
            });
        } else if (this.type === 'recharge') {
            this.price = this.$route.query.amount;
        } else if (this.type === 'auction') {
            this.$http.get('/auctionOrder/get/' + this.orderId).then(res => {
                this.price = res.totalPrice;
            });
        } else {
            this.$http.get('/order/get/' + this.orderId).then(res => {
                this.price = res.totalPrice;
            });
        }

        this.$http.get('/user/myBankCard').then(res => {
            if (res.length !== 0) {
                this.bankInfo = res[0];
            }
        });

        this.$store.dispatch('getBankCard');
    },
    methods: {
        submit(e) {
            if (!this.checkWebDriver(e)) {
                return;
            }
            if (!(this.bankCard && this.bankCard.bindCardId)) {
                this.$toast('请选择银行卡');
                return;
            }
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            if (this.type === 'gift') {
                this.$http
                    .post('/payOrder/v2/gift/agreement', {
                        id: this.orderId,
                        bindCardId: this.bankCard.bindCardId,
                        companyId: this.companyId
                    })
                    .then(res => {
                        this.payOrder = res;
                        if (res.needCaptcha) {
                            this.onSubmit(e);
                        }
                    })
                    .catch(e => {
                        this.$toast(e.error);
                    });
            } else if (this.type === 'mint') {
                this.$http
                    .post('/payOrder/v2/mint/agreement', {
                        id: this.orderId,
                        bindCardId: this.bankCard.bindCardId,
                        companyId: this.companyId
                    })
                    .then(res => {
                        this.payOrder = res;
                        if (res.needCaptcha) {
                            this.onSubmit(e);
                        }
                    })
                    .catch(e => {
                        this.$toast(e.error);
                    });
            } else if (this.type === 'recharge') {
                this.$http
                    .post('/payOrder/v2/recharge/agreement', {
                        userId: this.$store.state.userInfo.id,
                        amount: this.price,
                        bindCardId: this.bankCard.bindCardId,
                        companyId: this.companyId
                    })
                    .then(res => {
                        this.payOrder = res;
                        if (res.needCaptcha) {
                            this.onSubmit(e);
                        }
                    })
                    .catch(e => {
                        this.$toast(e.error);
                    });
            } else if (this.type === 'auction') {
                this.$http
                    .post('/payOrder/v2/auction/agreement?id=' + this.orderId, {
                        bindCardId: this.bankInfo.bindCardId,
                        companyId: this.companyId
                    })
                    .then(res => {
                        this.payOrder = res;
                        if (res.needCaptcha) {
                            this.onSubmit(e);
                        }
                    })
                    .catch(e => {
                        this.$toast(e.error);
                    });
            } else {
                this.$http
                    .post('/payOrder/v2/agreement', {
                        id: this.orderId,
                        bindCardId: this.bankCard.bindCardId,
                        companyId: this.companyId
                    })
                    .then(res => {
                        this.payOrder = res;
                        if (res.needCaptcha) {
                            this.onSubmit(e);
                        }
                    })
                    .catch(e => {
                        this.$toast(e.error);
                    });
            }
        },
        onSubmit(e) {
            if (!this.checkWebDriver(e)) {
                return;
            }

            this.$toast.success('发送成功');
            this.$refs.code.init();
        },
        bind(code) {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .post(`/payOrder/v2/confirmAgreement`, {
                    requestId: this.payOrder.requestId,
                    paymentOrderId: this.payOrder.paymentOrderId,
                    code: code,
                    companyId: this.companyId
                })
                .then(() => {
                    this.$toast.success('支付成功');
                    setTimeout(() => {
                        if (this.type == 'gift') {
                            this.$router.go(-2);
                        } else if (this.type === 'mint') {
                            this.$router.replace({ name: 'activityOrderDetail', query: { id: this.orderId } });
                        } else if (this.type === 'recharge') {
                            this.$router.replace({ name: 'mineWallet' });
                        } else if (this.type === 'auction') {
                            if (this.paymentType === 'DEPOSIT') {
                                this.$router.go(-1);
                            } else {
                                this.$router.replace(
                                    '/' + this.$route.params.companyId + '/auctionOrderDetail?id=' + this.orderId
                                );
                            }
                        } else {
                            this.$router.replace({ name: 'orderDetail', query: { id: this.orderId } });
                        }
                    }, 1000);
                })
                .catch(e => {
                    this.$toast(e.error);
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 1000);
                });
        },
        chooseBank() {
            if (!(this.bankCard && this.bankCard.bindCardId)) {
                this.$router.push('/' + this.$route.params.companyId + '/mineBanksAdd');
            }
        }
    }
};
</script>

<style lang="less" scoped>
.title {
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    line-height: 24px;
}
.pay {
    padding: 30px 0;
    .flex-col();
    align-items: center;
}
.van-cell {
    margin-top: 58px;
}

.price {
    .flex();
    align-items: flex-end;
    margin-top: 14px;
    img {
        width: 10px;
        height: 11px;
        margin-bottom: 5px;
    }
    span {
        font-size: 36px;
        font-family: OSP-DIN, OSP;
        color: #3ab200;
        line-height: 30px;
    }
}

.btn {
    width: 100%;
    box-sizing: border-box;
    padding: 188px 48px;
}

.code {
    font-size: 14px;
    color: #000;
    line-height: 24px;

    &.not {
        color: #c8c9cc;
    }
}
</style>
