<template>
    <main class="container">
        <div v-if='list.length > 0'>
            <router-link
                v-for="(item,index) in list"
                :key='index'
                :to="item.OrderStatus ==3?'/prizeDetail?id='+item.ID:'/orderInfo?id='+item.ID"

            >
            <!-- 淡入 -->
            <transition name="van-slide-right">
                <div class="item">
                    <div class="item_img">
                        <img :src="item.PrizeImg " alt="">
                    </div>
                    <div class="item_info">
                        <h3 class="ellips">奖项{{index+1}}</h3>
                        <p>
                            <span class="ellips">{{item.Name}}</span>
                            <span>{{item.OrderStatus | getStatus}}</span>
                        </p>
                    </div>
                </div>
            </transition>

        </router-link>
        </div>
        <div v-else style='height: 1rem;line-height: 1rem;font-size: .35rem;'>暂无奖品</div>


    </main>
</template>

<script>
    export default {
        name: "myPrize",
        data() {
            return {
                list: [""]
            };
        },
        created() {
            this.FollowEventGetOrders();
        },
        methods: {
            FollowEventGetOrders() {
                var self = this;
                this.LJ_LOADING();
                this.$http.FollowEventGetOrders().then(({ data }) => {
                    this.$toast.clear();
                    if (data.IsSuccess) {
                        self.list = data.ResultObject;
                    } else {
                        self.$toast(data.ResultMsg);
                    }
                });
            }
        },
        filters: {
            getStatus(value) {
                if (value) {
                    switch (value) {
                        case 1:
                            return "待发货";
                            break;
                        case 2:
                            return "已发货";
                            break;
                        case 3:
                            return "未领取";
                            break;
                        default:
                            return "未知";
                    }
                }
            }
        }
    };
</script>

<style scoped lang="less">
    main {
        padding: 0.2rem 0;
    }
    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;
    }
    .item {
        width: 7.1rem;
        height: 2rem;
        margin: 0 auto 0.2rem;
        box-sizing: border-box;
        padding: 0.2rem;
        display: flex;
        justify-content: flex-start;
        border-radius: 8px;
        align-items: center;
        box-shadow: 0px 2px 6px #ccc;
        h3 {
            font-size: 0.32rem;
            color: #333333;
            max-width: 100%;
            text-align: left;
        }
        p {
            display: flex;
            justify-content: space-between;
            font-size: 0.32rem;
            color: #333333;
            span:nth-child(2) {
                color: #4ca0ff;
            }
            span:nth-child(1) {
                max-width: 3.5rem;
            }
        }
    }
    .item_img {
        width: 1.4rem;
        height: 1.4rem;
        margin-right: 0.2rem;
        border-radius: 5px;
        overflow: hidden;
    }
    .item_info {
        width: 5rem;
        height: 60%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
</style>
