<template>
    <van-pull-refresh
        success-text="加载成功"
        success-duration="500"
        class="mine"
        v-model="isLoading"
        :head-height="80"
        @refresh="onRefresh"
    >
        <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(
                        '/' +
                            this.$route.params.companyId +
                            `/productSearch?${isMinter ? 'minterId' : 'ownerId'}=${info.id}&source=${sourceType}`
                    )
                "
            >
                <img src="@assets/icon-sosuo.png" alt="" />
                <span>搜索</span>
            </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 class="collect">
                        <div class="text1">{{ info.followers }}</div>
                        <div class="text2">粉丝</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> -->

                    <!-- <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>
        <template v-if="info.isPublicShow || !publishShow">
            <van-sticky ref="top" :offset-top="barHeight">
                <div class="menu" v-if="isMinter">
                    <div class="menu-item" @click="changeMenu('HISTORY')" :class="{ active: type === 'HISTORY' }">
                        历史创作
                    </div>
                    <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="menu-item"
                        v-if="showRoom"
                        @click="changeMenu('SHOWROOM')"
                        :class="{ active: type === 'SHOWROOM' }"
                    >
                        展厅
                    </div> -->
                    <div class="flex1"></div>
                    <van-checkbox v-if="type !== 'SHOWROOM'" @change="getData(true)" class="sala" v-model="salable"
                        >仅看在售</van-checkbox
                    >
                </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-tab title="展厅" v-if="showRoom" name="showRoom"></van-tab> -->
                </van-tabs>
            </van-sticky>
            <van-list
                style="padding-bottom: 100px"
                class="list"
                :class="{ hallList: isShowType }"
                v-model:loading="loading"
                :finished="finished"
                :immediate-check="false"
                finished-text=""
                @load="getData"
            >
                <template v-for="(item, index) in list" :key="item.id">
                    <show-info v-if="isShowType" v-model:info="list[index]" list></show-info>
                    <product-info v-else dark type="creator" v-model:info="list[index]"></product-info>
                </template>
                <van-empty v-if="empty" :image="require('@assets/kong_black.png')" description="没有任何收藏品哦~" />
            </van-list>
        </template>

        <van-dialog
            v-model:show="showDialog"
            title="无法查看"
            message="该用户已开启隐私设置，您没有权限查看对方的主页！"
            confirm-button-text="返回"
            confirm-button-color="#626366"
            @confirm="$router.go(-1)"
        >
            <template #title>
                <div class="dialog-top">
                    <img src="@assets/icon-wufachakan.png" alt="" />
                    <div>无法查看</div>
                </div>
            </template>
        </van-dialog>
    </van-pull-refresh>
</template>

<script>
import { mapState } from 'vuex';
import ShowInfo from '../../components/asset/showInfo.vue';
import productInfo from '../../components/product/productInfo.vue';
import list from '../../mixins/list';
export default {
    components: { productInfo, ShowInfo },
    computed: {
        ...mapState(['userInfo', 'companyId']),
        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) {
                if (this.type === 'HISTORY') {
                    return 'TRANSFER';
                } else {
                    return 'OFFICIAL,USER';
                }
            } else {
                return 'TRANSFER';
            }
        },
        isShowType() {
            if (this.type == 'SHOWROOM' || this.salable === 'showRoom') {
                return true;
            }
            return false;
        },
        url() {
            if (this.isShowType) {
                return '/showroom/all';
            }
            return '/collection/all';
        }
    },
    name: 'creatorDetail',
    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll', 'barHeight'],
    mixins: [list],
    data() {
        return {
            info: {},
            type: 'HISTORY',
            salable: true,
            stiky: null,
            list: [],
            empty: false,
            hots: [],
            isMinter: true,
            showMore: false,
            scrollTop: 0,
            showRoom: false,
            isSave: false,
            showDialog: false,
            publishShow: false
        };
    },
    mounted() {
        if (this.$route.query.type) {
            this.isMinter = false;
        } else {
            this.isMinter = true;
        }
        this.getInfo();
        this.getHot();
        this.$http
            .post(
                '/showroom/all',
                {
                    query: {
                        del: false,
                        publish: true,
                        userId: this.$route.query.id
                    }
                },
                { body: 'json' }
            )
            .then(res => {
                if (!res.empty) {
                    this.showRoom = true;
                }
            });
    },
    methods: {
        beforeData() {
            if (this.isShowType) {
                return {
                    query: {
                        userId: this.info.id || this.$route.query.id,
                        del: false,
                        status: 'SUCCESS',
                        publish: true,
                        companyId: this.companyId
                    },
                    sort: 'id,desc'
                };
            } else if (this.isMinter) {
                let type = this.type;
                let sort = 'soldOut;' + (this.sort || 'id,desc');
                if (this.type === 'HISTORY') {
                    type = '';
                    sort = 'price,asc';
                }
                return {
                    query: {
                        type: type,
                        salable: this.salable || '',
                        minterId: this.info.id || this.$route.query.id,
                        del: false,
                        source: this.sourceType,
                        onShelf: true,
                        companyId: this.companyId
                    },
                    sort: sort
                };
            } else {
                return {
                    query: {
                        salable: this.salable,
                        ownerId: this.info.id || this.$route.query.id,
                        del: false,
                        source: this.sourceType,
                        companyId: this.companyId
                    },
                    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.showDialog = false;
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .get('/user/get/' + this.$route.query.id)
                .then(res => {
                    this.$toast.clear();
                    this.info = res;
                    if (res.isPublicShow || !this.publishShow) {
                        this.isSave = true;
                        return this.getData(true);
                    } else {
                        this.isSave = false;
                        this.showDialog = true;
                        // this.$dialog
                        //     .alert({ title: '提示', message: '该用户隐藏了自己的主页，无法查看哦～' })
                        //     .then(() => {
                        //         this.$router.back();
                        //     });

                        return Promise.resolve();
                    }
                })
                .catch(e => {
                    this.$toast.clear();
                });
        },
        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;
            if (menu === 'HISTORY') {
                this.salable = true;
            } else {
                this.salable = false;
            }
            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;
                });
        },
        onRefresh() {
            this.getInfo().then(() => {
                this.isLoading = false;
            });
            this.getHot();
        }
    },
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop);
        });
    },
    beforeRouteLeave(to, from, next) {
        if ((to.name === 'productDetail' || to.name === 'hall') && this.isSave) {
            this.scrollTop = this.scrollWrapper.scrollTop;
            this.setKeeps(['creatorDetail']);
        } else {
            this.scrollTop = 0;
            this.setKeeps(['creatorDetail'], false);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
/deep/.van-tab {
    margin-right: 26px !important;
}
@bg: #272b2e;
@bg2: #373b3e;
@bg3: #272b2e;
@text0: #fff;
@prim: #43ce00;
.mine {
    background-color: @bg3;
}
.userInfo {
    padding-top: calc(35vw - 50px);
    position: relative;
    background-color: @bg;

    .history {
        position: absolute;
        right: 16px;
        font-size: @font1;
        color: @text3;
        line-height: 24px;
        padding: 0 10px;
        background-color: @bg2;
        border-radius: 13px;
        top: 16px;
        z-index: 2;
        .flex();
        img {
            width: 12px;
            height: 12px;
            margin-right: 3px;
        }
    }

    .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);
    background-color: @bg2;
    margin: 0 16px;
    border-radius: 12px;
    .flex-col();
    .sub {
        font-size: 12px;
        color: @text3;
        line-height: 17px;
        padding: 6px 0 0;
        text-align: center;
    }

    .sub-right {
        .flex();
        justify-content: center;
        margin-top: 3px;
    }

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

    .btns {
        display: flex;
        // padding-bottom: 16px;
        align-items: center;
        // transform: translateY(14px);
        padding: 10px 0 17px;
        justify-content: center;

        /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 1px var(--prim);
            &.followed {
                color: @text3;
                border-color: @text3;
            }
        }
    }
}

.userInfo-top {
    .flex-col();
    align-items: center;
    position: relative;
    // transform: translateX(-5px);
    padding-top: 45px;
    .van-image {
        border: 2px solid #fff;
        flex-shrink: 0;
        background-color: #fff;
        // transform: translateY(-50%);

        &.rank {
            border-color: transparent;
        }
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
    }

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

    .text {
        // margin: 0 40px 0 12px;
        overflow: hidden;
        .flex-col();
        align-items: center;
        .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;
            min-height: 24px;
            img {
                display: block;
                margin-left: 6px;
            }
        }
    }

    .collect {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-end;
        margin-top: 4px;
        .text1 {
            font-size: @font2;
            color: @text0;
            line-height: 24px;
            margin-left: 6px;
        }
        .text2 {
            font-size: @font2;
            color: @text0;
            line-height: 24px;
            white-space: nowrap;
        }
    }
}
.menu {
    display: flex;
    height: 50px;
    align-items: center;
    padding: 12px 16px 0;
    // border-bottom: 1px solid #202122;
    background-color: @bg;
    .menu-item {
        font-size: 14px;
        color: @text3;
        line-height: 24px;
        margin-right: 0px;
        &.active {
            color: var(--prim);
            font-weight: bold;
        }
    }
    .menu-item + .menu-item {
        margin-left: 16px;
    }

    .search {
        .flex();
        background: @bg2;
        border-radius: 16px;
        padding: 0 10px 0 16px;
        span {
            font-size: 12px;
            color: #939599;
            line-height: 24px;
            margin-right: 2px;
        }
        img {
            width: 16px;
            height: 16px;
            display: block;
        }
    }
}
.van-tabs {
    background-color: @bg;
}

.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;
                background: var(--prim);
                &::before {
                    color: #fff;
                }
            }
        }
    }
    .van-checkbox__label {
        color: @text3;
        margin-left: 0px;
        font-size: @font1;
    }
}

.hallList {
    // background: #272b2e;
    padding: 16px;
}
.showInfo {
    background-color: #fff;
    border-radius: 12px;
    /deep/.text {
        .text1 {
            color: #000;
        }
    }
}
.showInfo + .showInfo {
    margin-top: 16px;
}

.dialog-top {
    img {
        width: 64px;
        height: 64px;
        margin-bottom: 10px;
    }
}
</style>
