<template>
    <div>
        <div class="bg"></div>
        <div class="avatar-area">
            <!-- 选择头像 -->
            <van-uploader 
                :after-read="afterRead" 
                :max-count="1"
                v-model="fileList"
                :reupload="true"
                :deletable="false"
                readonly
            />
        </div>
        <h2 class="user-name">{{ userInfo.phyName }}</h2>
        <div class="user-tap">
            <div class="taps">
                <div @click="jumpPersonInfo()">
                    <div>
                        <img src="../../static/perInfo.png" alt="">
                    </div>
                    <span>个人信息</span>
                </div>
                <div @click="jumpMsgNotice()">
                    <div>
                        <img src="../../static/notice.png" alt="">
                    </div>
                    <span>消息通知</span>
                </div>
                <div @click="exitLogin()">
                    <div>
                        <img src="../../static/exit.png" alt="">
                    </div>
                    <span>退出登录</span>
                </div>
            </div>
        </div>
        <TabBar/>
    </div>
</template>

<script setup lang="ts">

    import './scss/index.scss'
    import TabBar from '../../components/TabBar.vue';
    import { getUserInfo } from '../../api/user.js'
    import { ref, onMounted } from 'vue'
    import { useRouter } from 'vue-router'
    import { showConfirmDialog } from 'vant';
	import Crypoto from '../../api/AesCbc'
    
	const cry: any = new Crypoto()
    const router = useRouter()
    const userInfo = ref<any>({})
    // 设置默认头像
    const fileList = ref<any[]>([
        { url: localStorage.getItem('avatarUrl') }
    ])
    const afterRead = (file: any) => {
        console.log(file)
    }

    // 跳转到个人信息
    const jumpPersonInfo = () => {
        router.push({
            path: '/personalInfo'
        })
    }

    // 跳转到消息通知
    const jumpMsgNotice = () => {
        router.push({
            path: '/msgNotice'
        })
    }

    // 退出登录
    const exitLogin = () => {
        showConfirmDialog({
            title: '确认退出登录吗？',
            width: '7rem'
        }).then(() => {
            // confirm
            localStorage.removeItem('token')
            // 退出登录时销毁cookie并刷新页面
            const delCookie = new Date().getTime() - 8 * 60 * 60 * 1000
            document.cookie = `loginStatus=0;expires=${new Date(delCookie)}`
            history.go(0)
        }).catch(() => {
            // cancel
        })
    }

    onMounted(() => {
        getUserInfo({
            token: localStorage.getItem('token')
        }).then((res: any) => {
            userInfo.value =  res.data.obj[0]
			userInfo.value.phyName= cry.decrypt(userInfo.value.phyName)
            const data = res.data.obj[0]
            localStorage.setItem('phyName', data.phyName)
            localStorage.setItem('idcard', cry.decrypt(data.idcard))
            localStorage.setItem('age', data.age)
            localStorage.setItem('telepNumber', cry.decrypt(data.telepNumber))
            localStorage.setItem('departName', data.departName)
            localStorage.setItem('id', data.id)
            if (Number(data.sex) === 1) {
                localStorage.setItem('sex', '女')
            } else if (Number(data.sex) === 0) {
                localStorage.setItem('sex', '男')
            }
            console.log(userInfo.value)
        }).catch((err: any) => {
            console.log(err)
        })
    })

</script>

<style scoped lang="scss">
    .bg{
        width: 10rem;
        height: 8rem;
        background-color: #008080;
        position: absolute;
		left: 0;
		top: 0;
    }
        .avatar-area{
            width: 100%;
            height: 6rem;
            padding-top: 2rem;
            display: flex;
            justify-content: center;
            margin-bottom: 0.6rem;
        }
        .user-name{
            width: 100%;
            margin-top: 0.6rem;
            height: 0.5rem;
            display: flex;
            color: #fff;
            justify-content: center;
            font-size: 22px;
            margin-bottom: 1.2rem;
        }
        .user-tap{
            width: 96%;
            background-color: #fff;
            margin: 0.4rem auto;
            box-sizing: border-box;
            padding: 0.2rem;
            border-radius: 0.1rem;
            .warn-area{
                width: 100%;
                height: 1rem;
                line-height: 100%;
                display: flex;
                align-items: center;
                .img-area{
                    width: 12%;
                    height: 100%;
                    display: flex;
                    img{
                        margin: auto;
                        width: 90%;
                        height: 90%;
                    }
                }
                span{
                    padding-left: 0.15rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            .taps{
                width: 100%;
                display: flex;
                flex-direction: column;
                margin-top: 0.1rem;
                div{
                    width: 100%;
                    height: 1rem;
                    margin: 0.1rem;
                    border-bottom: 1px solid #f2f2f2;
                    display: flex;
                    justify-content: left;
                    align-items: center;
                    div{
                        width: 12%;
                        height: 100%;
                        display: flex;
                        border: none;
                        img{
                            margin: auto;
                            width: 50%;
                            height: 60%;
                        }
                    }
                    span{
                        font-size: 16px;
                    }
                }
                div:nth-child(3){
                    border: none;
                }
            }
        }
</style>