<template>
    <router-link
        :to="{
            path: '/' + $route.params.companyId + '/creatorDetail',
            query: {
                id: info.id
            }
        }"
        class="info"
    >
        <van-image
            width="100%"
            height="120"
            :src="info.bg ? info.bg : require('@assets/creatorBg.png')"
            loading-icon=""
            fit="cover"
            class="bg-img"
        />
        <van-image class="logo" :width="32" :height="32" :src="getImg(info.avatar)" fit="cover" radius="100" />

        <div class="content">
            <div class="text1 van-ellipsis">{{ info.nickname }}</div>
            <div class="text2 van-multi-ellipsis--l2">
                {{ info.intro }}
            </div>
        </div>
    </router-link>
</template>

<script>
export default {
    props: {
        rank: {
            type: Number,
            default: 0
        },
        info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        isFollow: {
            type: Boolean,
            default: false
        },
        size: {
            type: String,
            default: 'normal'
        }
    },
    computed: {
        NOInfo() {
            if (this.rank) {
                const colors = ['#FF8E12', '#C37BFF', '#3ACEFF'];
                return {
                    img1: require(`@assets/NO${this.rank}.png`),
                    img2: require(`@assets/svgs/NOicon${this.rank}.svg`),
                    color: colors[this.rank - 1]
                };
            }
            return {};
        }
    },
    methods: {
        follow() {
            this.checkLogin().then(() => {
                if (!this.info.follow) {
                    this.$http.get(`/user/${this.info.id}/follow`).then(res => {
                        this.$emit('update:info', {
                            ...this.info,
                            follow: true,
                            followers: this.info.followers + 1
                        });
                        this.$toast.success('关注成功');
                    });
                } else {
                    this.$http.get(`/user/${this.info.id}/unfollow`).then(() => {
                        this.$emit('update:info', {
                            ...this.info,
                            follow: false,
                            followers: this.info.followers - 1
                        });
                        this.$toast.success('取消关注');
                    });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.info {
    display: inline-block;
    position: relative;
    width: calc(50vw - 24px);
    background: #373b3e;
    border-radius: 8px;
    overflow: hidden;
    margin: 8px;

    .content {
        flex-grow: 1;
        padding-left: 12px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 90px;
        background: #373b3e;
        padding: 25px 10px 10px;
        align-items: center;
        box-sizing: border-box;

        .text1 {
            font-size: 12px;
            font-weight: bold;
            color: #ffffff;
            line-height: 17px;
        }

        .text2 {
            font-size: 12px;
            color: @text3;
            line-height: 17px;
            width: 100%;
            margin-top: 4px;
            text-align: center;
        }
    }
}

.bg-img {
    display: block;
}

.logo {
    position: absolute;
    top: 102px;
    left: 50%;
    transform: translateX(-50%);
    border: 3px solid #fff;
    background-color: #fff;
}
</style>
