<template>
    <div class="exchange">
        <van-image class="icon" width="calc(100vw - 52px)" :src="ticketInfo.img" fit="scale-down" />

        <van-cell-group :border="false">
            <van-cell>
                <template #title>
                    <div class="cell-title">
                        <span>{{ info.price }}</span>
                        <span>个绿洲核</span>
                    </div>
                </template>
                <template #value>
                    <van-stepper :min="1" v-model="qty" input-width="40px" />
                </template>
            </van-cell>
            <van-cell :border="false" class="cell2" :title="ticketInfo.label">
                <template #label>
                    <div>
                        <div>虚拟商品兑换成功后不支持退换</div>
                        <div>有效果期30天</div>
                    </div>
                </template>
            </van-cell>
        </van-cell-group>

        <div class="bottom">
            <div class="price">
                <span>{{ money }}</span>
                <span>个绿洲核</span>
            </div>
            <van-button type="primary" @click="submit">立即兑换</van-button>
        </div>
    </div>
</template>

<script>
import room from '../mixins/room.js';
export default {
    data() {
        return {
            qty: 1,
            ticketPrices: [],
            ticket: '',
            buyType: false
        };
    },
    mixins: [room],
    computed: {
        money() {
            let price = this.info.price || 0;
            price = this.accMul(price, this.qty);
            return price;
        },
        info() {
            let info = [...this.ticketPrices].find(item => {
                return item.type === this.ticket;
            });

            return info ? info : {};
        },
        ticketInfo() {
            let info = [...this.requireTicketOptions].find(item => {
                return item.value === this.ticket;
            });
            return info ? info : {};
        }
    },
    mounted() {
        if (this.$route.query.ticket) {
            this.ticket = this.$route.query.ticket;
        }
        if (this.$route.query.buyType === true || this.$route.query.buyType === 'true') {
            this.buyType = true;
        } else {
            this.buyType = false;
        }
        this.$http
            .post('/ticketPrice/all', { size: 1000, query: { del: false } }, { body: 'json' })
            .then(res => {
                this.ticketPrices = res;
            })
            .catch(e => {
                console.log(e);
                this.$toast(e.error);
            });
    },
    methods: {
        submit() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });

            this.$http
                .post('/ticketOrder/create', {
                    type: this.ticket,
                    qty: this.qty
                })
                .then(res => {
                    return this.$http.get(`/order/pay/${res.id}/BALANCE`);
                })
                .then(res => {
                    this.$toast.success('购买成功');
                    setTimeout(() => {
                        if (this.buyType) {
                            this.$router.go(-2);
                        } else {
                            this.$router.back();
                        }
                    }, 1000);
                })
                .catch(e => {
                    this.$toast(e.error);
                });
        }
    }
};
</script>

<style lang="less" scoped>
.exchange {
    padding: 10px 26px 0;
}

.cell-title {
    .flex();
    align-items: flex-end;
    span {
        &:first-child {
            font-size: 20px;
            font-weight: bold;
            line-height: 24px;
        }

        &:nth-child(2) {
            font-size: 12px;
            line-height: 20px;
            margin-left: 2px;
        }
    }
}

/deep/.van-stepper {
    .van-stepper__minus,
    .van-stepper__plus {
        border-radius: 4px;
    }

    .van-stepper__input {
        border-radius: 4px;
        margin: 0 6px;
    }
}
.van-cell-group {
    padding: 15px 0;
}
.van-cell {
    padding: 16px 0;

    &::after {
        width: 323px;
        height: 1px;
        background: #313346;
        border-width: 0;
        left: 0;
        right: 0;
    }
}

/deep/.cell2 {
    .van-cell__title {
        font-size: 16px;
        font-weight: bold;
    }
    .van-cell__label {
        font-size: 12px;
        color: #6a6d83;
        line-height: 17px;
        margin-top: 8px;
    }
}

.bottom {
    background: #141624;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 9px 26px;
    .bottom(9px);
    justify-content: space-between;
    .flex();
    z-index: 20;
    .van-button {
        width: 160px;
    }

    .price {
        color: #ffe3a3;
        font-weight: bold;
        .flex();
        align-items: flex-end;

        span {
            &:first-child {
                font-size: 20px;
                line-height: 24px;
            }
            &:nth-child(2) {
                font-size: 12px;
                line-height: 20px;
                margin-left: 2px;
            }
        }
    }
}
</style>
