<template>
    <div class="tasks">
        <div class="top">
            <img class="bg" src="../../assets/beijing-icon.png" alt="" />
            <img class="top-icon" src="../../assets/laxin-icon.png" alt="" />
            <span>白名单任务</span>
        </div>
        <div class="content">
            <div class="title">
                每邀请<span>一位新用户注册</span>成功可点亮一枚勋章，当{{
                    assignment
                }}枚“勋章”<span>全部点亮</span>时获得购买资格！
            </div>

            <div class="persons">
                <div class="person" v-for="i in assignment" :key="i">
                    <van-image
                        width="42"
                        height="42"
                        radius="42"
                        :src="
                            i <= assignments.length
                                ? require('../../assets/dianliang-icon.png')
                                : require('../../assets/weidianliang-icon.png')
                        "
                        fit="contain"
                    />
                    <template v-if="i <= assignments.length">
                        <div class="text2">已点亮</div>
                        <div class="text3">{{ assignments[i - 1].nickname }}</div>
                    </template>
                    <template v-else>
                        <div class="text1">待点亮</div>
                        <div class="text3">...</div>
                    </template>
                </div>
            </div>

            <div class="tips">点击右下角按钮邀请吧～</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        assignments: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    computed: {
        assignment() {
            return this.info.assignment || 0;
        }
    },
    mounted() {
        this.getAssignment();
    },
    methods: {
        getAssignment() {
            if (this.isLogin) {
                this.$http
                    .get('/user/collectionInvite', {
                        collectionId: Number(this.info.id)
                    })
                    .then(res => {
                        this.$emit('update:assignments', res);
                    });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.tasks {
    border-radius: 12px;
    overflow: hidden;
    margin-top: 20px;
}
.top {
    .flex();
    position: relative;
    height: 42px;
    justify-content: center;
    background: linear-gradient(313deg, #ffe7cf 0%, #fccd8d 100%);
    .bg {
        width: 94px;
        height: 42px;
        position: absolute;
        left: 0;
        top: 0;
    }

    .top-icon {
        width: 18px;
        height: 18px;
    }
    span {
        font-size: 16px;
        font-weight: bold;
        color: #fd3737;
        line-height: 24px;
        background: linear-gradient(121deg, #fc3837 0%, #ff7832 100%, #ffa06c 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.content {
    background-color: #1c1c1c;
}

.title {
    font-size: 12px;
    color: @text3;
    line-height: 17px;
    padding: 10px 6px;
    text-align: center;
    span {
        color: #ffda9f;
    }
}

.persons {
    .flex();
    justify-content: center;
    padding-top: 3px;

    .person {
        .flex-col();
        align-items: center;
        height: 74px;
        width: 60px;
        overflow: hidden;
        .van-image {
            flex-shrink: 0;
        }
        .text1 {
            margin-top: 6px;
            font-size: 10px;
            color: @text3;
            line-height: 10px;
        }

        .text2 {
            font-size: 12px;
            color: #ffda9f;
            margin-top: 7px;
            line-height: 10px;
            transform: scale(0.8);
        }

        .text3 {
            font-size: 12px;
            color: #ffffff;
            line-height: 10px;
            margin-top: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            text-align: center;
            transform: scale(0.8);
        }
    }

    .person + .person {
        margin-left: 10px;
    }
}

.tips {
    font-size: 12px;
    color: @text3;
    line-height: 17px;
    text-align: center;
    padding: 16px;
}
</style>
