<template>
    <div class="mine">
        <img src="../../../assets/image/mineBg.svg" alt="" class="mineBg" />
        <div class="mineTit">
            <img src="../../../assets/image/head.png" alt="" />
            <div>{{ user.qymc }}，欢迎您！</div>
        </div>
        <div class="ulBody">
            <ul class="ulList">
                <li>
                    <img src="../../../assets/image/gantanhao.png" alt="" />
                    <div class="rightBox">
                        <p>当前版本号</p>
                        <p>V1.0.1</p>
                    </div>
                </li>
                <li>
                    <img src="../../../assets/image/suo.png" alt="" />
                    <div class="rightBox" @click="changePsw">
                        <p>密码修改</p>
                        <img src="../../../assets/image/right.png" alt="" />
                    </div>
                </li>
                <li>
                    <img src="../../../assets/image/guanbi.png" alt="" />
                    <div class="rightBox" @click="logout">
                        <p>退出系统</p>
                        <img src="../../../assets/image/right.png" alt="" />
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { Dialog } from "vant";
import auth from "@/service/auth";
export default {
    data() {
        return {
            user: {}
        };
    },
    mounted() {
        console.log(auth.currUser());
        this.user = auth.currUser();
    },
    methods: {
        //修改密码
        changePsw() {
            this.$router.push("/register");
        },
        //退出
        logout() {
            Dialog.confirm({
                title: "退出登录",
                message: "确认要退出吗？"
            })
                .then(() => {
                    this.$router.push("/login");
                })
                .catch(() => {
                    // on cancel
                });
        }
    }
};
</script>
<style lang="scss">
.mine {
    .mineBg {
        width: 100vw;
    }
    .mineTit {
        display: flex;
        position: absolute;
        top: 12vw;
        align-items: center;
        color: white;
        font-size: 6vw;
        img {
            width: 20vw;
            margin-left: 7vw;
            margin-right: 3vw;
        }
    }
    .ulBody {
        width: 90vw;
        margin-left: 5vw;
        background: white;
        padding: 5vw;
        box-sizing: border-box;
        border-radius: 5vw;
        position: absolute;
        top: 40vw;
        .ulList {
            li {
                display: flex;
                align-items: center;
                padding: 5vw 0;
                border-bottom: 1px solid rgba(230, 230, 230, 1);
                img {
                    width: 8vw;
                }
                .rightBox {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    align-items: center;
                    margin-left: 2vw;
                    color: rgba(8, 22, 64, 1);
                }
            }
        }
    }
}
</style>
