<template>
    <view class="career-path">
        <!-- 职业路径查询区域 -->
        <view class="query-section">
            <view class="section-title">
                <uni-icons type="search" size="18" color="#286BFA"></uni-icons>
                <text class="title-text">职业路径查询</text>
            </view>
            
            <view class="input-group">
                <view class="input-item">
                    <text class="input-label">当前职位</text>
                    <input 
                        class="input-field" 
                        :value="currentPosition"
                        placeholder="前端开发工程师"
                        placeholder-style="color: #999999"
                        disabled
                    />
                </view>
                
                <view class="input-item">
                    <text class="input-label">目标职业</text>
                    <picker 
                        mode="selector"
                        :range="targetCareerOptions"
                        range-key="label"
                        :value="selectedTargetIndex"
                        @change="handleTargetChange"
                    >
                        <view class="picker-field">
                            <text :class="selectedTargetIndex >= 0 ? 'picker-text' : 'picker-placeholder'">
                                {{ selectedTargetIndex >= 0 ? targetCareerOptions[selectedTargetIndex].label : '请选择目标职业' }}
                            </text>
                            <uni-icons type="arrowdown" size="16" color="#999999"></uni-icons>
                        </view>
                    </picker>
                </view>
            </view>
            
            <button class="query-btn" @click="handleQuery">
                <text>查询职业发展路径</text>
                <uni-icons type="search" size="18" color="#FFFFFF"></uni-icons>
            </button>
        </view>

        <!-- 职业发展路径区域 -->
        <view class="path-section">
            <view class="section-title">
                <uni-icons type="person-filled" size="24" color="#000000"></uni-icons>
                <text class="title-text">职业发展路径</text>
            </view>
            
            <view class="timeline">
                <!-- 起点 -->
                <view class="timeline-item start">
                    <view class="timeline-marker start-marker"></view>
                    <view class="timeline-content">
                        <view class="step-title">起点: {{ pathData.start.title }}</view>
                        <view class="skill-tags">
                            <view 
                                class="skill-tag" 
                                v-for="(skill, index) in pathData.start.skills" 
                                :key="index"
                            >
                                {{ skill }}
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 步骤 -->
                <view 
                    class="timeline-item step" 
                    v-for="(step, index) in pathData.steps" 
                    :key="index"
                >
                    <view class="timeline-marker step-marker"></view>
                    <view class="timeline-content">
                        <view class="step-title">第{{ index + 1 }}步: {{ step.title }}</view>
                        <view class="skill-tags">
                            <view 
                                class="skill-tag" 
                                v-for="(skill, sIndex) in step.skills" 
                                :key="sIndex"
                            >
                                {{ skill }}
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 终点 -->
                <view class="timeline-item end">
                    <view class="timeline-marker end-marker"></view>
                    <view class="timeline-content">
                        <view class="step-title">终点: {{ pathData.end.title }}</view>
                        <view class="skill-tags">
                            <view 
                                class="skill-tag" 
                                v-for="(skill, index) in pathData.end.skills" 
                                :key="index"
                            >
                                {{ skill }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 当前职位（从接口获取，只读）
const currentPosition = ref('前端开发工程师');

// 目标职业选项（根据当前职位动态获取）
const targetCareerOptions = ref([
    { label: '互联网/IT', value: 'internet_it' },
    { label: '高级前端开发工程师', value: 'senior_frontend' },
    { label: '前端架构师', value: 'frontend_architect' },
    { label: '技术总监', value: 'tech_director' }
]);

const selectedTargetIndex = ref(-1);

// 职业路径数据（后续从接口获取）
const pathData = ref({
    start: {
        title: '初级网络安全管理员',
        skills: ['React', 'Node.js', 'Typescript', '数据库']
    },
    steps: [
        {
            title: '中级网络安全工程师',
            skills: ['Vue3', '微前端', '性能优化', '团队管理']
        },
        {
            title: '资深安全顾问(横向发展)',
            skills: ['架构设计', '技术选型', '工程化', '团队领导']
        },
        {
            title: '高级网络安全架构师',
            skills: ['架构设计', '技术选型', '工程化', '团队领导']
        },
        {
            title: '技术部门经理',
            skills: ['架构设计', '技术选型', '工程化', '团队领导']
        }
    ],
    end: {
        title: 'IT 项目总监',
        skills: ['架构设计', '技术选型', '工程化', '团队领导']
    }
});

// 获取当前职位信息（从接口获取）
async function getCurrentPosition() {
    // TODO: 调用接口获取当前职位
    // const response = await getCareerCurrentPosition();
    // if (response && response.code === 200) {
    //     currentPosition.value = response.data?.position || '';
    //     // 根据当前职位获取目标职业选项
    //     await getTargetCareerOptions(currentPosition.value);
    // }
}

// 根据当前职位获取目标职业选项
async function getTargetCareerOptions(position) {
    // TODO: 调用接口获取目标职业选项
    // const response = await getTargetCareers(position);
    // if (response && response.code === 200) {
    //     targetCareerOptions.value = response.data || [];
    // }
}

function handleTargetChange(e) {
    selectedTargetIndex.value = e.detail.value;
}

function handleQuery() {
    if (selectedTargetIndex.value < 0) {
        uni.showToast({
            title: '请选择目标职业',
            icon: 'none'
        });
        return;
    }
    const selectedTarget = targetCareerOptions.value[selectedTargetIndex.value];
    console.log('查询职业发展路径', currentPosition.value, selectedTarget);
    // TODO: 调用接口查询职业路径
}

onMounted(() => {
    getCurrentPosition();
});
</script>

<style lang="scss" scoped>
.career-path {
    padding: 10rpx 28rpx 20rpx;
}

.query-section {
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 28rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.section-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 24rpx;
}

.title-text {
    font-size: 32rpx;
    font-weight: 600;
    color: #157DF0;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    margin-bottom: 24rpx;
}

.input-item {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
}

.input-label {
    font-size: 28rpx;
    color: #000000;
    font-weight: 500;
}

.input-field {
    background-color: #F5F5F5;
    border: 1rpx solid #E0E0E0;
    border-radius: 12rpx;
    padding: 20rpx 24rpx;
    font-size: 28rpx;
    color: #666666;
}

.picker-field {
    background-color: #F5F5F5;
    border: 1rpx solid #E0E0E0;
    border-radius: 12rpx;
    padding: 20rpx 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.picker-text {
    font-size: 28rpx;
    color: #000000;
}

.picker-placeholder {
    font-size: 28rpx;
    color: #999999;
}

.query-btn {
    width: 100%;
    height: 80rpx;
    line-height: 40rpx;
    border-radius: 20rpx;
    background: linear-gradient(180deg, rgba(18, 125, 240, 1) 0%, rgba(59, 14, 123, 0.71) 100%);
    color: rgba(255, 255, 255, 1);
    font-size: 28rpx;
    text-align: center;
    font-family: '阿里巴巴普惠体3.0-regular', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
    border: 2rpx solid rgba(187, 187, 187, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    padding: 0;
}

.path-section {
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 28rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.timeline {
    position: relative;
    padding-left: 40rpx;
}

.timeline-item {
    position: relative;
    margin-bottom: 32rpx;
    
    &:last-child {
        margin-bottom: 0;
    }
    
    &:not(:last-child)::before {
        content: '';
        position: absolute;
        left: -32rpx;
        top: 0;
        width: 2rpx;
        height: 100%;
        background: repeating-linear-gradient(
            to bottom,
            #E0E0E0 0,
            #E0E0E0 6rpx,
            transparent 6rpx,
            transparent 12rpx
        );
        transform: translateX(-50%);
        z-index: 1;
    }
}

.timeline-marker {
    position: absolute;
    left: -32rpx;
    top: 0;
    transform: translateX(-50%);
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    z-index: 2;
}

.start-marker {
    background-color: #FF4444;
    border: 4rpx solid #FFFFFF;
    box-shadow: 0 0 0 2rpx #FF4444;
}

.step-marker {
    background-color: #286BFA;
    border: 4rpx solid #FFFFFF;
    box-shadow: 0 0 0 2rpx #286BFA;
}

.end-marker {
    background-color: #52C41A;
    border: 4rpx solid #FFFFFF;
    box-shadow: 0 0 0 2rpx #52C41A;
}

.timeline-content {
    background-color: #F5F5F5;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-left: 20rpx;
}

.step-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #000000;
    margin-bottom: 16rpx;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
}

.skill-tag {
    background-color: #F0F0F0;
    color: #286BFA;
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    white-space: nowrap;
}

button::after {
    border: none;
}
</style>
