<template>
    <NavBar :showIcon="false" :showTitle="true" title="我的" textColor="#ffffff"></NavBar>
    <wd-overlay :show="show">
        <view class="popup-wrapper">
            <view class="block" @click.stop="">
                <view class="sumbit-error">
                    <view class="title">企业信息已失效</view>
                    <view class="info">
                        您在注册的<text>“{{ name }}”</text>已在乐业观山湖认证，请核对企业名称是否正确
                    </view>
                    <view class="btn flex-between" @tap="navigateTo('/pages/user/businessLicense/fillIn')">
                        <view class="text">
                            <view class="t1">注册新公司</view>
                            <view class="t2">注册新公司</view>
                        </view>
                        <view class="arrow"></view>
                    </view>
                    <view class="btn flex-between" @tap="navigateTo(`/pages/user/businessLicense/appeal?name=${name}&id=${id}`)">
                        <view class="text">
                            <view class="t1">申述资质被冒用</view>
                            <view class="t2">确定没有注册过乐业观山湖</view>
                        </view>
                        <view class="arrow"></view>
                    </view>
                </view>
            </view>
        </view>
    </wd-overlay>
    <wd-overlay :show="displayExpired">
        <view class="popup-display-expired">
            <view class="sumbit-error">
                <image class="a" src="@/static/image/user/displayExpired.png"></image> <view class="title">企业信息已失效</view>
                <view class="txt"
                    >由于您超过 <text style="color: #1f86ff">1</text> 月未登录 现已将您的账号禁用 您可完成申述后继续使用</view
                >
                <view class="btn-box">
                    <view class="cancel-button btn" @tap="displayExpired = false">取消</view>
                    <view class="tz-btn btn" @tap="navigateTo('/pages/user/businessLicense/fillIn?steps=2')">立即申诉</view>
                </view></view
            >
        </view>
    </wd-overlay>
    <wd-overlay :show="showOut">
        <view class="popup-display-expired">
            <view class="sumbit-error">
                <image class="u" src="@/static/image/user/user-out.png"></image> <view class="title"></view>
                <view class="txt">您的大堂经理职位 匹配的人员已超过7天未处理</view>
                <view class="btn-box1">
                    <view class="tz-btn btn" @tap="goToHome('/pages/recommend/index')">去看看</view>
                </view></view
            >
        </view>
    </wd-overlay>
    <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="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.name || "无" }}
                <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 style="display: flex; align-items: center">
                        <img :src="v.icon" alt="" /><view>{{ v.text }}</view>
                    </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, appealInfo, companyReviewInfo } from "@/api/user";
import { getEnumText } from "@/utils/utils";
import { ref, reactive } from "vue";
import { useReleasePostionStore } from "@/pages/recommend/releasePostion/store";
/* tab */
const pinias = useReleasePostionStore();
import evn from "@/utils/config.js";
const show = ref(false);
const showOut = ref(false);
const displayExpired = ref(false);
let name = ref("");
let id = ref("");
import { removeToken } from "@/utils/token";
const navigateTo = (url, fn) => {
    show.value = false;
    if (fn) {
        fn();
    }
    url &&
        xma.navigateTo({
            url
        });
};
const goToHome = (url, fn) => {
    showOut.value = false;
    if (fn) {
        fn();
    }
    url &&
        xma.switchTab({
            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/position.png", import.meta.url).href,
        url: "/pages/recommend/releasePostion/step1",
        text: "岗位发布",
        subText: "",
        auditStatus: "",
        fn: () => {
            pinias.resetForm();
        }
    },
    {
        icon: new URL("@/static/image/user/post.png", import.meta.url).href,
        url: "/pages/user/positionManagement/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/login/test",
    //     fn: () => {
    //         removeToken();
    //     },
    //     text: "退出登录(去测试登录)"
    // },
    // {
    //     icon: new URL("@/static/image/user/loginout.png", import.meta.url).href,
    //     url: "/pages/user/businessLicense/fillIn",
    //     text: "企业认证"
    // }
]);
/* 个人信息 */
const userInfo = ref({});
const appealInfoFn = () => {
    appealInfo().then(res => {
        show.value = false;
        if (res.data.status == 2) {
            navList[0].url = "/pages/user/businessLicense/appeal";
            navList[0].subText = "申诉不通过";
        } else if (res.data.status == 0) {
            navList[0].subText = "申诉中";
            navList[0].url = "/pages/user/businessLicense/appeal";
        }
    });
};
const companyReviewInfoFn = () => {
    companyReviewInfo().then(res => {
        if (!res.data) {
            uni.navigateTo({
                url: `/pages/user/businessLicense/fillIn?steps=3`
            });
        }
        const { reviewType, status } = res.data;
        if (reviewType == 1) {
            navList[0].url = `/pages/user/myCompany/index?status=${status === 0 ? 2 : 3}`;
            navList[0].subText = status === 0 ? "审核中" : "审核不通过";
        } else if (reviewType !== 1) {
            navList[0].url = `/pages/user/businessLicense/appeal`;
            navList[0].subText = status === 0 ? "申诉中" : "申诉不通过";
        }
    });
};
/* 获取用户信息 */
const getUserInfo = async () => {
    const userRes = await getLoginUserApi();
    if (!userRes.data) {
        uni.navigateTo({
            url: `/pages/user/businessLicense/fillIn?steps=1`
        });
    }
    if (userRes.code == 200) {
        userInfo.value = userRes.data || {};
        navList[0].subText = userRes.data.companyName;
        name.value = userRes.data.companyName;
        id.value = userRes.data.companyId;
    }
    const { status } = userRes.data;
    switch (status) {
        case 0:
            uni.navigateTo({
                url: `/pages/user/businessLicense/fillIn?steps=3`
            });
            uni.hideTabBar();
            break;
        case 1:
            navList[0].subText = userRes.data.companyName;
            navList[0].url = "/pages/user/myCompany/index?status=1";
            uni.showTabBar();
            break;
        case 2:
            navList[0].subText = "审核中";
            navList[0].url = "/pages/user/myCompany/index?status=2";
            companyReviewInfoFn();
            uni.hideTabBar();
            break;
        case 3:
            navList[0].subText = "申诉中";
            navList[0].url = "/pages/user/businessLicense/appeal";
            companyReviewInfoFn();
            uni.hideTabBar();
            break;
        case 4:
            navList[0].subText = "企业信息失效";
            uni.hideTabBar();
            show.value = true;
            break;
        case 5:
            // 账号长时间未登录 弹窗申诉
            uni.hideTabBar();
            displayExpired.value = true;
            break;
        default:
            break;
    }
};
onShow(() => {
    getUserInfo();
});
</script>

<style lang="scss" scoped>
.user-container {
    padding-top: 1rpx;
}
.popup-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .sumbit-error {
        position: relative;
        box-sizing: border-box;
        width: 600rpx;
        padding: 0 32rpx 32rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        image {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 30rpx;
            height: 30rpx;
        }
        .u {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 274rpx;
            height: 192rpx;
        }
        .title {
            padding: 32rpx 0;
            font-size: 36rpx;
            font-weight: 600;
            line-height: 54rpx;
            color: #1b2026;
            text-align: center;
        }
        .info {
            font-family: "PingFang SC";
            font-size: 24rpx;
            line-height: 48rpx;
            text {
                color: #1f86ff;
            }
        }
        .btn {
            padding: 24rpx;
            padding-right: 36rpx;
            margin-top: 32rpx;
            border: 2rpx solid #dfe1e5;
            border-radius: 8rpx;
            .t1 {
                font-size: 28rpx;
                font-weight: 500;
                line-height: 36rpx;
                color: #1b2026;
            }
            .t2 {
                margin-top: 8rpx;
                font-size: 24rpx;
                line-height: 36rpx;
                color: #a3a7b3;
            }
            .arrow {
                border-color: #77818f;
            }
        }
    }
}
.popup-display-expired {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    .sumbit-error {
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 600rpx;
        min-height: 668rpx;
        padding: 0 32rpx 32rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        .a {
            position: absolute;
            width: 448rpx;
            height: 448rpx;
        }
        .u {
            position: absolute;
            top: 120rpx;
            width: 274rpx;
            height: 192rpx;
        }
        .title {
            padding: 32rpx 0;
            margin-top: 300rpx;
            font-size: 28rpx;
            font-weight: 600;
            line-height: 54rpx;
            color: #1b2026;
            text-align: center;
        }
        .txt {
            width: 400rpx;
            font-size: 28rpx;
            font-weight: normal;
            line-height: 48rpx;
        }
        .btn-box {
            display: flex;
            align-items: center;
            margin-top: 40rpx;
            .btn {
                box-sizing: border-box;
                padding: 14rpx 34rpx;
                border-radius: 12rpx;
            }
            .cancel-button {
                color: #1f86ff;
                background: rgb(31 134 255 / 10%);
            }
            .tz-btn {
                margin-left: 72rpx;
                color: #ffffff;
                background: #1f86ff;
            }
        }
        .btn-box1 {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 40rpx;
            .btn {
                box-sizing: border-box;
                padding: 14rpx 34rpx;
                border-radius: 12rpx;
            }
            .cancel-button {
                color: #1f86ff;
                background: rgb(31 134 255 / 10%);
            }
            .tz-btn {
                color: #ffffff;
                background: #1f86ff;
            }
        }
    }
}
.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%);
        }
    }
    .flex {
        display: flex;
    }
    .align-center {
        align-items: center;
    }
    .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>
