<template>
    <div class="resume-page">
        <!-- 个人信息 -->
        <view class="user-info flex-between">
            <view>
                <view class="name">{{ resumeData.realName || "未实名" }} </view>
                <view class="other">
                    <!-- {{ resumeData.workExperienceYear }}年经验·{{ resumeData.age }}岁·{{ resumeData.educationLevel }} -->
                    {{ resumeData.workExperienceYear }}年 ｜ {{ resumeData.educationLevel }} ｜ {{ resumeData.schoolName }}·{{
                        resumeData.major
                    }}
                </view>
            </view>
            <image v-if="resumeData.avatarPath" class="avatar" :src="evn.APP_IMAGE_BASE_API + resumeData.avatarPath" mode="" />
            <image v-else class="avatar" src="@/static/image/user/default-avatar.png" mode="" />
        </view>

        <!-- 个人优势 -->
        <view class="advantage">
            <view class="flex-between">
                <text class="gradient-title">个人优势</text>
                <view class="arrow" bind:tap="navigateTo"></view>
            </view>
            <view class="content">
                {{ resumeData.personalAdvantage }}
            </view>
        </view>
        <!-- 求职意向 -->
        <view class="intention">
            <view class="flex-between">
                <text class="gradient-title">求职意向</text>
                <view class="arrow"></view>
            </view>
            <view class="postion">{{ resumeData.preferredPosition }}</view>
            <view class="salary">{{ resumeData.minSalary }}-{{ resumeData.maxSalary }}| {{ resumeData.preferredCityName }}</view>
        </view>
        <!-- 工作经历 -->
        <view class="experience" @click="navigateTo('/pages/user/resume/workExperience/index')">
            <view class="flex-between">
                <text class="gradient-title">工作经历</text>
                <view class="arrow"></view>
            </view>
            <view class="list">
                <view class="item" v-for="(item, index) in resumeData.workExperience" :key="index">
                    <view class="name-date flex-between">
                        <text class="name">·{{ item.companyName }}</text>
                        <text class="date">{{ item.startDate }} ~ {{ item.endDate }}</text>
                    </view>
                    <view class="postion">·{{ item.position }}</view>
                    <view class="content"> ·{{ item.content }} </view>
                </view>
            </view>
        </view>
        <!-- 教育经历 -->
        <view class="experience" @click="navigateTo('/pages/user/resume/educationExperience/index')">
            <view class="flex-between">
                <text class="gradient-title">教育经历</text>
                <view class="arrow"></view>
            </view>
            <view class="list">
                <view class="item" v-for="(item, index) in resumeData.educationExperience" :key="index">
                    <view class="name-date flex-between">
                        <text class="name">·{{ item.schoolName }}</text>
                        <text class="date">{{ item.startDate }}~{{ item.endDate }}</text>
                    </view>
                    <view class="postion">·{{ item.major }}</view>
                    <!-- <view class="content">
                ·内容：预计，建筑工程将在今年底竣工。宿舍会在明年8月启用，让多达600名学生入住。
                国大学生事务处处长何汉杰说，国大的宿舍都各有特色，并解释为何要兴建以体育为主题的宿舍。
            </view> -->
                </view>
            </view>
        </view>
        <!-- {{ status }} -->

        <div class="footer flex-center">
            <template v-if="status == 0 || status == 1">
                <button class="b1" @click="refuse">不合适</button>
                <button class="b2" @click="invitation">邀请面试</button>
            </template>
            <template v-else>
                <button class="b3" :class="`style${status}`">{{ btnText }}</button>
                <div class="b4">
                    <a :href="`tel:${userPhone}`">
                        <img src="@/static/image/icon/telephone.png" alt="" />
                        <p>立即联系</p>
                    </a>
                </div>
            </template>
        </div>
        <!-- 确认拒绝 -->
        <wd-message-box />
    </div>
</template>

<script setup>
import { reactive, computed } from "vue";
import { getUserResumeApi, rejectApplicationApi, getApplicationByIdApi } from "@/api/postion";

import { getEnumText, getEumData } from "@/utils/utils.js";
import { navigateTo } from "@/utils/utils.js";
import evn from "@/utils/config.js";
import { useMessage } from "wot-design-uni";
let id = null;
const resumeData = reactive({
    preferredCityName: "",
    personalAdvantage: "",
    preferredPosition: "",
    maxSalary: "",
    minSalary: "",
    workExperience: [],
    educationExperience: [],
    workExperience: "",
    workExperienceYear: "",
    jobStatusText: "",
    educationLevel: "",
    realName: "",
    username: "",
    avatarPath: "",
    birthDate: "",
    jobStatus: "",
    age: "",
    schoolName: "",
    major: "",
    userPhone: ""
});
// 数据回显
const getUserResume = ({ userId, jobId }) => {
    getUserResumeApi({ userId, jobId }).then(async res => {
        const {
            personalAdvantage,
            preferredPosition,
            maxSalary,
            minSalary,
            preferredCityName,
            workExperience,
            educationExperience
        } = res.data.resume;
        const { realName, workExperience: workExperienceYear, educationLevel, avatarPath } = res.data.user;
        resumeData.preferredCityName = preferredCityName;
        resumeData.personalAdvantage = personalAdvantage; // 求职状态回
        // resumeData.preferredPosition = preferredPosition.split(",").join("|");
        const educationLevelText = await getEnumText("EnumEducation", educationLevel);
        resumeData.realName = realName;
        resumeData.avatarPath = avatarPath;
        resumeData.educationLevel = educationLevelText;
        resumeData.workExperienceYear = workExperienceYear;
        resumeData.maxSalary = maxSalary && maxSalary / 1000 + "k";
        resumeData.minSalary = minSalary && minSalary / 1000 + "k";
        const educationExperienceJson = JSON.parse(educationExperience || "[]");
        console.log(educationExperienceJson);
        resumeData.schoolName = educationExperienceJson[0]?.schoolName;
        resumeData.major = educationExperienceJson[0]?.major;
        resumeData.workExperience = JSON.parse(workExperience || "[]");
        resumeData.educationExperience = educationExperienceJson;
    });
};
onLoad(({ userId, jobId, applicationId }) => {
    id = applicationId;
    getUserResume({ userId, jobId });
});
/* 获取投递信息 */
const status = ref("");
const userPhone = ref("");
const btnText = computed(() => {
    switch (status.value) {
        case 2:
            return "已邀请面试";
        case 3:
            return "已面试";
        case 4:
            return "已拒绝";
        default:
            return "";
    }
});
onShow(() => {
    /* "code": "0",
        "text": "已投递",
        "code": "1",
        "text": "已查看",
        "code": "2",
        "text": "待面试",
        "code": "3",
        "text": "已面试",
        "code": "4",
        "text": "已拒绝", */

    getApplicationByIdApi(id).then(res => {
        status.value = res.data.status;
        userPhone.value = res.data.userPhone;
    });
});
/* 拒绝 */
const message = useMessage();
const refuse = () => {
    message
        .confirm({
            msg: "您确认拒绝该简历吗？",
            title: "拒绝"
        })
        .then(() => {
            console.log("点击了确定按钮");
            rejectApplicationApi(id).then(res => {
                if (res.code === 200) {
                    uni.showToast({
                        title: "已拒绝",
                        icon: "none"
                    });
                    status.value = 4;
                }
            });
        })
        .catch(() => {});
};
/* 邀请 */
const invitation = () => {
    uni.navigateTo({
        url: "/pages/recommend/invitation/index?id=" + id
    });
};
</script>

<style lang="scss" scoped>
.resume-page {
    padding-top: 50rpx;
}
.user-info {
    padding-bottom: 30rpx;
    margin: 0 32rpx;
    border-bottom: 2rpx solid #f3f4f8;
    .name {
        margin-bottom: 16rpx;
        font-size: 36rpx;
        font-weight: 600;
        line-height: 36rpx;
        color: #1b2026;
        img {
            width: 28rpx;
            height: 28rpx;
        }
    }
    .other {
        font-size: 24rpx;
        font-weight: normal;
        line-height: 36rpx;
        color: #77818f;
    }
    .avatar {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
    }
}
.state {
    padding: 0 32rpx 32rpx;
    margin-top: 32rpx;
    border-bottom: 16rpx solid #f3f4f8;
    view {
        margin-top: 16rpx;
        font-size: 24rpx;
        line-height: 36rpx;
        color: #1b2026;
    }
    .arrow {
        border-color: #1b2026;
    }
}
.advantage {
    padding: 32rpx;
    border-bottom: 16rpx solid #f3f4f8;
    .content {
        margin-top: 16rpx;
        font-size: 24rpx;
        line-height: 36rpx;
        color: #1b2026;
    }
}
.intention {
    padding: 32rpx;
    border-bottom: 16rpx solid #f3f4f8;
    view {
        margin-top: 16rpx;
        font-size: 24rpx;
        line-height: 36rpx;
        color: #1b2026;
    }
}
.experience {
    padding: 32rpx;
    border-bottom: 16rpx solid #f3f4f8;
    .list {
        .item {
            padding: 32rpx 0;
            &:not(:last-child) {
                border-bottom: 2rpx solid #f3f4f8;
            }
            .name-date {
                line-height: 36rpx;
                color: #1b2026;
                .name {
                    font-size: 28rpx;
                    font-weight: 600;
                }
                .date {
                    font-size: 24rpx;
                }
            }
            .postion {
                margin-top: 16rpx;
                font-size: 24rpx;
                line-height: 36rpx;
                color: #1b2026;
            }
            .content {
                font-size: 24rpx;
                line-height: 36rpx;
                color: #77818f;
            }
        }
    }
}
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    gap: 32rpx;
    width: 100%;
    padding: 16rpx 0;
    border-top: 2rpx solid #1f23290f;
    button {
        width: 294rpx;
        height: 80rpx;
        margin: 0;
        font-size: 30rpx;
        font-weight: 500;
        line-height: 80rpx;
        background: #1f86ff;
        border: 0;
        border-radius: 12rpx;
    }
    .b1 {
        color: #1f86ff;
        background: #1f86ff0f;
    }
    .b2 {
        color: #ffffff;
    }
    .b3 {
        width: 462rpx;
        height: 80rpx;
    }
    .b4 {
        text-align: center;
        a {
            font-size: 12px;
            color: #1f86ff;
            text-decoration: none;
        }
        img {
            width: 25px;
            height: 22px;
        }
    }
    .style2,
    .style3 {
        color: #1f86ff;
        background: rgb(31 134 255 / 10%);
    }
    .style4 {
        color: #f05a25;
        background: rgb(240 90 37 / 10%);
    }
}
</style>
