<template>
    <div class="search">
        <div class="filter-bg" :style="{ backgroundImage: `url(${filterBg})` }"></div>
        <div class="header">铸造活动</div>
        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <template v-for="(item, index) in list" :key="index">
                <router-link
                    :to="{
                        path: '/activityDetail',
                        query: {
                            id: item.id
                        }
                    }"
                    class="activity"
                >
                    <van-image
                        width="calc(100vw - 32px)"
                        height=" calc(40vw - 12.8px)"
                        radius="4"
                        :src="getImg(item.cover)"
                        fit="cover"
                    />
                    <div class="content">
                        <div class="text1">{{ item.name }}</div>
                        <div class="text2">限量{{ item.total }}份</div>
                        <div class="btn">
                            <span>立即兑换</span>
                            <img src="../../assets/icon-jiantou.png" alt="" />
                        </div>
                    </div>
                    <img src="../../assets/png-diwen1.png" alt="" class="img1" />
                </router-link>
            </template>

            <van-empty v-if="empty" description="暂无活动哦~" :image="require('@assets/kong_png_wusousuo.png')" />
        </van-list>
    </div>
</template>

<script>
import list from '../../mixins/list';
export default {
    name: 'Search',
    mixins: [list],
    data() {
        return {
            list: [],
            empty: false,
            url: '/mintActivity/all'
        };
    },
    computed: {
        filterBg() {
            if (this.list.length > 0) {
                return this.list[0].cover;
            } else {
                return '';
            }
        }
    },
    methods: {
        beforeData() {
            return {
                query: {
                    del: false
                }
            };
        }
    }
};
</script>

<style lang="less" scoped>
.search {
    padding-bottom: 50px;
    z-index: 1;
    background-color: #181818;
    position: relative;
    .filter-bg {
        background-position: top;
        // background-size: 100% 500px;
        background-repeat: no-repeat;
        top: 50px;
    }
}
.activity {
    margin: 16px;
    display: block;
    background-color: #1c1e25;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    .van-image {
        z-index: 2;
    }
}
.img1 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 92px;
    height: auto;
    z-index: 1;
}
.content {
    padding: 5px 16px;
    position: relative;
    .text1 {
        color: #fff;
    }
    .text2 {
        color: @text3;
    }

    .btn {
        color: @prim;
        position: absolute;
        right: 14px;
        bottom: 5px;
        .flex();
        img {
            width: 18px;
            height: 18px;
        }
    }
}

.header {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    line-height: 24px;
    padding: 13px 0;
    text-align: center;
    position: relative;
    background-color: #181818;
}
</style>
