<template>
    <!-- <div class="mine">
        <div class="userInfo" v-if="isLogin">
            <van-image
                width="100%"
                height="52vw"
                :src="userInfo.bg || require('@assets/creatorBg.png')"
                loading-icon=""
                fit="cover"
                class="top-img"
            />

            <div class="edit-btn" @click="$router.push('/setting')">
                <img src="../assets/icon-bianji1.png" alt="" />
                <span>编辑资料</span>
            </div>
            <div class="userInfo-content">
                <div class="userInfo-top">
                    <van-image
                        round
                        width="150"
                        height="150"
                        :src="userInfo.avatar || require('@assets/img_default_photo.png')"
                        fit="cover"
                        :class="{ activeAvatar: isLogin && userInfo.useCollectionPic }"
                        @click="$router.push('/setting')"
                    />
                    <div class="text">
                        <div class="text1">
                            <span class="van-ellipsis" style="max-width: 120px">{{ userInfo.nickname }}</span>
                        </div>
                        <div class="text2">
                            <span> 用户ID:{{ userInfo.id }} </span>
                            <img @click="copy" src="@assets/svgs/copy_icon.svg" alt="" />
                        </div>
                        <div class="icons" @click="goAuth">
                            <div class="auth-imgs" v-if="authStatus !== '已认证'">
                                <img src="../assets/renzheng_icon.png" alt="" />
                                <span>未实名认证</span>
                            </div>
                            <div class="auth-imgs authed" @click="goAuth" v-else>
                                <img src="../assets/yirenzhng-geren-icon.png" alt="" />
                                <span>个人已认证</span>
                            </div>

                            <level ref="level"></level>
                        </div>
                    </div>
                </div>

                <div class="sub" :class="{ 'van-multi-ellipsis--l2': !showMore }">
                    {{ userInfo.intro }}
                </div>
                <div class="sub-right" v-if="userInfo && userInfo.intro && userInfo.intro.length > 50">
                    <img
                        @click="showMore = !showMore"
                        :class="{ subAll: showMore }"
                        src="../assets/icon-xialajiantou.png"
                        alt=""
                    />
                </div>

                <div class="btns">
                    <div class="collect" @click="$router.push('/store')">
                        <div class="text1">{{ assetNum }}</div>
                        <div class="text2">藏品数</div>
                    </div>
                    <div class="collect" @click="$router.push('/mineFollows')">
                        <div class="text1">{{ userInfo.follows }}</div>
                        <div class="text2">关注</div>
                    </div>
                    <div class="collect" @click="$router.push('/mineFollowers')">
                        <div class="text1">{{ userInfo.followers }}</div>
                        <div class="text2">粉丝</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="userInfo" v-else>
            <van-image
                width="100%"
                height="52vw"
                :src="require('@assets/creatorBg.png')"
                loading-icon=""
                fit="cover"
                class="top-img"
            />
            <div class="userInfo-content">
                <div class="userInfo-top" @click="$router.push('/login')">
                    <van-image
                        round
                        width="150"
                        height="150"
                        :src="require('@assets/img_default_photo.png')"
                        fit="cover"
                        @click="$router.push('/login')"
                    />

                    <div class="text">
                        <div class="text1" @click="$router.push('/login')">点击登录</div>
                        <div class="text2" style="padding-bottom: 16px">立即登录获取精彩服务</div>
                    </div>
                </div>
            </div>

        </div>
        <driver />
        <div class="orderList">
            <div class="order-info" @click="$router.push('/orders?type=DEFAULT')">
                <div class="order-info-box">
                    <img src="@assets/info_icon_yishuping.png" alt="" />
                    <span>艺术品订单</span>
                </div>
            </div>
            <div class="order-info" @click="$router.push('/activityOrders')">
                <img src="@assets/info_icon_zhuzaodingdan.png" alt="" />
                <span>铸造订单</span>
            </div>
        </div>
        <driver />
        <div class="orderList prim">
            <div
                class="order-info"
                :style="{ width: $store.state.review ? '100%' : '50%' }"
                @click="$router.push('/rank')"
            >
                <img src="@assets/info_icon_top50.png" alt="" />
                <span>TOP50&nbsp;探索官</span>
            </div>
            <div class="order-info" @click="share" v-if="!$store.state.review">
                <van-badge :dot="shareProduct.openQuota" :offset="[-15, 5]">
                    <img src="@assets/info_icon_yaoqing.png" alt="" />
                </van-badge>
                <span>立即邀请</span>
            </div>
        </div>
        <van-grid class="menus">
            <van-grid-item text="我的银行卡" :to="{ path: '/mineBanks' }">
                <template #icon>
                    <van-icon :name="require('@assets/icon_yinhangka.png')" class="search-icon" />
                </template>
            </van-grid-item>
            <van-grid-item text="我的积分" @click="wait" v-if="!$store.state.review">
                <template #icon>
                    <van-icon :name="require('@assets/icon-jifen.png')" class="search-icon" />
                </template>
            </van-grid-item>
            <van-grid-item text="我喜欢的" :to="{ path: '/mineLikes' }">
                <template #icon>
                    <van-icon :name="require('@assets/icon-dianzan1.png')" class="search-icon" />
                </template>
            </van-grid-item>
            <van-grid-item text="通知广播" @click="wait" v-if="!$store.state.review">
                <template #icon>
                    <van-icon :name="require('@assets/icon_tongzhi.png')" class="search-icon" />
                </template>
            </van-grid-item>
            <van-grid-item text="交易历史" :to="{ path: '/mineExchange' }">
                <template #icon>
                    <van-icon :name="require('@assets/info_icon_jiaoyijilu.png')" class="search-icon" />
                </template>
            </van-grid-item>
            <van-grid-item text="地址管理" :to="{ path: '/mineAddress' }">
                <template #icon>
                    <van-icon :name="require('@assets/icon_dizhi.png')" class="search-icon" />
                </template>
            </van-grid-item>
            <van-grid-item text="关于我们" :to="{ path: '/about' }">
                <template #icon>
                    <van-icon :name="require('@assets/icon-guanyuwomen.png')" class="search-icon" />
                </template>
            </van-grid-item>
            <van-grid-item text="账号与安全" :to="{ path: '/security' }">
                <template #icon>
                    <van-icon :name="require('@assets/icon-anquan.png')" class="search-icon" />
                </template>
            </van-grid-item>
        </van-grid>

        <div class="tabbar-placeholder"></div>
        <post ref="post" :info="shareProduct" noButton></post>
    </div> -->
    <!-- 我的内容区 -->
    <div class="content">
        <van-image width="100%" height="120px" radius="1" :src="isLogin ? userInfo.bg || require('@assets/bg.png'): require('@assets/bg.png')" fit="cover" style="position:relative"/>
        <!-- <van-image width="100%" height="120px" :src="isLogin?getImg(userInfo.bg):noLogin" fit="cover" class="backgroundImg"/> -->
        <div class="share-btn" @click="share" v-if="isLogin">
            <img src="../assets/fenxiang-icon@3x.png" alt="" />
            <span>分享</span>
        </div>
        <div class="content_con">
            <!-- 已登录 -->
            <div class="self_introduction" v-if="isLogin">
                <div class="self_introduction_top">
                    <van-image width="60px" height="60px" radius="40" :src="userInfo.avatar || require('@assets/img_default_photo.png')" fit="cover" style="margin-right: 10px" @click="$router.push('/setting')"/>
                    <img
                        :src="require('@assets/icon_inter.png')"
                        alt=""
                        class="self_introduction_top_arrow"
                        @click="$router.push('/setting')"
                    />
                    <div class="self_introduction_top_con">
                        <div class="self_introduction_top_con_one">
                            <div class="self_introduction_name">{{ userInfo.nickname }}</div>
                            <div
                                class="self_introduction_authentication"
                                v-if="authStatus !== '已认证'"
                                @click="goAuth"
                            >
                                <img
                                    :src="require('@assets/weirenzheng-icon.png')"
                                    alt=""
                                    class="self_introduction_authentication_img"
                                />
                                <div class="self_introduction_authentication_text">去认证</div>
                            </div>
                            <img
                                :src="require('@assets/yirenzheng-icon.png')"
                                alt=""
                                v-else
                                class="authentication_img"
                                @click="goAuth"
                            />
                        </div>
                        <div class="self_introduction_top_con_two">
                            <div class="self_introduction_top_con_id">用户ID:{{ userInfo.id }}</div>
                            <img :src="require('@assets/copy_icon.png')" alt="" class="copy_id" @click="copy"/>
                        </div>
                    </div>
                </div>
                <div class="self_introduction_bottom" :style="userInfo.intro === ''?'':'margin-top: 6px'">{{ userInfo.intro }}</div>
            </div>
            <!-- 未登录 -->
            <div class="not_logged" v-else @click="$router.push('/login')">
                <div class="not_logged_con">
                    <img :src="require('@assets/png-moren-touxiang.png')" alt="" class="not_logged_touxiang" />
                    <div class="not_logged_con_content">
                        <div>
                            <div class="not_logged_text">
                                <span @click="$router.push('/login')">登录</span>&nbsp;/&nbsp;<span
                                    @click="$router.push('/login')"
                                    >注册</span
                                >
                            </div>
                            <div class="not_logged_tip">立即登录获取精彩服务</div>
                        </div>
                        <img :src="require('@assets/icon_inter.png')" alt="" class="not_logged_img" />
                    </div>
                </div>
            </div>
            <!-- 展示列表 -->
            <div class="display_list">
                <div class="display_list_con" @click="$router.push('/orders')">
                    <div class="display_list_con_one">
                        <img :src="require('@assets/my-order.png')" alt="" class="display_list_con_displayIcon" />
                        <div class="display_list_con_title">我的订单</div>
                    </div>
                    <div class="display_list_con_two">
                        <img :src="require('@assets/icon_inter.png')" alt="" class="display_list_con_listArrow" />
                    </div>
                </div>
                <div class="display_list_con" @click="$router.push('/mineBanks')">
                    <div class="display_list_con_one">
                        <img :src="require('@assets/icon-yinhangka.png')" alt="" class="display_list_con_displayIcon" />
                        <div class="display_list_con_title">我的银行卡</div>
                    </div>
                    <div class="display_list_con_two">
                        <div class="binding_information" v-if="isLogin">{{userInfo.isUserBankCard?'已绑定':'未绑定'}}</div>
                        <img :src="require('@assets/icon_inter.png')" alt="" class="display_list_con_listArrow" />
                    </div>
                </div>
                <div class="display_list_con" @click="$router.push('/mineLove')">
                    <div class="display_list_con_one">
                        <img :src="require('@assets/my-love.png')" alt="" class="display_list_con_displayIcon" />
                        <div class="display_list_con_title">我喜欢的</div>
                    </div>
                    <div class="display_list_con_two">
                        <img :src="require('@assets/icon_inter.png')" alt="" class="display_list_con_listArrow" />
                    </div>
                </div>
                <div class="display_list_con" @click="$router.push('/mineExchange')">
                    <div class="display_list_con_one">
                        <img :src="require('@assets/transaction-record.png')" alt="" class="display_list_con_displayIcon" />
                        <div class="display_list_con_title">交易记录</div>
                    </div>
                    <div class="display_list_con_two">
                        <img :src="require('@assets/icon_inter.png')" alt="" class="display_list_con_listArrow" />
                    </div>
                </div>
                <div class="display_list_con" @click="this.wait">
                    <div class="display_list_con_one">
                        <img :src="require('@assets/learn-more.png')" alt="" class="display_list_con_displayIcon" />
                        <div class="display_list_con_title">了解更多</div>
                    </div>
                    <div class="display_list_con_two">
                        <img :src="require('@assets/icon_inter.png')" alt="" class="display_list_con_listArrow" />
                    </div>
                </div>
                <div class="display_list_con" @click="this.wait">
                    <div class="display_list_con_one">
                        <img :src="require('@assets/about-us.png')" alt="" class="display_list_con_displayIcon" />
                        <div class="display_list_con_title">关于我们</div>
                    </div>
                    <div class="display_list_con_two">
                        <img :src="require('@assets/icon_inter.png')" alt="" class="display_list_con_listArrow" />
                    </div>
                </div>
                <div class="display_list_con" @click="$router.push('/security')">
                    <div class="display_list_con_one">
                        <img :src="require('@assets/account-security.png')" alt="" class="display_list_con_displayIcon" />
                        <div class="display_list_con_title">账号与安全</div>
                    </div>
                    <div class="display_list_con_two">
                        <img :src="require('@assets/icon_inter.png')" alt="" class="display_list_con_listArrow" />
                    </div>
                </div>
            </div>
        </div>
        <user-share ref="userShare" v-if="isLogin"></user-share>
    </div>
</template>

<script>
// import Level from '../components/level/Level.vue';
// import Post from '../components/Post.vue';
// import TopNavigation from "../components/TopNavigation.vue";
import { mapState } from 'vuex';
import UserShare from '../components/UserShare.vue';
export default {
    components: {
        UserShare
        // Level,
        // Post
    },
    computed: {
        ...mapState(['userInfo'])
    },
    data() {
        return {
            // authentication: false,
            // userInfo: {},
            // displayList: [
            //     {
            //         displayIcon: require('@assets/my-order.png'),
            //         bindingInformation: '',
            //         title: '我的订单',
            //         listArrow: require('@assets/icon_inter.png')
            //     },
            //     {
            //         displayIcon: require('@assets/icon-yinhangka.png'),
            //         title: '我的银行卡',
            //         listArrow: require('@assets/icon_inter.png')
            //     },
            //     {
            //         displayIcon: require('@assets/my-love.png'),
            //         bindingInformation: '',
            //         title: '我喜欢的',
            //         listArrow: require('@assets/icon_inter.png')
            //     },
            //     {
            //         displayIcon: require('@assets/transaction-record.png'),
            //         bindingInformation: '',
            //         title: '交易记录',
            //         listArrow: require('@assets/icon_inter.png')
            //     },
            //     // {
            //     //     displayIcon: require('@assets/learn-more.png'),
            //     //     bindingInformation: '',
            //     //     title: '了解更多',
            //     //     listArrow: require('@assets/icon_inter.png')
            //     // },
            //     // {
            //     //     displayIcon: require('@assets/about-us.png'),
            //     //     bindingInformation: '',
            //     //     title: '关于我们',
            //     //     listArrow: require('@assets/icon_inter.png')
            //     // },
            //     {
            //         displayIcon: require('@assets/account-security.png'),
            //         bindingInformation: '',
            //         title: '账号与安全',
            //         listArrow: require('@assets/icon_inter.png')
            //     }
            // ],
            org: false,
            showMore: false,
            assetNum: 0,
            shareProduct: {
                openQuota: false
            },
            shareMoney: 0,
            height: ""
        };
    },
    mounted() {
        this.$store.dispatch('getUserInfo');
        if (this.isLogin) {
            this.$http
                .post(
                    '/identityAuth/all',
                    {
                        query: {
                            userId: this.$store.state.userInfo.id
                        }
                    },
                    { body: 'json' }
                )
                .then(res => {
                    if (!res.empty) {
                        this.form = res.content[0];
                        this.org = this.form.org;
                    }
                });

            this.$http
                .post(
                    '/asset/all',
                    {
                        query: {
                            page: 0,
                            size: 1,
                            userId: this.$store.state.userInfo.id,
                            status: 'NORMAL,TRADING,GIFTING,MINTING'
                        }
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.assetNum = Number(res.totalElements);
                });

            // this.getProduct();
            // this.$http.get('/sysConfig/get/share_lvzhoushi_num').then(res => {
            //     if (res.value) {
            //         this.shareMoney = Number(res.value);
            //     }
            // });
        }
        if (window.cordova && StatusBar && StatusBar.isVisible) {
            StatusBar.backgroundColorByHexString('#222426');
            StatusBar.styleLightContent();
        }
        // let topHeight = this.$refs.top.offsetHeight // 获取高度
        // console.log("111111111",this.$refs.top)
        // this.height = topHeight
        // this.$nextTick(() => {
        //     this.$el.parentNode.childNodes[1].className =
        //         this.$el.parentNode.childNodes[1].className.replace(/ bgBack/, '') + ' bgBack';
        // });
    },
    methods: {
        // 复制
        copy() {
            this.$copyText(this.userInfo.id).then(
                e => {
                    this.$toast.success('复制成功');
                    console.log(e);
                },
                e => {
                    this.$toast('复制失败');
                    console.log(e);
                }
            );
        },
        goAuth() {
            if (this.authStatus === '认证中' || this.authStatus === '认证失败') {
                this.$router.push('/waiting');
            } else if (this.authStatus === '未认证') {
                this.$router.push('/verified');
            }
        },
        getProduct() {
            return this.$http
                .get('/sysConfig/get/share_collection_id')
                .then(res => {
                    if (res.value) {
                        return this.$http.get('collection/get/' + res.value);
                    } else {
                        return Promise.reject('活动未开始');
                    }
                })
                .catch(e => {
                    return Promise.reject('活动未开始');
                })
                .then(res => {
                    this.shareProduct = res;
                    return Promise.resolve();
                });
        },
        share() {
            this.$refs.userShare.share();
        },
        // 点击列表信息跳转
        // clickList(index) {
        //     switch (index) {
        //         case 0:
        //             this.$router.push('/orders');
        //             break;
        //         case 1:
        //             this.$router.push('/mineBanksAdd');
        //             break;
        //         case 2:
        //             this.$router.push('/mineLove');
        //             break;
        //         case 3:
        //             this.$router.push('/mineExchange');
        //             break;
        //         // case 4:
        //         //     this.wait()
        //         //     break;
        //         // case 5:
        //         //     this.wait()
        //         //     break;
        //         default:
        //             this.$router.push('/security');
        //     }
        // }
    }
    // beforeRouteLeave(to, from, next) {
    //     this.$el.parentNode.childNodes[1].className = this.$el.parentNode.childNodes[1].className.replace(
    //         / bgBack/,
    //         ''
    //     );
    //     next();
    // }
};
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: calc(100vh);
    // position: absolute;
    // margin-top: 44px;
    background: #0f0f27;
    position: relative;
    .backgroundImg {
        width: 100%;
        height: 120px;
        border-radius: 1px;
    }
    .authentication_img {
        margin-top: 2px;
        width: 18px;
        height: 18px;
    }
    .content_con {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        // background: #0f0f27;
        // position: absolute;
        // left: 0;
        // top: 80px;
        // z-index: 2;
        transform: translateY(-42px);
        .not_logged {
            // width: 100%;
            // height: 80px;
            background: #29293f;
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 10px;
            // position: absolute;
            // left: 10px;
            // right: 10px;
            // top: -35px;
            box-sizing: border-box;
            // position: relative;
            .not_logged_con {
                display: flex;
                .not_logged_touxiang {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    margin-right: 10px;
                }
                .not_logged_con_content {
                    // position: relative;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    padding-top: 10px;
                    box-sizing: border-box;
                    .not_logged_text {
                        font-size: 16px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #ffffff;
                        line-height: 24px;
                        margin-bottom: 2px;
                    }
                    .not_logged_tip {
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #949699;
                        line-height: 17px;
                    }
                    .not_logged_img {
                        width: 24px;
                        height: 24px;
                        margin-top: 8px;
                    }
                }
            }
        }
    }
    .self_introduction {
        // width: 100%;
        // height: 130px;
        background: #29293f;
        margin-bottom: 10px;
        border-radius: 8px;
        padding: 10px;
        box-sizing: border-box;
        .self_introduction_top {
            position: relative;
            // margin-bottom: 6px;
            display: flex;
            .self_introduction_top_img {
                width: 60px;
                height: 60px;
                border-radius: 40px;
                margin-right: 10px;
            }
            .self_introduction_top_arrow {
                width: 24px;
                height: 24px;
                position: absolute;
                top: 18px;
                right: 5px;
            }
            .self_introduction_top_con {
                padding: 10px 0;
                box-sizing: border-box;
                .self_introduction_top_con_one {
                    display: flex;
                    // padding-left: 8px;
                    box-sizing: border-box;
                    .self_introduction_name {
                        font-size: 16px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #ffffff;
                        line-height: 24px;
                        margin-right: 6px;
                    }
                    .self_introduction_authentication {
                        width: 74px;
                        height: 18px;
                        background-color: rgba(255, 255, 255, 0.1);
                        border-radius: 16px;
                        padding: 0px 8px;
                        box-sizing: border-box;
                        display: flex;
                        margin-top: 3px;
                        .self_introduction_authentication_img{
                            width: 18px;
                            height: 18px;
                        }
                        .self_introduction_authentication_text{
                            margin-left: 2px;
                            padding: 4px 0px;
                            box-sizing: border-box;
                            font-size: 10px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #C8C9CC;
                            line-height: 10px;
                        }
                    }
                }
            }
            .self_introduction_top_con_two {
                margin-top: 5px;
                display: flex;
                .self_introduction_top_con_id {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #949699;
                }
                .copy_id {
                    width: 18px;
                    height: 18px;
                    margin-left: 4px;
                }
            }
        }
    }
    .self_introduction_bottom {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #939599;
        line-height: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}
.display_list {
    width: 100%;
    padding-bottom: 50px;
    box-sizing: border-box;
    .display_list_con {
        width: 100%;
        height: 52px;
        background: #29293f;
        border-radius: 8px;
        padding: 12px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .display_list_con_one {
            display: flex;
        }
        .display_list_con_displayIcon {
            width: 28px;
            height: 28px;
            margin-right: 10px;
        }
        .display_list_con_title {
            padding-top: 6px;
            box-sizing: border-box;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
        }
        .display_list_con_listArrow {
            width: 28px;
            height: 28px;
        }
        .display_list_con_two {
            display: flex;
            .binding_information {
                font-size: 12px;
                padding-top: 5px;
                box-sizing: border-box;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #5f646f;
            }
        }
    }
}

.share-btn {
    .flex();
    img {
        width: 18px;
        height: 18px;
    }
    span {
        font-size: 12px;
        color: #ffffff;
        line-height: 24px;
    }
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    padding: 0 10px;
}
</style>
