<template>
    <div class="mine">
        <div class="top-img">
            <img src="@assets/userBg.png" alt="" />
        </div>
        <div :style="{ paddingTop: safeTopNum ? `calc(${safeTopNum}px + 32px)` : '64px' }">
            <div class="user-info" v-if="isLogin" @click="$router.push('/setting')">
                <van-image
                    width="58"
                    height="58"
                    radius="4"
                    :src="userInfo.avatar || require('@assets/img_default_photo.png')"
                    fit="cover"
                />
                <div class="user-text">
                    <div class="text1">
                        <div class="name">{{ userInfo.nickname }}</div>
                        <!-- <div class="auth not" @click.stop="goAuth">
                            <img src="@assets/renzheng_icon.png" alt="" />
                            <span>未实名认证</span>
                        </div> -->
                    </div>
                    <div class="text2">ID:{{ userInfo.id }}</div>
                </div>
                <img src="@assets/icon_inter.png" class="icon" alt="" />
            </div>
            <div class="user-info" v-else @click="$router.push('/login')">
                <van-image
                    width="58"
                    height="58"
                    radius="4"
                    :src="require('@assets/img_default_photo.png')"
                    fit="cover"
                />
                <div class="user-text">
                    <div class="text1">未登录</div>
                    <div class="text2">立即登陆</div>
                </div>
                <img src="@assets/icon_inter.png" class="icon" alt="" />
            </div>
        </div>

        <div class="menu-list">
            <div class="menu-card" @click="$router.push('/userPoint')">
                <div class="text1">{{ balance }}</div>
                <div class="text2">绿洲核</div>
            </div>
            <div class="menu-card" @click="$router.push('/userPass')">
                <div class="text1">{{ userTickets }}</div>
                <div class="text2">通行证</div>
            </div>
        </div>

        <div class="order-list">
            <div class="order-item" @click="$router.push('/records')">
                <img src="@assets/icon_zhanji.png" alt="" />
                <span>我的战绩</span>
            </div>
            <div class="order-item" @click="$router.push('/collections')">
                <img src="@assets/icon_duihuan.png" alt="" />
                <span>兑换记录</span>
            </div>
        </div>

        <div class="grids">
            <van-grid :border="false">
                <!-- <van-grid-item
                    :to="{ path: '/account' }"
                    :icon="require('@assets/icon_guanlianzhanghu.png')"
                    text="关联账户"
                /> -->
                <van-grid-item @click="wait" :icon="require('@assets/icon_guanlianzhanghu.png')" text="关联账户" />
                <van-grid-item
                    :to="{ path: '/reports' }"
                    :icon="require('@assets/icon-shenbaojil.png')"
                    text="申报记录"
                />
                <van-grid-item
                    :to="{ path: '/introduction' }"
                    :icon="require('@assets/icon_guanyuwomen.png')"
                    text="关于我们"
                />
                <van-grid-item
                    :to="{ path: '/security' }"
                    :icon="require('@assets/icon-xitongshezhi.png')"
                    text="系统设置"
                />
            </van-grid>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            faceAuth: true,
            userTickets: 0,
            balance: 0
        };
    },
    computed: {
        ...mapState(['userInfo']),
        safeTopNum() {
            let num = this.safeTop.replace(/px/, '');
            return Number(num);
        }
    },
    inject: ['safeTop'],
    mounted() {
        this.$store.dispatch('getUserInfo');
        if (this.isLogin) {
            this.$http
                .post(
                    '/userTicket/my',
                    {
                        size: 1,
                        query: {
                            used: false,
                            expired: false,
                            del: false
                        }
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.userTickets = res.totalElements;
                });

            this.$http.get('/user/myBalance').then(res => {
                this.balance = res.balance;
            });
        }
    },
    methods: {
        goAuth() {
            this.$router.push('/faceAuth');
            // if (this.authStatus === '认证中' || this.authStatus === '认证失败') {
            //     this.$router.push('/waiting');
            // } else if (this.authStatus === '未认证') {
            //     if (this.faceAuth) {
            //         this.$router.push('/faceAuth');
            //     } else {
            //         this.$router.push('/verified');
            //     }
            // }
        }
    }
};
</script>

<style lang="less" scoped>
.mine {
    position: relative;
    & > div {
        z-index: 1;
        position: relative;
    }
    .top-img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 0;
        img {
            width: 100%;
            height: auto;
            display: block;
        }
    }
}

.user-info {
    .flex();
    padding: 16px 16px 0;
    left: 0;
    right: 0;

    .user-text {
        flex-grow: 1;
        margin-left: 12px;
        .flex-col();
        justify-content: center;
        .text1 {
            font-size: 18px;
            font-weight: bold;
            color: #ffffff;
            line-height: 24px;
            .flex();
            .name {
                margin-right: 6px;
                font-size: 18px;
                color: #ffffff;
            }
        }
        .text2 {
            font-size: 14px;
            color: #6a6d83;
            line-height: 20px;
            margin-top: 6px;
        }
    }

    .icon {
        width: 24px;
        height: 24px;
    }
}

.auth {
    .flex();
    img {
        width: 24px;
        height: 24px;
        position: relative;
        z-index: 2;
    }
    span {
        font-size: 10px;
        color: #ffffff;
        line-height: 10px;
        background: #6a6d83;
        border-radius: 2px;
        display: inline-block;
        padding: 3px 4px 4px 10px;
        transform: translateX(-10px);
        position: relative;
        z-index: 1;
    }
}

.menu-list {
    .flex();
    padding: 30px 16px 0;
    justify-content: space-between;

    .menu-card {
        width: calc(50vw - 24px);
        background: @bg2;
        .flex-col();
        align-items: center;
        padding: 16px 0 12px;
        border-radius: 4px;
        .text1 {
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
            line-height: 24px;
        }
        .text2 {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
            margin-top: 4px;
        }
    }
}

.order-list {
    .flex();
    margin: 16px 16px 0;
    background-color: @bg2;
    border-radius: 4px;
    height: 80px;
    .order-item {
        width: calc(50vw - 16px);
        .flex();
        justify-content: center;
        position: relative;
        img {
            width: 28px;
            height: 28px;
        }
        span {
            font-size: 14px;
            font-weight: bold;
            color: #6a6d83;
            line-height: 24px;
            margin-left: 12px;
        }
    }

    .order-item + .order-item {
        &::before {
            content: '';
            position: absolute;
            width: 1px;
            height: 30px;
            background: #313346;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}
.grids {
    padding: 16px;
    .van-grid {
        background-color: @bg2;
    }
}
</style>
