<template>
  <view class="job-detail-container">
    <!-- 顶部信息区域 -->
    <view class="job-header">
      <view class="job-title">{{ jobDetail.title }}</view>
      <view class="job-salary">{{ jobDetail.salary }}</view>
      <view class="job-department">{{ jobDetail.department }}</view>
      
      <view class="job-requirements">
        <view class="requirement-item">
          <view class="dot"></view>
          <text>{{ jobDetail.location }}</text>
        </view>
        <view class="requirement-item">
          <view class="time-icon"></view>
          <text>{{ jobDetail.experience }}</text>
        </view>
      </view>
    </view>
    
    <!-- 工作地点区域 -->
    <view class="section">
      <view class="section-title">工作地点</view>
      <view class="map-container">
        <image class="map-image" src="/static/images/map.png" mode="aspectFill"></image>
        <view class="map-time">预计14:32到达</view>
        <view class="refresh-icon">
          <text class="iconfont icon-refresh"></text>
        </view>
      </view>
    </view>
    
    <!-- 福利待遇区域 -->
    <view class="section">
      <view class="section-title">福利待遇</view>
      <view class="benefits-list">
        <view class="benefit-tag" v-for="(benefit, index) in jobDetail.benefits" :key="index">{{ benefit }}</view>
      </view>
    </view>
    
    <!-- 岗位介绍区域 -->
    <view class="section">
      <view class="section-title">岗位介绍</view>
      <view class="job-description">
        <view class="description-subtitle">{{ jobDetail.description[0].subtitle }}</view>
        <view class="description-content">
          <view class="description-item" v-for="(item, index) in jobDetail.description[0].items" :key="index">
            <view class="blue-dot"></view>
            <text>{{ item }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 右侧开始面试按钮 -->
    <view class="interview-button" @click="startInterview">
      <text>开始面试</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      jobDetail: {
        title: '产品经理',
        salary: '20k-30k/月',
        department: '产品研发部 全职',
        location: '浙江线',
        experience: '5-8年',
        benefits: ['五险一金', '节日福利', '股权激励'],
        description: [
          {
            subtitle: '战略规划与执行',
            items: [
              '负责敏锐的行业热点感受性，密切追踪行业动态与趋势，为企业战略决策提供参考。',
              '结心制定企业战略规划，将长期愿景转化为可操作的战略目标，并有效分解为各阶段具体任务。'
            ]
          }
        ]
      }
    }
  },
  onLoad() {
    // 尝试从本地存储获取职位详情
    try {
      const jobDetailStr = uni.getStorageSync('currentJobDetail');
      if (jobDetailStr) {
        const jobData = JSON.parse(jobDetailStr);
        // 这里可以根据实际数据结构进行处理
        // 如果后端返回的数据结构与页面需要的不一致，可以在这里进行转换
        this.jobDetail = {
          ...this.jobDetail,
          title: jobData.title || this.jobDetail.title,
          salary: jobData.salary || this.jobDetail.salary,
          department: jobData.department || this.jobDetail.department,
          location: jobData.location || this.jobDetail.location,
          experience: jobData.experience || this.jobDetail.experience,
          benefits: jobData.benefits || this.jobDetail.benefits,
          description: jobData.description || this.jobDetail.description
        };
      }
    } catch (e) {
      console.error('获取职位详情失败:', e);
    }
  },
  methods: {
    startInterview() {
      // 开始面试的逻辑
      uni.navigateTo({
        url: '/pages/camera/camera'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.job-detail-container {
  padding: 20rpx;
  position: relative;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.job-header {
  padding: 20rpx 0;
}

.job-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.job-salary {
  font-size: 32rpx;
  color: #ff6b00;
  margin-bottom: 10rpx;
}

.job-department {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.job-requirements {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.requirement-item {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
  font-size: 26rpx;
  color: #666;
}

.dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #0052d9;
  margin-right: 10rpx;
}

.time-icon {
  width: 26rpx;
  height: 26rpx;
  background-color: #999;
  border-radius: 50%;
  margin-right: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18rpx;
  color: #fff;
}

.section {
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.map-container {
  position: relative;
  border-radius: 16rpx;
  overflow: hidden;
}

.map-image {
  width: 100%;
  height: 300rpx;
  border-radius: 16rpx;
}

.map-time {
  position: absolute;
  left: 20rpx;
  bottom: 20rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 24rpx;
  padding: 6rpx 12rpx;
  border-radius: 6rpx;
}

.refresh-icon {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  width: 60rpx;
  height: 60rpx;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.benefits-list {
  display: flex;
  flex-wrap: wrap;
}

.benefit-tag {
  background-color: #f5f5f5;
  color: #666;
  font-size: 26rpx;
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

.description-subtitle {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.description-content {
  padding-left: 10rpx;
}

.description-item {
  display: flex;
  margin-bottom: 20rpx;
}

.blue-dot {
  min-width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #0052d9;
  margin-right: 10rpx;
  margin-top: 12rpx;
}

.description-item text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.interview-button {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #0052d9;
  color: #fff;
  writing-mode: vertical-lr;
  padding: 30rpx 20rpx;
  font-size: 32rpx;
  border-top-left-radius: 16rpx;
  border-bottom-left-radius: 16rpx;
}
</style> 