<template>
    <main class="container">
        <div class="banner">
            <img :src="data.PrizeImg" alt="">
        </div>
        <div style="padding: .2rem;">
            <div class="info">
                <h3>{{data.Name}}</h3>
                <p>
                    <span>￥{{(data.Price - data.Postage) | getPrice}}</span>&nbsp;&nbsp;
                    <span>原价：￥{{data.OriginalPrice | getPrice}}</span>
                </p>
                <div>
                    <span>邮费：{{data.Postage | getPrice}}</span>
                </div>
            </div>
            <div class="other">
                <p>Ta们都在参与活动</p>
                <div>
                    <div>
                        <van-image
                                width=".6rem"
                                height=".6rem"
                                fit="cover"
                                round
                                class="other_img"
                                v-for="(item,index) in data.rankingLists"
                                :key="index"
                                :src="item"
                                v-if="index < 6"
                        />
                    </div>
                    <router-link to="/ranking">查看排行榜>></router-link>

                </div>
            </div>
            <div class="detail">
                <p>详情</p>
                <div>
                    {{data.Description || '暂无'}}
                </div>
<!--                <van-icon name="arrow-down"  size=".36rem" color="#999999" />-->
            </div>
        </div>
        <van-button @click="ToOrderInfo()" :to="'orderInfo?id='+id" style="position: fixed;bottom: 0;" type="primary" color="#4CA0FF" block>{{data.OrderStatus == 3?'立即领取':'已领取'}}</van-button>
    </main>
</template>

<script>
    export default {
        name: "prizeDetail",
        data(){
            return{
                id:'',
                data:'',
            }
        },
        created(){
            this.id = this.$route.query.id
            this.FollowEventGetPrizeOrder();
        },
        methods:{
            FollowEventGetPrizeOrder(){
                var self = this;
                this.LJ_LOADING();
                this.$http.FollowEventGetPrizeOrder(this.id).then(({data})=>{
                    this.$toast.clear();
                    if(data.IsSuccess){
                        self.data = data.ResultObject;
                    }else{
                        self.$toast(data.ResultMsg)
                    }
                })
            },

            ToOrderInfo(){
                if(this.data.OrderStatus == 3){
                    this.$router.push({path:'/orderInfo',query:{id:this.id}});
                }else{
                    this.$toast('已被领取')
                }
            }
        },
    }
</script>

<style scoped lang="less">
    main{
        padding-bottom:1rem;
    }
    p{
        text-align: left;
    }
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .container{
        width: 7.5rem;
        max-width: 7.5rem;
        min-height: 100vh;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .banner{
        width: 7.5rem;
        height: 3.2rem;
    }
    .info{
        >*{
            line-height: 1.7;
        }
        h3{
            font-size: .38rem;
            color: #333333;
            line-height: 1.2;
            text-align: left;
        }
        >p{
            text-align: left;
            span:nth-child(1){
                font-size: .38rem;
                color: #ff0000;
            }
            span:nth-child(2){
                font-size: .24rem;
                color: #999999;
                text-decoration: line-through;
            }
        }
        >div{
            display: flex;
            justify-content: space-between;
            font-size: .24rem;
            color: #999999;
        }
    }
    .other{
        margin-top: .5rem;
        >p{
            margin-bottom: .2rem;
            font-size: .26rem;
            color: #666666;
        }
        .other_img{
            border:1px solid #fff;
            margin-left: -.1rem;
        }
        >div{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    .detail{
        margin-top: .4rem;
        >p{
            font-size: .28rem;
            color: #333333;
            margin-bottom: .2rem;
        }
        >div{
            font-size: .26rem;
            color: #999999;
            text-align: left;
            line-height: 1.2;
        }
        .e2{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
        }
    }
</style>
