<template>
    <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" @click="$router.push('/setting')">
                <div class="self_introduction_top">
                    <van-image
                        width="64px"
                        height="64px"
                        radius="40"
                        :src="userInfo.avatar || require('@assets/png-moren-touxiang.png')"
                        fit="cover"
                        style="margin-right: 10px;"
                    />
                    <!-- <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>
                            <img
                                class="self_introduction_authentication"
                                v-if="authStatus != '已认证'"
                                @click.stop="goAuth"
                                :src="require('@assets/weirenzheng-icon.png')"
                                alt=""
                            />

                            <img
                                :src="require('@assets/yirenzheng-icon.png')"
                                alt=""
                                v-else
                                class="authentication_img"
                                @click.stop="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.stop="copy" />
                        </div>
                    </div>
                </div>
                <!-- <div class="self_introduction_bottom" :style="userInfo.intro === '' ? '' : 'margin-top: 6px'">
                    {{ userInfo.intro }}
                </div> -->

                <!-- <img src="@assets/ring.png" @click.stop="wait" class="ring" alt="" /> -->
            </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="user-list" v-if="isLogin">
                <div class="user-text" @click="$router.push('/store')">藏品数 {{ assetNum }}</div>
                <div class="user-text" @click="$router.push('/mineFollows')">关注数 {{ userInfo.follows }}</div>
                <div class="user-text" @click="$router.push('/mineFollows?pageType=follower')">
                    粉丝数 {{ userInfo.followers }}
                </div>
            </div>
            <div class="order-card">
                <div class="order-info" @click="$router.push('/orders')">
                    <img src="@assets/menu1.png" alt="" />
                    <div class="text1">我的订单</div>
                </div>
                <div class="order-info" @click="$router.push('/mineExchange')">
                    <img src="@assets/collection-records@3x.png" alt="" />
                    <div class="text1">藏品记录</div>
                </div>
                <div class="order-info" @click="$router.push('/mineBanks')">
                    <img src="@assets/menu3.png" alt="" />
                    <div class="text1">我的银行卡</div>
                </div>
            </div>
            <!-- 展示列表 -->
            <div class="display_list">
                <div class="display_list_con" @click="$router.push('/setting')">
                    <div class="display_list_con_one">
                        <img :src="require('@assets/icon1.png')" alt="" class="display_list_con_displayIcon" />
                        <div class="display_list_con_title">账户与安全</div>
                    </div>
                </div>
                <div class="display_list_con" @click="$router.push('/connect')">
                    <div class="display_list_con_one">
                        <img :src="require('@assets/icon2.png')" alt="" class="display_list_con_displayIcon" />
                        <div class="display_list_con_title">联系我们</div>
                    </div>
                </div>
                <div class="display_list_con" @click="$router.push('/about')">
                    <div class="display_list_con_one">
                        <img :src="require('@assets/icon4.png')" alt="" class="display_list_con_displayIcon" />
                        <div class="display_list_con_title">关于我们</div>
                    </div>
                </div>
                <!-- <div class="display_list_con" @click="wait">
                    <div class="display_list_con_one">
                        <img :src="require('@assets/share.png')" alt="" class="display_list_con_displayIcon" />
                        <div class="display_list_con_title">分享传奇数藏</div>
                    </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() {
        // location.reload()
        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('#201B15');
            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%;
    min-height: calc(var(--app-height));
    // position: absolute;
    // margin-top: 44px;
    background: @bg;
    position: relative;
    .backgroundImg {
        width: 100%;
        height: 120px;
        border-radius: 1px;
    }
    .authentication_img {
        // margin-top: 5px;
        width: 18px;
        height: 18px;
    }
    .content_con {
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        // background: @bg;
        // 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;
            padding: 36px 0 30px;
            box-sizing: border-box;
            // position: relative;
            .not_logged_con {
                display: flex;
                align-items: center;
                .not_logged_touxiang {
                    width: 64px;
                    height: 64px;
                    border-radius: 50%;
                    margin-right: 10px;
                    flex-shrink: 0;
                }
                .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: 20px;
                        font-weight: bold;
                        color: #ffffff;
                        line-height: 28px;
                        margin-bottom: 6px;
                    }
                    .not_logged_tip {
                        font-size: 13px;
                        color: #ffffff;
                        line-height: 18px;
                        opacity: 0.5;
                    }
                    .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: 36px 0 20px;
        box-sizing: border-box;
        position: relative;
        .self_introduction_top {
            position: relative;
            // margin-bottom: 6px;
            display: flex;
            align-items: center;
            .van-image {
                display: block;
            }
            .self_introduction_top_img {
                width: 64px;
                height: 64px;
                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;
                    align-items: center;
                    .self_introduction_name {
                        font-size: 20px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #ffffff;
                        line-height: 28px;
                        margin-right: 6px;
                    }
                    .self_introduction_authentication {
                        // margin-top: 5px;
                        width: 85px;
                        height: 20px;
                    }
                }
            }
            .self_introduction_top_con_two {
                margin-top: 5px;
                display: flex;
                align-items: center;
                .self_introduction_top_con_id {
                    font-size: 13px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #949699;
                }
                .copy_id {
                    width: 18px;
                    height: 18px;
                    margin-left: 4px;
                }
            }
        }

        .ring {
            position: absolute;
            top: 16px;
            right: 0;
            width: 32px;
            height: 32px;
        }
    }
    .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%;
    margin-bottom: 80px;
    box-sizing: border-box;
    .display_list_con {
        height: 60px;
        background: @bg2;
        border-radius: 12px;
        padding: 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        .display_list_con_one {
            display: flex;
            align-items: center;
        }
        .display_list_con_displayIcon {
            width: 28px;
            height: 28px;
            margin-right: 10px;
        }
        .display_list_con_title {
            font-size: 16px;
            color: #ffffff;
            line-height: 22px;
        }
        .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;
}

.order-card {
    .flex();
    background-color: @bg2;
    margin-bottom: 15px;
    border-radius: 12px;
    .order-info {
        width: 33.33%;
        padding: 16px 0;
        .flex-col();
        align-items: center;
        img {
            width: 33px;
            display: block;
        }

        .text1 {
            font-size: 13px;
            color: #ffffff;
            line-height: 18px;
            margin-top: 6px;
        }
    }
}

.user-list {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    .flex();
    height: 48px;
    font-size: 13px;
    color: #ffffff;
    opacity: 0.3;
    line-height: 18px;
    // padding: 0 16px;
    .user-text {
        width: 33%;
        text-align: center;
    }
}
</style>
