<template>
    <NavBar :showIcon="false" :showTitle="true" title="我的" textColor="#ffffff"></NavBar>
    <div class="user-container">
        <view class="bg"></view>
        <!-- 用户信息 -->
        <view class="user-info flex-align-center">
            <view class="avatar">
                <!-- <image wx:if="{{avatarPath}}" src="{{imgPrefix}}/{{avatarPath}}" mode="" />
                <image wx:else="" class="userinfo-avatar" src="{{ossImgPrefix}}/user/default-avatar.png"></image> -->
                <img v-if="avatarPath" :src="evn.APP_IMAGE_BASE_API + avatarPath" />
                <img v-else src="@/static/image/user/default-avatar.png" alt="" />
            </view>
            <view class="name">{{ realName || "未实名" }}</view>
            <view class="education">{{ schoolName }} | {{ educationLevelText || "无" }}</view>
        </view>
        <!-- 我的简历 -->
        <view class="my-resume">
            <img src="@/static/image/user/resume.png" mode="" />
            <view>
                <view class="flex-between">
                    <text>我的简历</text>
                    <button @click="navigateTo('/pages/user/resume/index')">去完善</button>
                </view>
                <view class="t1">完善简历可获得更多机会哦~</view>
            </view>
        </view>
        <!-- 导航 -->
        <view class="nav">
            <view class="item flex-between" v-for="(v, i) in navList" :key="i" @click="navigateTo(v.url)">
                <view class="flex-align-center">
                    <img :src="v.icon" alt="" />
                    {{ v.text }}
                </view>
                <view class="arrow"></view>
            </view>
        </view>
        <!-- <div>
            {{ test }}
        </div> -->
    </div>
</template>

<script setup>
import { getUserResumeApi, getLoginUserApi } from "@/api/user";
import { ref } from "vue";
import { getEnumText } from "@/utils/utils.js";
import evn from "@/utils/config.js";
import { removeToken } from "@/utils/token";
const test = ref();

onShow(() => {
    getUserInfo();
});
const navigateTo = url => {
    url &&
        uni.navigateTo({
            url
        });
    if (url === "/pages/login/index" || url === "/pages/login/test") {
        removeToken();
        uni.removeStorageSync("userInfo");
    }
};
const navList = [
    {
        icon: new URL("@/static/image/user/bag.png", import.meta.url).href,
        url: "/pages/user/matching/index",
        text: "系统匹配岗位"
    },
    {
        icon: new URL("@/static/image/user/history.png", import.meta.url).href,
        url: "/pages/user/myDelivery/index?type=我的投递",
        text: "我的投递"
    },
    // {
    //     icon: new URL("@/static/image/user/feedback.png", import.meta.url).href,
    //     url: "/pages/user/myDelivery/index?type=我的面试",
    //     text: "我的面试"
    // },
    {
        icon: new URL("@/static/image/user/question.png", import.meta.url).href,
        url: "/pages/user/problemRecord/index",
        text: "投诉建议"
    },
    {
        icon: new URL("@/static/image/user/loginout.png", import.meta.url).href,
        url: "/pages/login/index",
        text: "退出登录"
    },
    {
        icon: new URL("@/static/image/user/loginout.png", import.meta.url).href,
        url: "/pages/test",
        text: "测试页面"
    },
    {
        icon: new URL("@/static/image/user/loginout.png", import.meta.url).href,
        url: "/pages/login/test",
        fn: () => {
            removeToken();
        },
        text: "退出登录(去测试登录)"
    }
];
/* 个人信息 */
const realName = ref("");
const avatarPath = ref("");
const schoolName = ref("");
const educationLevelText = ref("");
/* 获取用户信息 */
const getUserInfo = () => {
    getLoginUserApi().then(async res => {
        const { avatarPath: _avatarPath, name: _realName, education } = res.data;
        realName.value = _realName;
        avatarPath.value = _avatarPath;
        /* this.setData({
            avatarPath,
            realName,
            }); */
        educationLevelText.value = await getEnumText("EnumEducation", education);
    });
    getUserResumeApi().then(res => {
        const { educationExperience } = res.data;
        schoolName.value = JSON.parse(educationExperience)[0].schoolName;
    });
};
</script>

<style lang="scss" scoped>
.user-container {
    padding-top: 1rpx;
}
.nav-bar {
    .text {
        margin: 0 auto;
        font-size: 36rpx;
        color: #ffffff;
    }
}
.bg {
    position: absolute;
    top: 0rpx;
    left: 0rpx;
    z-index: -1;
    width: 750rpx;
    height: 520rpx;
    background: linear-gradient(180deg, #1f86ff 0%, #1f86ff 7%, rgb(241 248 255 / 0%) 90%);
}
.user-info {
    flex-direction: column;
    margin-top: 20rpx;
    .avatar {
        margin-bottom: 32rpx;
        img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 50%;
        }
    }
    .name {
        font-size: 36rpx;
        font-weight: 600;
        color: #1b2026;
    }
    .education {
        margin-top: 12rpx;
        font-size: 24rpx;
        line-height: 36rpx;
        color: #1b2026;
    }
}
.my-resume {
    box-sizing: border-box;
    display: flex;
    width: 686rpx;
    height: 194rpx;
    padding: 36rpx 32rpx 0 16rpx;
    margin: 32rpx auto 28rpx;
    background: linear-gradient(255deg, #1f86ff 1%, #60a9ff 46%, #f8fbff 97%);
    border-radius: 16rpx;
    box-shadow: -2rpx 8rpx 23.6rpx 0rpx rgb(167 188 220 / 55%);
    & > image {
        width: 198rpx;
        height: 150rpx;
        margin-right: 12rpx;
    }
    & > view {
        flex: 1;
    }
    .flex-between {
        margin-top: 26rpx;
        text {
            font-size: 32rpx;
            font-weight: 600;
            line-height: 36rpx;
            color: #ffffff;
        }
        button {
            width: 130rpx;
            height: 48rpx;
            padding: 0;
            margin: 0;
            font-size: 24rpx;
            font-weight: 500;
            line-height: 48rpx;
            color: #2489ff;
            background: #ffffff;
            border-radius: 8rpx;
            box-shadow: 0rpx 2rpx 2.6rpx rgb(127 187 231 / 49%);
        }
    }
    .t1 {
        margin-top: 20rpx;
        font-size: 24rpx;
        line-height: 36rpx;
        color: #ffffff;
    }
}
.nav {
    background-color: #ffffff;
    border-top: 16rpx solid #f3f4f8;
    .item {
        padding: 40rpx;
        img {
            width: 36rpx;
            height: 36rpx;
            margin-right: 24rpx;
        }
        .arrow {
            border-color: #1b2026;
        }
    }
}
</style>
