<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="history"
                v-if="isMinter"
                @click="$router.push(`/productList?minterId=${info.id}&source=TRANSFER`)"
            >
                历史创作
            </div>
            <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"
                    />
                    <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>用户ID:{{ info.id }}</span>
                            <img @click="copy" src="@assets/svgs/copy_icon.svg" alt="" />
                        </div>
                    </div>
                </div>

                <div class="sub" :class="{ 'van-multi-ellipsis--l2': !showMore }">
                    {{ info.intro || '他还没有介绍哦～' }}
                </div>
                <div class="sub-right" v-if="info.intro && info.intro.length > 50">
                    <div @click="showMore = !showMore">{{ showMore ? '收起' : '展开' }}</div>
                </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="46">
            <div class="menu" v-if="isMinter">
                <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>
                <van-checkbox @change="getData(true)" class="sala" v-model="salable">仅看在售</van-checkbox>
                <div
                    class="search"
                    @click="
                        $router.push(
                            `/productSearch?${isMinter ? 'minterId' : 'ownerId'}=${info.id}&source=${sourceType}`
                        )
                    "
                >
                    <img src="@assets/icon-sosuo.png" alt="" />
                </div>
            </div>

            <van-tabs
                v-else
                v-model:active="salable"
                :ellipsis="false"
                @change="getData(true)"
                line-width="16"
                line-height="2"
            >
                <van-tab title="全部" name=""></van-tab>
                <van-tab title="寄售" :name="true"></van-tab>
                <van-tab title="仅展示" :name="false"></van-tab>
            </van-tabs>
        </van-sticky>
        <van-list
            style="padding-bottom: 100px"
            class="list"
            v-model:loading="loading"
            :finished="finished"
            :immediate-check="false"
            finished-text=""
            @load="getData"
        >
            <template v-for="(item, index) in list" :key="item.id">
                <product-info v-model:info="list[index]"></product-info>
            </template>
            <van-empty
                v-if="empty"
                :image="require('@assets/kong_png_yongyoude  (1).png')"
                description="没有任何收藏品哦~"
            />
        </van-list>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import productInfo from '../../components/product/productInfo.vue';
import list from '../../mixins/list';
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 {};
        },
        sourceType() {
            if (this.isMinter) {
                return 'OFFICIAL,USER';
            } else {
                return 'TRANSFER';
            }
        }
    },
    inject: ['bar'],
    mixins: [list],
    data() {
        return {
            info: {},
            type: 'DEFAULT',
            salable: '',
            stiky: null,
            list: [],
            empty: false,
            hots: [],
            url: '/collection/all',
            isMinter: true,
            showMore: false
        };
    },
    mounted() {
        if (this.$route.query.type) {
            this.isMinter = false;
        } else {
            this.isMinter = true;
        }
        this.getInfo();
        this.getHot();
    },
    methods: {
        beforeData() {
            if (this.isMinter) {
                return {
                    query: {
                        type: this.type,
                        salable: this.salable || '',
                        minterId: this.info.id || this.$route.query.id,
                        del: false,
                        source: this.sourceType,
                        onShelf: true
                    },
                    sort: 'soldOut;' + (this.sort || 'id,desc')
                };
            } else {
                return {
                    query: {
                        type: this.type,
                        salable: this.salable,
                        ownerId: this.info.id || this.$route.query.id,
                        del: false,
                        source: this.sourceType
                    },
                    sort: 'soldOut;' + (this.sort || 'id,desc')
                };
            }
        },
        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.$toast.clear();
                this.info = res;
                this.getData(true);
            });
        },
        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('取消关注');
                });
            }
        },
        changeMenu(menu) {
            this.type = menu;
            this.getData(true);
        },
        getHot() {
            this.$http
                .post(
                    '/user/all',
                    {
                        page: 0,
                        query: { minter: true },
                        size: 3,
                        sort: 'sales,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.hots = res.content;
                });
        }
    }
};
</script>

<style lang="less" scoped>
/deep/.van-tab {
    margin-right: 26px !important;
}
.mine {
    background-color: @bg3;
}
.userInfo {
    padding-top: 35vw;
    position: relative;
    background-color: @bg;

    .history {
        position: absolute;
        right: 16px;
        font-size: @font1;
        color: @text0;
        line-height: 24px;
        padding: 0 10px;
        background-color: fade(@bg, 80%);
        border-radius: 13px;
        top: 16px;
        z-index: 2;
    }

    .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: 12px;
        color: @text3;
        line-height: 22px;
        padding: 6px 0 0;
    }

    .sub-right {
        .flex();
        justify-content: flex-end;
    }

    .sub-right > div {
        font-size: 12px;
        color: @text0;
        line-height: 17px;
        text-decoration: underline;
    }

    .btns {
        display: flex;
        // padding-bottom: 16px;
        align-items: center;
        transform: translateY(14px);
        padding: 6px 0;
        .collect {
            width: 20%;
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            justify-content: flex-end;
            .text1 {
                font-size: @font2;
                color: @text0;
                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, @prim, @warn);
            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: @text0;
            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: @bg;
    .menu-item {
        font-size: 16px;
        color: @text3;
        line-height: 24px;
        margin-right: 30px;
        &.active {
            color: @prim;
            font-weight: bold;
        }
    }

    .search {
        img {
            width: 24px;
            height: 24px;
            display: block;
        }
    }
}
.van-tabs {
    background-color: @bg;
}

/deep/.van-tabs__nav--line.van-tabs__nav--complete {
    border-color: @tabBorder;
}

.list {
    padding: 8px 8px 100px;
}

/deep/.sala {
    margin-right: 10px;
    .van-checkbox__icon {
        color: #fff;
        transform: scale(0.6);

        .van-icon {
            border-color: @text3;
        }

        &.van-checkbox__icon--checked {
            .van-icon {
                border-width: 0;
                .linear();
                &::before {
                    color: #fff;
                }
            }
        }
    }
    .van-checkbox__label {
        color: @text3;
        margin-left: 0px;
        font-size: @font1;
    }
}
</style>
