<template>
    <view class="mys-container">
        <!-- 个人信息 -->
        <view class="mys-tops btn-feel">
            <view class="tops-left">
                <view class="name">
                    <text>{{ userInfo.name || '编辑用户名' }}</text>
                    <view class="edit-icon mar_le10">
                        <image
                            class="button-click"
                            src="@/static/icon/edit1.png"
                            @click="navTo('/packageA/pages/personalInfo/personalInfo')"
                        ></image>
                    </view>
                </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 class="mys-edit-icon">
                    <image
                        class="button-click"
                        src="@/static/icon/edit1.png"
                        @click="navTo('/packageA/pages/jobExpect/jobExpect')"
                    ></image>
                </view>
            </view>
            <view class="mys-text">
                <text>期望薪资：</text>
                <text>{{ userInfo.salaryMin }}元-{{ userInfo.salaryMax }}元</text>
            </view>
            <view class="mys-text">
                <text>期望工作地：</text>
                <text>{{ config.appInfo.areaName }}-</text>
                <dict-Label dictType="area" :value="Number(userInfo.area)"></dict-Label>
            </view>
            <view class="mys-list">
                <view class="cards button-click" 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>
                <button class="exp-edit-btn" @click="handleEditOrAdd" size="mini" type="primary">
                    <!-- <text>  {{ workExperiences.length > 0 ? '编辑' : '添加经历' }}</text> -->
                    添加经历
                </button>
            </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-op-btn-row">
                        <button class="exp-op-btn edit-btn" size="mini" @click.stop="handleEditItem(item)">编辑</button>
                        <button
                            class="exp-op-btn delete-btn"
                            size="mini"
                            type="warn"
                            @click.stop="handleDeleteItem(item,index)"
                        >
                            删除
                        </button>
                    </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>

        <!-- 4. 新增：简历上传区域（固定在页面底部） -->
        <view class="resume-upload-section">
            <button class="upload-btn" @click="handleResumeUpload" :loading="isUploading" :disabled="isUploading">
                <uni-icons type="cloud-upload" size="20"></uni-icons>
                <text class="upload-text">
                    {{ uploadedResumeName || '上传简历' }}
                </text>
                <text class="reupload-text" v-if="uploadedResumeName">（重新上传）</text>
            </button>

            <text class="upload-tip">支持 PDF、Word 格式，文件大小不超过 20MB</text>

            <view class="uploaded-file-info" v-if="uploadedResumeName">
                <image class="file-icon" src="/static/icons/file-icon.png" mode="widthFix"></image>
                <text class="file-name">{{ uploadedResumeName }}</text>
                <button class="delete-file-btn" size="mini" @click.stop="handleDeleteResume">删除</button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
const { $api, navTo, config } = inject('globalFunction');
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { userInfo } = storeToRefs(useUserStore());
const { getUserResume } = useUserStore();
const { getDictData, oneDictData } = useDictStore();

const isUploading = ref(false); // 上传中状态
const uploadedResumeName = ref(''); // 已上传简历文件名
const uploadedResumeUrl = ref(''); // 已上传
const workExperiences = ref([]); // 工作经历列表
const isLoading = ref(false); // 加载状态

// 获取工作经历列表
const getWorkExperiences = async () => {
    try {
        isLoading.value = true;
        console.log('完整用户信息:', userInfo.value);
        
        // 获取用户ID - 使用可选链操作符避免错误
        const userId = userInfo.value?.userId;
        console.log('用户ID:', userId);
        
        if (!userId) {
            console.log('用户ID为空，等待用户信息加载...');
            // 如果用户ID为空，不执行任何操作，避免触发退出登录
            return;
        }
        
        // 只传递userId参数
        console.log('请求参数:', { userId });
        
        // 使用try-catch包装请求，避免自动退出登录
        try {
            // 参数拼接到URL后面
            const resData = await $api.createRequest(`/app/userworkexperiences/list?userId=${userId}`, {}, 'get');
            console.log('工作经历列表响应:', resData);
            
            if (resData.code === 200 && resData.rows) {
                workExperiences.value = resData.rows;
                console.log('工作经历数据设置成功:', resData.rows);
                console.log('总数量:', resData.total);
            } else {
                console.log('接口返回非200状态或无数据:', resData);
                // 如果接口返回错误，不显示错误提示，避免用户困惑
                workExperiences.value = []; // 设置为空数组
            }
        } catch (requestError) {
            console.error('接口请求失败:', requestError);
            // 接口请求失败时，不显示错误提示，静默处理
            workExperiences.value = []; // 设置为空数组
        }
        
    } catch (error) {
        console.error('获取工作经历失败:', error);
        // 静默处理错误，不显示错误提示
        workExperiences.value = [];
    } finally {
        isLoading.value = false;
    }
};

// 页面加载时获取数据
onLoad(() => {
    // 延迟获取数据，确保用户信息完全加载
    setTimeout(() => {
        if (userInfo.value?.userId) {
            getWorkExperiences();
        }
    }, 1000);
});

// 页面显示时刷新数据
onShow(() => {
    // 延迟获取数据，确保用户信息完全加载
    setTimeout(() => {
        if (userInfo.value?.userId) {
            getWorkExperiences();
        }
    }, 1000);
});

// 整体编辑/添加（跳转编辑页）
const handleEditOrAdd = () => {
    // 跳转到添加经历页面，传递添加标识
    navTo('/packageA/pages/addWorkExperience/addWorkExperience?type=add');
};

// 编辑单个经历
const handleEditItem = (item) => {
    // 跳转到编辑页面，传递编辑标识和数据
    const itemData = encodeURIComponent(JSON.stringify(item));
    navTo(`/packageA/pages/addWorkExperience/addWorkExperience?type=edit&data=${itemData}`);
};

// 删除单个经历（带确认弹窗）
const handleDeleteItem = async (item, index) => {
    uni.showModal({
        title: '确认删除',
        content: '此操作将删除该工作经历，是否继续？',
        success: async (res) => {
            if (res.confirm) {
                try {
                    // 调用删除接口
                    const deleteRes = await $api.createRequest(`/app/userworkexperiences/${item.id}`, {}, 'delete');
                    if (deleteRes.code === 200) {
                        workExperiences.value.splice(index, 1); // 删除本地数据
                        $api.msg('删除成功');
                    } else {
                        $api.msg(deleteRes.msg || '删除失败');
                    }
                } catch (error) {
                    console.error('删除工作经历失败:', error);
                    $api.msg('删除失败，请重试');
                }
            }
        },
    });
};

// 简历上传核心逻辑
const handleResumeUpload = () => {
    // 从缓存获取用户ID（参考首页实现方式）
    // 优先从store获取，如果为空则从缓存获取
    const storeUserId = userInfo.value?.userId;
    const cachedUserInfo = uni.getStorageSync('userInfo') || {};
    const cachedUserId = cachedUserInfo.userId;
    
    // 获取用户ID：优先使用store中的userId，如果store中没有，使用缓存中的userId
    const userId = storeUserId || cachedUserId;
    
    if (!userId) {
        $api.msg('请先登录');
        return;
    }

    // 检查是否正在上传
    if (isUploading.value) {
        return;
    }

    // 选择文件（微信小程序使用 wx.chooseMessageFile，uni-app 中对应 uni.chooseMessageFile）
    uni.chooseMessageFile({
        count: 1, // 只能选择一个文件
        type: 'file', // 选择任意文件类型
        success: (res) => {
            // 注意：文件路径在 res.tempFiles[0].path
            const file = res.tempFiles[0];
            const tempFilePath = file.path; // 获取临时文件路径
            const fileName = file.name; // 获取文件名
            
            // 检查文件大小（20MB = 20 * 1024 * 1024 字节）
            const maxSize = 20 * 1024 * 1024;
            if (file.size > maxSize) {
                $api.msg('文件大小不能超过 20MB');
                return;
            }

            // 检查文件类型
            const allowedTypes = ['pdf', 'doc', 'docx'];
            const fileExtension = fileName.split('.').pop()?.toLowerCase();
            if (!fileExtension || !allowedTypes.includes(fileExtension)) {
                $api.msg('仅支持 PDF、Word 格式');
                return;
            }

            // 开始上传
            uploadResumeFile(tempFilePath, fileName, userId);
        },
        fail: (err) => {
            console.error('选择文件失败:', err);
            // 用户取消选择不提示错误
            if (err.errMsg && !err.errMsg.includes('cancel')) {
                $api.msg('选择文件失败，请重试');
            }
        }
    });
};

// 上传简历文件到服务器（使用 wx.uploadFile，uni-app 中对应 uni.uploadFile）
const uploadResumeFile = (filePath, fileName, userId) => {
    // 确保 userId 存在且有效
    if (!userId) {
        // 如果传入的userId为空，尝试从缓存再次获取
        const cachedUserInfo = uni.getStorageSync('userInfo') || {};
        const cachedUserId = cachedUserInfo.userId;
        
        if (!cachedUserId) {
            $api.msg('用户ID不存在，无法上传');
            return;
        }
        
        // 使用缓存中的userId
        userId = cachedUserId;
    }

    isUploading.value = true;
    
    // 获取token（从缓存获取，参考首页实现方式）
    let Authorization = '';
    const tokenValue = uni.getStorageSync('token') || '';
    if (tokenValue) {
        Authorization = tokenValue;
    } else {
        // 如果缓存中没有token，尝试从store获取
        const userStore = useUserStore();
        if (userStore.token) {
            Authorization = userStore.token;
        }
    }

    // 根据接口文档，bussinessId 应该作为 Query 参数传递，而不是 formData
    // 将 bussinessId 拼接到 URL 上作为查询参数
    const uploadUrl = `${config.baseUrl}/app/file/upload?bussinessId=${encodeURIComponent(String(userId))}`;

    // 打印调试信息
    console.log('上传文件参数:', {
        url: uploadUrl,
        fileName: fileName,
        bussinessId: userId,
        userId: userId,
        token: Authorization ? '已获取' : '未获取'
    });

    // 上传文件（参考微信小程序 wx.uploadFile API）
    uni.uploadFile({
        url: uploadUrl, // 开发者服务器的上传接口（必须是 HTTPS），bussinessId 作为 Query 参数
        filePath: filePath, // 本地文件路径（临时路径）
        name: 'file', // 服务器端接收文件的字段名（需与后端一致）
        // 注意：根据接口文档，bussinessId 通过 Query 参数传递，不需要 formData
        header: {
            'Authorization': encodeURIComponent(Authorization)
        },
        success: (uploadRes) => {
            try {
                // 注意：res.data 是字符串，需转为 JSON（如果后端返回 JSON）
                // 参考方案：const result = JSON.parse(data);
                let resData;
                if (typeof uploadRes.data === 'string') {
                    resData = JSON.parse(uploadRes.data);
                } else {
                    resData = uploadRes.data;
                }

                // 判断上传是否成功
                if (uploadRes.statusCode === 200 && resData.code === 200) {
                    // 上传成功，处理返回结果
                    uploadedResumeName.value = fileName;
                    uploadedResumeUrl.value = resData.data || resData.msg || resData.url || '';
                    $api.msg('简历上传成功');
                    console.log('上传成功', resData);
                    
                    // 可以在这里保存简历信息到后端（如果需要）
                    // saveResumeInfo(userId, uploadedResumeUrl.value, fileName);
                } else {
                    // 上传失败
                    const errorMsg = resData.msg || resData.message || '上传失败，请重试';
                    $api.msg(errorMsg);
                    console.error('上传失败:', resData);
                }
            } catch (error) {
                // 解析响应数据失败
                console.error('解析上传响应失败:', error);
                console.error('原始响应数据:', uploadRes.data);
                $api.msg('上传失败，请重试');
            }
        },
        fail: (err) => {
            // 上传失败
            console.error('上传文件失败:', err);
            $api.msg('上传失败，请检查网络连接');
        },
        // 上传进度监听（可选）
        progress: (res) => {
            const progress = res.progress; // 上传进度（0-100）
            console.log('上传进度：', progress + '%');
            // 可以在这里更新进度条 UI（如果需要）
        },
        complete: () => {
            // 上传完成（无论成功或失败）
            isUploading.value = false;
        }
    });
};

// 删除已上传的简历
const handleDeleteResume = () => {
    if (!uploadedResumeName.value) {
        return;
    }

    uni.showModal({
        title: '确认删除',
        content: '确定要删除已上传的简历吗？',
        success: (res) => {
            if (res.confirm) {
                // 清除本地数据
                uploadedResumeName.value = '';
                uploadedResumeUrl.value = '';
                $api.msg('已删除');
                
                // 如果需要，可以调用后端接口删除服务器上的文件
                // deleteResumeFile(userId);
            }
        }
    });
};
</script>

<style lang="stylus">
/* 修复页面滚动问题：覆盖全局的 overflow: hidden */
page {
    overflow-y: auto !important;
    overflow-x: hidden;
}
</style>

<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
                .edit-icon{
                    display: inline-block
                    width: 40rpx;
                    height: 40rpx
                    padding-bottom: 10rpx
                }
            }
            .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-edit-icon{
                display: inline-block
                width: 40rpx;
                height: 40rpx
            }
        }
        .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;
}

/* 编辑/添加按钮（UniApp按钮样式重置） */
.exp-edit-btn {
  padding: 0 20rpx;
  height: 44rpx;
  line-height: 44rpx;
  font-size: 24rpx;
  margin: 0
}

/* 经历列表容器 */
.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: 500;
  color: #333;
}

.exp-position {
  font-size: 26rpx;
  color: #666;
}

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

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

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

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

/* 操作按钮行（编辑+删除） */
.exp-op-btn-row {
  display: flex;
  gap: 15rpx;
  margin-top: 15rpx;
  justify-content: flex-end;
}

.exp-op-btn {
  padding: 0 15rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 22rpx;
  margin: 0
}

.edit-btn {
  background-color: #e8f3ff;
  color: #1677ff;
}

/* 分隔线 */
.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;
}


/* 新增：简历上传区域样式 */
.resume-upload-section {
  margin-top: 30rpx;
  padding-top: 25rpx;
  border-top: 1px dashed #eee; /* 分隔线区分内容区域 */
  display: flex;
  flex-direction: column;
  gap: 15rpx;
  align-items: center;
}

/* 上传按钮 */
.upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  padding: 0 30rpx;
  background-color: #f5f7fa;
  color: #1677ff;
  border-radius: 8rpx;
  font-size: 26rpx;
}

.upload-icon {
  width: 30rpx;
  height: 30rpx;
}

.reupload-text {
  font-size: 22rpx;
  color: #666;
}

/* 上传说明文字 */
.upload-tip {
  font-size: 20rpx;
  color: #999;
  text-align: center;
  line-height: 1.4;
}

/* 已上传文件信息 */
.uploaded-file-info {
  display: flex;
  align-items: center;
  gap: 15rpx;
  padding: 15rpx 20rpx;
  background-color: #fafafa;
  border-radius: 8rpx;
  margin-top: 10rpx;
}

.file-icon {
  width: 36rpx;
  height: 36rpx;
}

.file-name {
  font-size: 24rpx;
  color: #333;
  max-width: 400rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delete-file-btn {
  padding: 0 15rpx;
  height: 36rpx;
  line-height: 36rpx;
  font-size: 22rpx;
  color: #ff4d4f;
  background-color: transparent;
}
</style>
