<template>
    <div class="exchange">
        <div class="collection">
            <van-image width="80" height="80" radius="4" fit="cover" :src="info.pic" />
            <div class="collection-info">
                <div class="text1 van-multi-ellipsis--l2">{{ info.name }}</div>
                <div class="text2">
                    <span>{{ info.price }}</span>
                    <span>个绿洲核</span>
                </div>
            </div>
        </div>

        <div class="account">
            <div class="account-title">兑换账号</div>
            <van-field
                type="tel"
                input-align="center"
                label-width="0"
                placeholder="请输入该账户注册的手机号"
                v-model="phone"
                maxlength="11"
                clearable
            />
        </div>

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

<script>
import phone from '../mixins/phone';
export default {
    data() {
        return {
            phone: '',
            exchangeItemId: 0,
            info: {}
        };
    },
    mounted() {
        if (this.$route.query.exchangeItemId) {
            this.exchangeItemId = this.$route.query.exchangeItemId;
        }
        this.getDetail();
    },
    mixins: [phone],
    methods: {
        getDetail() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http.get('/exchangeItem/get/' + this.exchangeItemId).then(res => {
                this.info = res;
                this.$toast.clear();
            });
        },
        submit() {
            if (!this.phone) {
                this.$toast('手机号不能为空!');
                return;
            }
            if (!this.phonePattern.test(this.phone)) {
                this.$toast('手机号格式错误');
                return;
            }

            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .post('/exchangeOrder/create', {
                    itemId: this.exchangeItemId,
                    phone: this.phone
                })
                .then(res => {
                    this.$toast.success('兑换成功');
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 1000);
                })
                .catch(e => {
                    this.$toast(e.error);
                });
        }
    }
};
</script>

<style lang="less" scoped>
.exchange {
    padding: 16px;
}
.collection {
    .flex();
    padding: 12px;
    background-color: @bg2;
    align-items: stretch;
}
.collection-info {
    flex-grow: 1;
    .flex-col();
    justify-content: space-between;
    margin-left: 12px;
    .text1 {
        font-size: 14px;
        color: #ffffff;
        line-height: 24px;
    }

    .text2 {
        span {
            color: #ffffff;
            &:first-child {
                font-size: 16px;
                font-weight: bold;
                line-height: 24px;
            }

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

.account {
    .flex-col();
    align-items: center;

    .account-title {
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
        line-height: 24px;
        padding: 30px 0 12px;
    }

    .van-field {
        background-color: @bg2;
    }
}

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

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