<template>
    <AppLayout backGorundColor="#F4F4F4">
        <template #headerleft>
            <view class="btnback">
                <image src="@/static/icon/back.png" @click="navBack"></image>
            </view>
        </template>
        <template #header>
            <view class="title">简历详情</view>
        </template>
        <view class="mys-container">
            <!-- 个人信息 -->
            <view class="mys-tops btn-feel">
                <view class="tops-left">
                    <view class="name">
                        <text>{{ userInfo.name || '暂无姓名' }}</text>
                    </view>
                    <view class="subName">
                        <dict-Label class="mar_ri10" dictType="sex" :value="userInfo.sex"></dict-Label>
                        <text class="mar_ri10">{{ userInfo.age }}岁</text>
                        <dict-Label class="mar_ri10" dictType="education" :value="userInfo.education"></dict-Label>
                        <dict-Label
                            class="mar_ri10"
                            dictType="affiliation"
                            :value="userInfo.politicalAffiliation"
                        ></dict-Label>
                    </view>
                    <view class="subName">{{ userInfo.phone }}</view>
                </view>
                <view class="tops-right">
                    <view class="right-imghead">
                        <image v-if="userInfo.sex === '0'" src="@/static/icon/boy.png"></image>
                        <image v-else src="@/static/icon/girl.png"></image>
                    </view>
                    <view class="right-sex">
                        <image v-if="userInfo.sex === '0'" src="@/static/icon/boy1.png"></image>
                        <image v-else src="@/static/icon/girl1.png"></image>
                    </view>
                </view>
            </view>
            <!-- 求职期望 -->
            <view class="mys-line"></view>
            <view class="mys-info">
                <view class="mys-h4">
                    <text>求职期望</text>
                </view>
                <view class="mys-text">
                    <text>期望薪资：</text>
                    <text>{{ userInfo.salaryMin / 1000 }}k-{{ userInfo.salaryMax / 1000 }}k</text>
                </view>
                <view class="mys-text">
                    <text>期望工作地：</text>
                    <dict-Label dictType="area" :value="Number(userInfo.area)"></dict-Label>
                </view>
                <view class="mys-list">
                    <view class="cards" v-for="(title, index) in userInfo.jobTitle" :key="index">
                        {{ title }}
                    </view>
                </view>
            </view>
            <!-- 技能列表 -->
            <view class="work-experience-container">
                <view class="exp-header">
                    <text class="exp-title">技能</text>
                </view>
                <view class="exp-list" v-if="userInfo.appSkillsList && userInfo.appSkillsList.length > 0">
                    <view class="exp-item" v-for="(skill, index) in userInfo.appSkillsList" :key="skill.id">
                        <view class="exp-company-row">
                            <text class="exp-company">{{ skill.name }}</text>
                            <text class="exp-position">{{ getSkillLevelText(skill.levels) }}</text>
                        </view>
                        <view class="exp-divider" v-if="index !== userInfo.appSkillsList.length - 1"></view>
                    </view>
                </view>
                <view class="exp-empty" v-else>
                    <image class="empty-img" src="/static/icons/empty-work.png" mode="widthFix"></image>
                    <text class="empty-text">暂无技能信息</text>
                </view>
            </view>

            <!-- 工作经历 -->
            <view class="work-experience-container">
                <!-- 标题栏：仅显示标题 -->
                <view class="exp-header">
                    <text class="exp-title">工作经历</text>
                </view>

                <!-- 工作经历列表 -->
                <view class="exp-list" v-if="workExperiences.length > 0">
                    <view class="exp-item" v-for="(item, index) in workExperiences" :key="item.id">
                        <!-- 公司名称 + 职位 -->
                        <view class="exp-company-row">
                            <text class="exp-company">{{ item.companyName }}</text>
                            <text class="exp-position">{{ item.position }}</text>
                        </view>

                        <!-- 工作时间 -->
                        <view class="exp-date-row">
                            <text class="exp-label">工作时间：</text>
                            <text class="exp-date">{{ item.startDate }} - {{ item.endDate || '至今' }}</text>
                        </view>

                        <!-- 工作描述（支持多行） -->
                        <view class="exp-desc-row" v-if="item.description">
                            <text class="exp-label">工作描述：</text>
                            <text class="exp-desc">{{ item.description }}</text>
                        </view>

                        <!-- 分隔线（最后一项不显示） -->
                        <view class="exp-divider" v-if="index !== workExperiences.length - 1"></view>
                    </view>
                </view>

                <!-- 空状态提示（无工作经历时显示） -->
                <view class="exp-empty" v-else>
                    <image class="empty-img" src="/static/icons/empty-work.png" mode="widthFix"></image>
                    <text class="empty-text">暂无工作经历</text>
                </view>
            </view>
        </view>
    </AppLayout>
</template>

<script setup>
import { reactive, inject, ref, onMounted } from 'vue';
const { $api, navTo, navBack, config } = inject('globalFunction');
import { onLoad } from '@dcloudio/uni-app';
import useDictStore from '@/stores/useDictStore';
const { getDictData } = useDictStore();

const userInfo = ref({});
const workExperiences = ref([]);
const isLoading = ref(false);

// 获取技能等级文本
const getSkillLevelText = (level) => {
    const levelMap = {
        '1': '初级',
        '2': '中级',
        '3': '高级'
    };
    return levelMap[level] || level || '暂无等级';
};

// 页面加载时获取数据
onLoad((option) => {
    const { userId } = option;
    if (userId) {
        getResumeDetail(userId);
    }
});

// 获取简历详情
const getResumeDetail = async (userId) => {
    try {
        isLoading.value = true;
        const resData = await $api.createRequest(`/app/user/userResume/${userId}`);
        if (resData.code === 200) {
            userInfo.value = resData.data;
            // 从简历详情中获取工作经历，而不是单独请求
            workExperiences.value = resData.data.experiencesList || [];
        }
    } catch (error) {
        console.error('获取简历详情失败:', error);
        $api.msg('获取简历详情失败');
    } finally {
        isLoading.value = false;
    }
};
</script>

<style lang="stylus" scoped>
image{
    width: 100%;
    height: 100%
}
.mys-container{
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .mys-tops{
        display: flex
        justify-content: space-between
        padding: 52rpx 48rpx
        .tops-left{
            .name{
                font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
                font-weight: 600;
                font-size: 44rpx;
                color: #333333;
                display: flex
                align-items: center
                justify-content: flex-start
            }
            .subName{
                margin-top: 12rpx
                font-weight: 400;
                font-size: 32rpx;
                color: #333333;
            }

        }
        .tops-right{
            position: relative
            .right-imghead{
                width: 136rpx;
                height: 136rpx;
                border-radius: 50%;
                background: #e8e8e8
                overflow: hidden
            }
            .right-sex{
                position: absolute
                right: -10rpx
                top: -10rpx
                width: 50rpx
                height: 50rpx
            }
        }
    }
    .mys-line{
        margin: 0 28rpx
        height: 0rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        border: 2rpx dashed #000000;
        opacity: 0.16;
    }
    .mys-info{
        padding: 28rpx
        .mys-h4{
            font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
            font-weight: 600;
            font-size: 32rpx;
            color: #000000;
            margin-bottom: 8rpx
            display: flex;
            justify-content: space-between
            align-items: center
        }
        .mys-text{
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
            margin-top: 16rpx
        }
        .mys-list{
            display: flex
            align-items: center
            flex-wrap: wrap;
            .cards{
                margin: 28rpx 28rpx 0 0
                height: 80rpx;
                padding: 0 38rpx;
                width: fit-content
                display: flex
                align-items: center
                justify-content: center
                border-radius: 12rpx 12rpx 12rpx 12rpx;
                border: 2rpx solid #E8EAEE;
            }
        }
    }
}


/* 容器样式（适配多端，用rpx做单位） */
.work-experience-container {
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 标题栏：两端对齐 */
.exp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
}

.exp-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

/* 经历列表容器 */
.exp-list {
  margin-top: 10rpx;
}

/* 单个经历卡片 */
.exp-item {
  padding: 20rpx 0;
}

/* 公司名称 + 职位（横向排列，职位右对齐） */
.exp-company-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

.exp-company {
  font-size: 28rpx;
  font-weight: bold;
  color: #000000;
}

.exp-position {
  font-size: 24rpx;
  font-weight: bold;
  color: #000000;
}

/* 工作时间/描述：标签+内容横向排列 */
.exp-date-row, .exp-desc-row {
  display: flex;
  margin-bottom: 12rpx;
  line-height: 1.6;
  color: #000000;
}

/* 标签样式（固定宽度，统一对齐） */
.exp-label {
  font-size: 26rpx;
  color: #000;
  min-width: 160rpx;
}

/* 内容样式 */
.exp-date, .exp-desc {
  font-size: 26rpx;
  color: #000000;
  flex: 1; /* 内容占满剩余宽度，支持换行 */
}

/* 工作描述（支持多行换行） */
.exp-desc {
  word-break: break-all;
}

/* 分隔线 */
.exp-divider {
  height: 1rpx;
  background-color: #f5f5f5;
  margin-top: 20rpx;
}

/* 空状态样式 */
.exp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 0;
  color: #999;
}

.empty-img {
  width: 140rpx;
  height: auto;
  margin-bottom: 25rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 26rpx;
  text-align: center;
  line-height: 1.5;
}

.btnback{
    width: 64rpx;
    height: 64rpx;
}

.title {
    font-size: 36rpx;
    font-weight: 600;
    color: #000000;
    text-align: center;
    margin-right: 64rpx;
}
</style>