<template>
    <div class="mine">
        <div class="userInfo" v-if="isLogin">
            <van-image
                width="100%"
                height="35vw"
                :src="userInfo.bg || require('../assets/creatorBg.png')"
                loading-icon=""
                fit="cover"
                class="top-img"
            />
            <div class="userInfo-content">
                <div class="userInfo-top">
                    <van-image
                        round
                        width="78"
                        height="78"
                        :src="userInfo.avatar || require('../assets/img_default_photo.png')"
                        fit="cover"
                        @click="$router.push('/setting')"
                    />
                    <div class="text">
                        <div class="text1 van-ellipsis">
                            <span>{{ userInfo.nickname }}</span>

                            <img
                                @click="$router.push('/verifiedSuc')"
                                v-if="authStatus === '已认证'"
                                src="../assets/renzheng_icon_pre.png"
                                alt=""
                            />
                        </div>
                        <div class="text2">
                            <span>
                                <small>平台编码:</small>
                                {{ userInfo.id }}
                            </span>
                            <img @click="copy" src="../assets/svgs/copy_icon.svg" alt="" />
                        </div>
                    </div>
                </div>

                <div class="sub van-multi-ellipsis--l2">
                    {{ userInfo.intro }}
                </div>

                <div class="btns">
                    <div class="collect" @click="$router.push('/mineFollows')">
                        <div class="text2">关注</div>
                        <div class="text1">{{ userInfo.follows }}</div>
                    </div>
                    <div class="collect" @click="$router.push('/mineFollowers')">
                        <div class="text2">粉丝</div>
                        <div class="text1">{{ userInfo.followers }}</div>
                    </div>
                    <van-button
                        plain
                        color="#939599"
                        size="mini"
                        :icon="require('../assets/renzheng_icon.png')"
                        round
                        v-if="authStatus !== '已认证'"
                        @click="goAuth"
                    >
                        {{ authStatus }}
                    </van-button>
                    <van-button plain @click="$router.push('/setting')" color="#939599" size="mini" round
                        >编辑资料</van-button
                    >
                </div>
            </div>
        </div>
        <div class="top" v-else>
            <img src="../assets/creatorBg.png" alt="" class="top-bg" />
            <van-image
                round
                width="78"
                height="78"
                :src="require('../assets/svgs/img_default_photo.svg')"
                fit="cover"
                @click="$router.push('/login')"
            />

            <div class="text">
                <div class="text1" @click="$router.push('/login')">点击登录</div>
                <div class="text2">立即登录获取精彩服务</div>
            </div>
        </div>
        <van-cell class="title" title="我的订单" :border="false" />

        <div class="orderList">
            <div class="order-info" @click="$router.push('/orders?type=DEFAULT')">
                <img src="../assets/info_icon_shangpindingdan.png" alt="" />
                <span>商品订单</span>
            </div>
            <div class="order-info" @click="wait">
                <img src="../assets/info_icon_zhuzaodingdan.png" alt="" />
                <span>铸造订单</span>
            </div>
        </div>

        <van-cell class="title" title="我的服务" :border="false" />

        <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="我的积分" :to="{ path: '/minePoint' }">
                <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">
                <template #icon>
                    <van-icon :name="require('../assets/icon_dizhi.png')" class="search-icon" />
                </template>
            </van-grid-item>
            <van-grid-item text="交易历史" @click="wait">
                <template #icon>
                    <van-icon :name="require('../assets/info_icon_jiaoyijilu.png')" class="search-icon" />
                </template>
            </van-grid-item>
            <van-grid-item text="了解更多" @click="wait">
                <template #icon>
                    <van-icon :name="require('../assets/icon_liaojiegengduo.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>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            org: false
        };
    },
    computed: {
        ...mapState(['userInfo'])
    },
    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;
                        console.log(this.org);
                    }
                });
        }
    },
    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('/Authentication');
            }
        }
    }
};
</script>

<style lang="less" scoped>
.mine {
    padding-bottom: 100px;
    background-color: @bg3;
}
.top {
    display: flex;
    align-items: center;
    padding: 26px 16px 30px;
    border-bottom: 1px solid @bg2;
    position: relative;

    .text {
        margin-left: 12px;
        position: relative;
        z-index: 2;

        .text1 {
            font-size: @font3;
            font-weight: bold;
            color: #ffffff;
            line-height: 24px;
            img {
                width: 18px;
                height: 18px;
                display: inline-block;
                margin-left: 6px;
            }
        }

        .text2 {
            font-size: @font2;
            color: #949699;
            line-height: 24px;
        }
    }

    .top-bg {
        position: absolute;
        top: -83px;
        left: 0;
        right: 0;
        width: 100%;
        display: block;
        height: auto;
        z-index: 0;
    }
}

/deep/ .title {
    padding: 20px 16px 10px;
    .van-cell__title {
        span {
            font-size: @font3;
            line-height: 28px;
        }
    }

    .van-cell__value {
        span {
            font-size: @font1;
            line-height: 28px;
        }
    }

    .van-icon {
        line-height: 28px;
    }
}
.orderList {
    .flex();
    padding: 0 16px;
    .order-info {
        padding: 20px 0;
        .flex();
        background-color: @bg;
        flex-grow: 1;
        justify-content: center;
        border-radius: 8px;
        img {
            width: 32px;
            height: 32px;
            margin-right: 12px;
        }
        span {
            font-size: @font2;
            color: #ffffff;
            line-height: 24px;
        }

        &:active {
            background-color: @bg2;
        }
    }
    .order-info + .order-info {
        margin-left: 20px;
    }
}
.grid-img {
    display: block;
}

/deep/ .van-grid-item {
    .van-grid-item__text {
        font-size: @font1;
        color: #ffffff;
        line-height: 18px;
        margin-top: 4px;
    }
}

/deep/.menu {
    .van-cell {
        padding: 22px 20px 24px;

        &::after {
            left: 52px;
            right: 16px;
        }
    }

    .van-cell__title {
        span {
            font-weight: bold;
        }
    }
}

.search-icon {
    width: 24px;
    height: 24px;
    // margin-right: 10px;
    /deep/.van-icon__image {
        width: 24px;
        height: 24px;
        display: block;
    }
}
.userInfo {
    padding-top: 35vw;
    border-bottom: 1px solid @bg2;
    position: relative;

    .top-img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
}
.userInfo-content {
    padding: 0 16px;
    z-index: 2;
    position: relative;
    transform: translateY(-8px);
    .sub {
        font-size: 14px;
        color: @text3;
        line-height: 22px;
        padding: 9px 0 20px;
    }

    .btns {
        display: flex;
        // padding-bottom: 16px;
        align-items: center;
        .collect {
            .flex();
            .text1 {
                font-size: @font2;
                color: #ffffff;
                line-height: 24px;
                margin-left: 6px;
            }
            .text2 {
                font-size: @font2;
                color: @text3;
                line-height: 24px;
            }
            &:nth-child(2) {
                flex-grow: 1;
                margin: 0 22px;
            }
        }

        /deep/.van-button {
            width: 90px;
            .van-icon__image {
                display: block;
                width: 18px;
                height: 18px;
            }
            color: #fff !important;
        }
        .van-button + .van-button {
            margin-left: 10px;
        }

        .verid {
            /deep/ span {
                color: #d8d8d8;
                line-height: 24px;
                background: linear-gradient(45deg, #fdfb60 0%, #ff8f3e 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
    }
}
.userInfo-top {
    display: flex;
    align-items: center;
    transform: translateX(-5px);
    .van-image {
        border: 5px solid @bg;
        flex-shrink: 0;
    }

    .text {
        margin: 0 40px 0 12px;
        overflow: hidden;
        .text1 {
            font-size: @font3;
            font-weight: bold;
            color: #ffffff;
            line-height: 24px;
            .flex();
            img {
                width: 18px;
                height: 18px;
                display: inline-block;
                margin-left: 5px;
                vertical-align: middle;
            }
        }
        .text2 {
            font-size: @font2;
            color: #949699;
            line-height: 24px;
            display: flex;
            align-items: center;
            margin-top: 6px;
            img {
                display: block;
                margin-left: 6px;
            }
        }
    }
}
.menus {
    margin: 0 16px;
    background-color: @bg;
    border-radius: 8px;
    overflow: hidden;
}
</style>
