<template>
    <div class="user-container">
        <navBar>
            <template #title>我的</template>
        </navBar>
        <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="userInfo.avatarPath" :src="evn.APP_IMAGE_BASE_API + userInfo.avatarPath" />
                <img v-else src="@/static/image/user/default-avatar.png" alt="" />
            </view>
            <view class="name">
                {{ userInfo.realName || "无" }}
                <img src="@/static/image/icon/edit.png" @click="navigateTo('/pages/user/editUserInfo/index')" alt="" />
            </view>
            <view class="education">{{ userInfo.position || "无" }}</view>
        </view>

        <!-- 导航 -->
        <view class="nav">
            <view class="item flex-between" v-for="(v, i) in navList" :key="i" @click="navigateTo(v.url, v.fn)">
                <view class="flex-between" style="flex: 1">
                    <div>
                        <img :src="v.icon" alt="" />
                        {{ v.text }}
                    </div>
                    <div v-if="v.subText" :class="{ orange: v.auditStatus === 0 || v.auditStatus === 2 }" class="sub-text">
                        {{ v.subText }}
                    </div>
                </view>
                <view class="arrow"></view>
            </view>
        </view>
    </div>
</template>

<script setup>
import navBar from "@/components/navBar/index.vue";
import { getLoginUserApi, getCompanyInfoApi } from "@/api/user";
import { getEnumText } from "@/utils/utils";
import { ref, reactive } from "vue";
import evn from "@/utils/config.js";
import { removeToken } from "@/utils/token";
const navigateTo = (url, fn) => {
    if (fn) {
        fn();
    }
    url &&
        uni.navigateTo({
            url
        });
};
const navList = reactive([
    {
        icon: new URL("@/static/image/user/history.png", import.meta.url).href,
        url: "/pages/user/myCompany/index",
        text: "我的公司",
        subText: "",
        auditStatus: ""
    },

    {
        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",
        fn: () => {
            removeToken();
        },
        text: "退出登录"
    },
    {
        icon: new URL("@/static/image/user/loginout.png", import.meta.url).href,
        url: "/pages/user/businessLicense/fillIn",
        text: "企业认证"
    },
    {
        icon: new URL("@/static/image/user/loginout.png", import.meta.url).href,
        url: "/pages/login/test",
        fn: () => {
            removeToken();
        },
        text: "退出登录(去测试登录)"
    }
]);
/* 个人信息 */
const userInfo = ref({});
/* 获取用户信息 */
const getUserInfo = async () => {
    const userRes = await getLoginUserApi();
    if (userRes.code == 200) {
        userInfo.value = userRes.data || {};
        navList[0].subText = userRes.data.companyName;
    }
    const companyRes = await getCompanyInfoApi();
    if (companyRes.code == 200) {
        let status = companyRes.data.companyAudit.status;
        if (status != 1) {
            navList[0].subText = await getEnumText("EnumAuditStatus", status);
            navList[0].auditStatus = status;
            uni.hideTabBar();
        } else {
            uni.showTabBar();
        }
    }
};
onShow(() => {
    getUserInfo();
});
</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;
    padding-bottom: 56rpx;
    margin-top: 20rpx;
    .avatar {
        margin-bottom: 32rpx;
        img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 50%;
        }
    }
    .name {
        display: flex;
        align-items: center;
        font-size: 36rpx;
        font-weight: 600;
        color: #1b2026;
        img {
            width: 40rpx;
            height: 40rpx;
            margin-left: 16rpx;
        }
    }
    .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;
        }
        .sub-text {
            font-size: 28rpx;
            color: #1b2026;
        }
        .orange {
            color: #ff561b;
        }
        .arrow {
            border-color: #1b2026;
        }
    }
}
</style>
