<template>
    <div class="mine">
        <div class="userInfo">
            <van-image width="100%" height="35vw" loading-icon="" :src="info.bg" fit="cover" class="top-img" />
            <div class="userInfo-content">
                <div class="userInfo-top">
                    <van-image
                        round
                        width="78"
                        height="78"
                        :src="info.avatar || require('../../assets/svgs/img_default_photo.svg')"
                        fit="cover"
                        @click="$router.push('/setting')"
                    />
                    <div class="text">
                        <div class="text1 van-ellipsis">{{ info.nickname }}</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="#939599"
            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" @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" description="没有任何收藏品哦~" />
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import productInfo from '../../components/product/productInfo.vue';
export default {
    components: { productInfo },
    computed: {
        ...mapState(['userInfo'])
    },
    inject: ['bar'],
    data() {
        return {
            info: {},
            type: 'DEFAULT',
            salable: '',
            stiky: null,
            list: [],
            empty: false
        };
    },
    mounted() {
        this.getInfo();
    },
    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
                        },
                        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();
        }
    }
};
</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(-8px);
    .sub {
        font-size: 14px;
        color: #939599;
        line-height: 22px;
        padding: 16px 0;
    }

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

        /deep/.van-button {
            width: 70px;
            .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, #939599, #939599);
                color: #939599;
            }
        }
    }
}

.userInfo-top {
    display: flex;
    align-items: center;
    .van-image {
        border: 5px solid @bg;
        flex-shrink: 0;
    }

    .text {
        margin: 0 40px 0 12px;
        overflow: hidden;
        .text1 {
            font-size: 24px;
            font-weight: bold;
            color: #ffffff;
            line-height: 34px;
        }
        .text2 {
            font-size: 16px;
            color: #949699;
            line-height: 24px;
            display: flex;
            align-items: center;
            margin-top: 6px;
            img {
                display: block;
                margin-left: 6px;
            }
        }
    }
}
.menu {
    display: flex;
    height: 50px;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #202122;
    background-color: @bg3;
    .menu-item {
        font-size: 16px;
        font-weight: bold;
        color: #939599;
        line-height: 24px;
        margin-right: 30px;
        &.active {
            color: @prim;
            font-size: 18px;
        }
    }
}
/deep/ .van-tabs {
    .van-tabs__nav {
        background-color: #0f0f0f;
    }
    .van-tab {
        flex-grow: 0;
        flex-shrink: 0;
        min-width: 70px;
    }
}

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