<template>
    <div class="mine">
        <div class="userInfo" v-if="isLogin">
            <van-image width="100%" height="35vw" :src="userInfo.bg" 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">{{ userInfo.nickname }}</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">
                    {{ userInfo.intro }}
                </div>

                <div class="btns">
                    <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>
                    <van-button
                        plain
                        color="@text3"
                        size="mini"
                        :icon="require('../assets/renzheng_icon_pre.png')"
                        round
                        @click="$router.push('/verifiedSuc')"
                        v-if="authStatus === '已认证'"
                        class="verid"
                    >
                        {{ authStatus }}
                    </van-button>
                    <van-button
                        plain
                        color="@text3"
                        size="mini"
                        :icon="require('../assets/renzheng_icon.png')"
                        round
                        v-else
                        @click="goAuth"
                    >
                        {{ authStatus }}
                    </van-button>
                    <van-button plain @click="$router.push('/setting')" color="@text3" size="mini" round
                        >编辑资料</van-button
                    >
                </div>
            </div>
        </div>
        <div class="top" v-else>
            <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" is-link value="查看全部" :to="{ path: '/orders' }" />
        <van-grid column-num="3" :border="false" :gutter="10">
            <van-grid-item text="全部订单" :border="false" :to="{ path: '/orders' }">
                <template v-slot:icon>
                    <img class="grid-img" src="../assets/svgs/info_icon_dingdan.svg" />
                </template>
            </van-grid-item>
            <!-- <van-grid-item text="待支付" :border="false">
        <template v-slot:icon>
          <img class="grid-img" src="../assets/svgs/info_icon_daizhifu.svg" />
        </template>
      </van-grid-item> -->
            <van-grid-item
                text="交易中"
                :border="false"
                :to="{
                    path: '/orders',
                    query: {
                        type: 'PROCESSING'
                    }
                }"
            >
                <template v-slot:icon>
                    <img class="grid-img" src="../assets/svgs/info_icon_dingdan_daishouhuo.svg" />
                </template>
            </van-grid-item>
            <van-grid-item
                text="已完成"
                :to="{
                    path: '/orders',
                    query: {
                        type: 'FINISH'
                    }
                }"
                :border="false"
            >
                <template v-slot:icon>
                    <img class="grid-img" src="../assets/svgs/info_icon_yiwancheng.svg" />
                </template>
            </van-grid-item>
        </van-grid>

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

        <van-cell-group :border="false" class="menu">
            <van-cell title="钱包" is-link :to="{ path: '/mineWallet' }">
                <template #icon>
                    <van-icon :name="require('../assets/icon-qiabao.png')" class="search-icon" />
                </template>
            </van-cell>

            <van-cell title="积分" is-link :to="{ path: '/minePoint' }">
                <template #icon>
                    <van-icon :name="require('../assets/icon-jifen.png')" class="search-icon" />
                </template>
            </van-cell>
            <van-cell title="我赞过的" :to="{ path: '/mineLikes' }" is-link>
                <template #icon>
                    <van-icon :name="require('../assets/dislike.png')" class="search-icon" />
                </template>
            </van-cell>
            <van-cell title="地址管理" is-link @click="wait">
                <template #icon>
                    <van-icon :name="require('../assets/icon_dizhi.png')" class="search-icon" />
                </template>
            </van-cell>
            <van-cell title="了解更多" is-link @click="wait">
                <template #icon>
                    <van-icon :name="require('../assets/icon_liaojiegengduo.png')" class="search-icon" />
                </template>
            </van-cell>
            <van-cell title="关于我们" is-link :to="{ path: '/about' }">
                <template #icon>
                    <van-icon :name="require('../assets/icon-guanyuwomen.png')" class="search-icon" />
                </template>
            </van-cell>
            <van-cell title="账号与安全" is-link :to="{ path: '/security' }">
                <template #icon>
                    <van-icon :name="require('../assets/icon-anquan.png')" class="search-icon" />
                </template>
            </van-cell>
        </van-cell-group>

        <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: @bg2;
}
.top {
    display: flex;
    align-items: center;
    padding: 26px 16px 30px;
    border-bottom: 5px solid @bg3;

    .text {
        margin-left: 12px;

        .text1 {
            font-size: 24px;
            font-weight: bold;
            color: #ffffff;
            line-height: 34px;
        }

        .text2 {
            font-size: 16px;
            color: #949699;
            line-height: 24px;
            margin-top: 6px;
        }
    }
}

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

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

    .van-icon {
        line-height: 28px;
    }
}

.grid-img {
    display: block;
}

/deep/ .van-grid-item {
    .van-grid-item__text {
        font-size: 13px;
        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: 5px solid @bg3;
    position: relative;

    .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(-8px);
    .sub {
        font-size: 14px;
        color: @text3;
        line-height: 22px;
        padding: 16px 0;
    }

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

        /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;
    .van-image {
        border: 5px solid @bg;
        flex-shrink: 0;
    }

    .text {
        margin: 0 40px 0 12px;
        overflow: hidden;
        .text1 {
            font-size: 24px;
            font-weight: bold;
            color: #ffffff;
            line-height: 34px;
        }
        .text2 {
            font-size: 16px;
            color: #949699;
            line-height: 24px;
            display: flex;
            align-items: center;
            margin-top: 6px;
            img {
                display: block;
                margin-left: 6px;
            }
        }
    }
}
</style>
