<template>
    <view class="publish-job-page">
        <!-- 头部导航 -->
        <view class="header">
            <view class="header-left" @click="goBack">
                <image src="@/static/icon/back.png" class="back-icon"></image>
            </view>
            <view class="header-title">发布岗位</view>
            <view class="header-right"></view>
        </view>

        <!-- 主要内容 -->
        <view class="content">
            <!-- 岗位基本信息 -->
            <view class="section">
                <view class="section-title">岗位基本信息</view>
                <view class="form-group">
                    <view class="label">岗位名称 *</view>
                    <input 
                        class="input" 
                        placeholder="请输入岗位名称" 
                        v-model="formData.jobTitle"
                    />
                </view>
                <view class="form-group">
                    <view class="label">岗位类型 *</view>
                    <picker 
                        mode="selector" 
                        :range="jobTypes" 
                        @change="onJobTypeChange"
                        class="picker"
                    >
                        <view class="picker-text">{{ selectedJobType || '请选择岗位类型' }}</view>
                    </picker>
                </view>
                <view class="form-group">
                    <view class="label">工作地点 *</view>
                    <input 
                        class="input" 
                        placeholder="请输入工作地点" 
                        v-model="formData.workLocation"
                    />
                </view>
            </view>

            <!-- 薪资待遇 -->
            <view class="section">
                <view class="section-title">薪资待遇</view>
                <view class="salary-row">
                    <view class="form-group">
                        <view class="label">最低薪资</view>
                        <input 
                            class="input salary-input" 
                            placeholder="0" 
                            type="number"
                            v-model="formData.minSalary"
                        />
                    </view>
                    <view class="salary-separator">-</view>
                    <view class="form-group">
                        <view class="label">最高薪资</view>
                        <input 
                            class="input salary-input" 
                            placeholder="0" 
                            type="number"
                            v-model="formData.maxSalary"
                        />
                    </view>
                </view>
                <view class="form-group">
                    <view class="label">薪资单位</view>
                    <picker 
                        mode="selector" 
                        :range="salaryUnits" 
                        @change="onSalaryUnitChange"
                        class="picker"
                    >
                        <view class="picker-text">{{ selectedSalaryUnit || '请选择薪资单位' }}</view>
                    </picker>
                </view>
            </view>

            <!-- 任职要求 -->
            <view class="section">
                <view class="section-title">任职要求</view>
                <view class="form-group">
                    <view class="label">学历要求</view>
                    <picker 
                        mode="selector" 
                        :range="educationLevels" 
                        @change="onEducationChange"
                        class="picker"
                    >
                        <view class="picker-text">{{ selectedEducation || '请选择学历要求' }}</view>
                    </picker>
                </view>
                <view class="form-group">
                    <view class="label">工作经验</view>
                    <picker 
                        mode="selector" 
                        :range="experienceLevels" 
                        @change="onExperienceChange"
                        class="picker"
                    >
                        <view class="picker-text">{{ selectedExperience || '请选择工作经验' }}</view>
                    </picker>
                </view>
                <view class="form-group">
                    <view class="label">招聘人数</view>
                    <input 
                        class="input" 
                        placeholder="请输入招聘人数" 
                        type="number"
                        v-model="formData.recruitCount"
                    />
                </view>
            </view>

            <!-- 岗位描述 -->
            <view class="section">
                <view class="section-title">岗位描述</view>
                <view class="form-group">
                    <view class="label">岗位职责</view>
                    <textarea 
                        class="textarea" 
                        placeholder="请详细描述岗位职责和工作内容"
                        v-model="formData.jobDescription"
                    ></textarea>
                </view>
                <view class="form-group">
                    <view class="label">任职要求</view>
                    <textarea 
                        class="textarea" 
                        placeholder="请描述对候选人的具体要求"
                        v-model="formData.jobRequirements"
                    ></textarea>
                </view>
            </view>

            <!-- 联系方式 -->
            <view class="section">
                <view class="section-title">联系方式</view>
                <view class="form-group">
                    <view class="label">联系人</view>
                    <input 
                        class="input" 
                        placeholder="请输入联系人姓名" 
                        v-model="formData.contactPerson"
                    />
                </view>
                <view class="form-group">
                    <view class="label">联系电话</view>
                    <input 
                        class="input" 
                        placeholder="请输入联系电话" 
                        v-model="formData.contactPhone"
                    />
                </view>
                <view class="form-group">
                    <view class="label">联系邮箱</view>
                    <input 
                        class="input" 
                        placeholder="请输入联系邮箱" 
                        v-model="formData.contactEmail"
                    />
                </view>
            </view>
        </view>

        <!-- 底部操作按钮 -->
        <view class="footer">
            <view class="btn-group">
                <button class="btn btn-cancel" @click="goBack">取消</button>
                <button class="btn btn-publish" @click="publishJob">发布岗位</button>
            </view>
        </view>
    </view>
</template>

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

// 表单数据
const formData = reactive({
    jobTitle: '',
    workLocation: '',
    minSalary: '',
    maxSalary: '',
    recruitCount: '',
    jobDescription: '',
    jobRequirements: '',
    contactPerson: '',
    contactPhone: '',
    contactEmail: ''
});

// 选择器数据
const jobTypes = ['技术类', '销售类', '管理类', '服务类', '其他'];
const salaryUnits = ['元/月', '元/年', '元/小时'];
const educationLevels = ['不限', '高中', '大专', '本科', '硕士', '博士'];
const experienceLevels = ['不限', '应届毕业生', '1-3年', '3-5年', '5-10年', '10年以上'];

// 选中的值
const selectedJobType = ref('');
const selectedSalaryUnit = ref('');
const selectedEducation = ref('');
const selectedExperience = ref('');

// 选择器事件处理
const onJobTypeChange = (e) => {
    selectedJobType.value = jobTypes[e.detail.value];
};

const onSalaryUnitChange = (e) => {
    selectedSalaryUnit.value = salaryUnits[e.detail.value];
};

const onEducationChange = (e) => {
    selectedEducation.value = educationLevels[e.detail.value];
};

const onExperienceChange = (e) => {
    selectedExperience.value = experienceLevels[e.detail.value];
};

// 返回上一页
const goBack = () => {
    uni.navigateBack();
};

// 发布岗位
const publishJob = () => {
    // 简单验证
    if (!formData.jobTitle) {
        uni.showToast({
            title: '请输入岗位名称',
            icon: 'none'
        });
        return;
    }
    
    if (!formData.workLocation) {
        uni.showToast({
            title: '请输入工作地点',
            icon: 'none'
        });
        return;
    }

    // 模拟发布成功
    uni.showLoading({
        title: '发布中...'
    });
    
    setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
            title: '发布成功',
            icon: 'success'
        });
        
        // 延迟返回
        setTimeout(() => {
            goBack();
        }, 1500);
    }, 2000);
};
</script>

<style lang="scss" scoped>
.publish-job-page {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 120rpx;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    background: #fff;
    border-bottom: 1rpx solid #eee;
    
    .header-left {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .back-icon {
            width: 40rpx;
            height: 40rpx;
        }
    }
    
    .header-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
    }
    
    .header-right {
        width: 60rpx;
    }
}

.content {
    padding: 0;
}

.section {
    background: #fff;
    border-radius: 0;
    padding: 30rpx;
    margin-bottom: 20rpx;
    width: 100%;
    
    &:last-child {
        margin-bottom: 0;
    }
    
    .section-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 30rpx;
        padding-bottom: 20rpx;
        border-bottom: 2rpx solid #f0f0f0;
    }
}

.form-group {
    margin-bottom: 30rpx;
    
    &:last-child {
        margin-bottom: 0;
    }
    
    .label {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 15rpx;
        font-weight: 500;
    }
    
    .input {
        width: 100%;
        height: 80rpx;
        background: #fff;
        border: none;
        border-bottom: 2rpx solid #e0e0e0;
        border-radius: 0;
        padding: 0 0 10rpx 0;
        font-size: 28rpx;
        color: #333;
        
        &:focus {
            border-bottom-color: #256BFA;
            background: #fff;
        }
    }
    
    .textarea {
        width: 100%;
        min-height: 120rpx;
        background: #fff;
        border: none;
        border-bottom: 2rpx solid #e0e0e0;
        border-radius: 0;
        padding: 20rpx 0 10rpx 0;
        font-size: 28rpx;
        color: #333;
        
        &:focus {
            border-bottom-color: #256BFA;
            background: #fff;
        }
    }
    
    .picker {
        width: 100%;
        height: 80rpx;
        background: #fff;
        border: none;
        border-bottom: 2rpx solid #e0e0e0;
        border-radius: 0;
        display: flex;
        align-items: center;
        padding: 0 0 10rpx 0;
        
        .picker-text {
            font-size: 28rpx;
            color: #333;
        }
    }
}

.salary-row {
    display: flex;
    align-items: center;
    gap: 20rpx;
    
    .form-group {
        flex: 1;
        margin-bottom: 0;
    }
    
    .salary-separator {
        font-size: 32rpx;
        color: #666;
        margin-top: 40rpx;
    }
    
    .salary-input {
        text-align: center;
    }
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20rpx 30rpx;
    border-top: 1rpx solid #eee;
    
    .btn-group {
        display: flex;
        gap: 20rpx;
        
        .btn {
            flex: 1;
            height: 80rpx;
            border-radius: 12rpx;
            font-size: 32rpx;
            font-weight: 500;
            border: none;
            
            &.btn-cancel {
                background: #f5f5f5;
                color: #666;
            }
            
            &.btn-publish {
                background: #256BFA;
                color: #fff;
            }
        }
    }
}
</style>
