<template>
    <div class="mine">
        <div class="userInfo">
            <van-image
                width="100%"
                height="35vw"
                loading-icon=""
                :src="info.bg || require('@assets/creatorBg.png')"
                fit="cover"
                class="top-img"
            />
            <div class="userInfo-content">
                <div class="userInfo-top">
                    <van-image
                        round
                        :class="{ rank: rankInfo.img1 }"
                        width="70"
                        height="70"
                        :src="info.avatar || require('@assets/svgs/img_default_photo.svg')"
                        fit="cover"
                        @click="$router.push('/setting')"
                    />
                    <img class="rank-icon" :src="rankInfo.img1" v-if="rankInfo.img1" alt="" />

                    <div class="text">
                        <div class="text1">
                            <span class="van-ellipsis">{{ info.nickname }}</span>
                            <img v-if="info.authStatus === 'SUCCESS'" src="@assets/renzheng_icon_pre.png" alt="" />
                        </div>
                        <div class="text2">
                            <span>{{ info.id }}</span>
                            <img @click="copy" src="@assets/svgs/copy_icon.svg" alt="" />
                        </div>
                    </div>
                </div>

                <div class="sub">
                    {{ info.intro || '他还没有介绍哦～' }}
                </div>

                <div class="btns">
                    <div class="collect">
                        <div class="text1">{{ info.follows }}</div>
                        <div class="text2">关注</div>
                    </div>
                    <div class="collect">
                        <div class="text1">{{ info.followers }}</div>
                        <div class="text2">粉丝</div>
                    </div>
                    <div class="flex1"></div>
                    <van-button
                        class="follow"
                        @click="follow"
                        plain
                        type="primary"
                        size="mini"
                        round
                        :class="{ followed: info.follow }"
                    >
                        {{ info.follow ? '已关注' : '关注' }}
                    </van-button>
                    <!-- <van-button
            plain
            @click="$router.push('/setting')"
            color="@text3"
            size="mini"
            round
            >分享</van-button
          > -->
                </div>
            </div>
        </div>

        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
            <div class="menu">
                <div class="menu-item" @click="changeMenu('DEFAULT')" :class="{ active: type === 'DEFAULT' }">
                    藏品类目
                </div>
                <div class="menu-item" @click="changeMenu('BLIND_BOX')" :class="{ active: type === 'BLIND_BOX' }">
                    盲盒类目
                </div>
                <div class="flex1"></div>
                <div class="search" @click="$router.push(`/productSearch?minterId=${info.id}`)">
                    <img src="@assets/svgs/search.svg" alt="" />
                </div>
            </div>

            <van-tabs v-model:active="salable" :ellipsis="false" @change="getList" line-width="16" line-height="2">
                <van-tab title="全部" name=""></van-tab>
                <van-tab title="寄售" :name="true"></van-tab>
            </van-tabs>
        </van-sticky>
        <div class="list">
            <template v-for="(item, index) in list" :key="index">
                <product-info v-model:info="list[index]"></product-info
            ></template>
            <van-empty
                v-if="empty"
                :image="require('@assets/kong_png_yongyoude  (1).png')"
                description="没有任何收藏品哦~"
            />
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import productInfo from '../../components/product/productInfo.vue';
export default {
    components: { productInfo },
    computed: {
        ...mapState(['userInfo']),
        rankInfo() {
            let index = [...this.hots].findIndex(item => {
                return item.id === this.info.id;
            });
            let rank = index + 1;
            if (rank) {
                const colors = ['#FF8E12', '#C37BFF', '#3ACEFF'];
                return {
                    img1: require(`@assets/NO${rank}.png`),
                    img2: require(`@assets/svgs/NOicon${rank}.svg`),
                    color: colors[rank]
                };
            }
            return {};
        }
    },
    inject: ['bar'],
    data() {
        return {
            info: {},
            type: 'DEFAULT',
            salable: '',
            stiky: null,
            list: [],
            empty: false,
            hots: []
        };
    },
    mounted() {
        this.getInfo();
        this.getHot();
    },
    methods: {
        copy() {
            this.$copyText(this.info.id).then(
                e => {
                    this.$toast.success('复制成功');
                    console.log(e);
                },
                e => {
                    this.$toast('复制失败');
                    console.log(e);
                }
            );
        },
        getInfo() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http.get('/user/get/' + this.$route.query.id).then(res => {
                this.info = res;
                this.getList();
            });
        },
        follow() {
            if (!this.info.follow) {
                this.$http.get(`/user/${this.info.id}/follow`).then(res => {
                    this.getInfo();
                    this.$toast.success('关注成功');
                });
            } else {
                this.$http.get(`/user/${this.info.id}/unfollow`).then(() => {
                    this.getInfo();
                    this.$toast.success('取消关注');
                });
            }
        },
        getList() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .post(
                    '/collection/all',
                    {
                        page: 0,
                        size: 20,
                        query: {
                            type: this.type,
                            salable: this.salable,
                            minterId: this.info.id,
                            del: false,
                            source: 'OFFICIAL,USER'
                        },
                        sort: this.sort
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.list = res.content;
                    this.empty = res.empty;
                    this.$toast.clear();
                });
        },
        changeMenu(menu) {
            this.type = menu;
            this.getList();
        },
        getHot() {
            this.$http
                .post(
                    '/user/all',
                    {
                        page: 0,
                        query: { hasRole: 'ROLE_MINTER' },
                        size: 3,
                        sort: 'sales,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.hots = res.content;
                });
        }
    }
};
</script>

<style lang="less" scoped>
.mine {
    background-color: #0f0f0f;
}
.userInfo {
    padding-top: 35vw;
    position: relative;

    .top-img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;

        /deep/.van-image__loading {
            // background: linear-gradient(131deg, #fffbb2 0%, #ffd5b7 100%);
            filter: blur(0px);
        }
    }
}
.userInfo-content {
    padding: 0 16px;
    z-index: 2;
    position: relative;
    transform: translateY(-14px);
    .sub {
        font-size: 14px;
        color: @text3;
        line-height: 22px;
        padding: 6px 0;
    }

    .btns {
        display: flex;
        // padding-bottom: 16px;
        align-items: center;
        transform: translateY(14px);
        padding-bottom: 6px;
        .collect {
            width: 20%;
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            justify-content: flex-end;
            .text1 {
                font-size: @font2;
                color: #ffffff;
                line-height: 24px;
                margin-left: 6px;
            }
            .text2 {
                font-size: @font2;
                color: @text3;
                line-height: 24px;
            }
        }

        /deep/.van-button {
            width: 70px;
            font-size: @font1;
            .van-icon__image {
                display: block;
                width: 18px;
                height: 18px;
            }
        }
        .van-button + .van-button {
            margin-left: 10px;
        }

        .follow {
            border: solid 0px transparent;
            padding: 1px;
            background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, #fdfb60, #ff8f3e);
            background-origin: border-box;
            box-sizing: border-box;
            background-clip: content-box, border-box;
            &.followed {
                background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3);
                color: @text3;
            }
        }
    }
}

.userInfo-top {
    display: flex;
    align-items: flex-end;
    position: relative;
    transform: translateX(-5px);
    .van-image {
        border: 5px solid @bg;
        flex-shrink: 0;

        &.rank {
            border-color: transparent;
        }
    }

    .rank-icon {
        width: 80px;
        height: 90px;
        display: block;
        height: auto;
        position: absolute;
        top: -8px;
        left: 1px;
    }

    .text {
        margin: 0 40px 0 12px;
        overflow: hidden;
        .text1 {
            font-size: @font3;
            font-weight: bold;
            color: #ffffff;
            line-height: 24px;
            .flex();

            img {
                width: 18px;
                height: 18px;
                margin-left: 10px;
            }
        }
        .text2 {
            font-size: @font2;
            color: @text3;
            line-height: 24px;
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            img {
                display: block;
                margin-left: 6px;
            }
        }
    }
}
.menu {
    display: flex;
    height: 50px;
    align-items: center;
    padding: 0 16px;
    // border-bottom: 1px solid #202122;
    background-color: transparent;
    .menu-item {
        font-size: 16px;
        color: @text3;
        line-height: 24px;
        margin-right: 30px;
        &.active {
            color: @prim;
            font-weight: bold;
        }
    }
}

.list {
    padding: 8px 8px 100px;
}
</style>
