<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="https://data.qicai321.com/minlong/6be6ec51-d4a2-4f2b-9bfc-23e046a3db37.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>
	import { apiBaseUrl } from '@/common/config.js';
	import { applyJob } from '@/api/user.js';
export default {
  data() {
    return {
      jobDetail: {
        title: '',
        salary: '',
        department: '',
        location: '',
        experience: '',
        benefits: [],
        description: [
          {
            subtitle: '岗位要求',
            items: []
          }
        ]
      },
      selectedJobId: null,
      jobId: null
    }
  },
  onLoad(options) {
    this.jobId = options.id;
    this.getJobDetail(options.id);

    // 尝试从本地存储获取职位详情
    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: {
    async getJobDetail(jobId) {
      try {
        const { data } = await uni.request({
          url: `${apiBaseUrl}/api/mini/job/detail?id=${jobId}&tenant_id=1`,
          method: 'GET',
        });
        
        if (data.code === 2000) {
          // 将API返回的数据映射到页面所需的格式
          this.jobDetail = {
            title: data.data.title || '',
            salary: data.data.salary_range ? `${data.data.salary_range}/月` : '',
            department: `${data.data.department || ''} ${data.data.job_type === 1 ? '全职' : '兼职'}`,
            location: data.data.location || '',
            experience: data.data.work_experience_required || '不限',
            benefits: data.data.competency_tags || ['五险一金', '带薪年假', '定期体检'],
            description: [
              {
                subtitle: '岗位要求',
                items: [
                  data.data.requirements || '',
                  data.data.description || ''
                ].filter(item => item) // 过滤掉空值
              }
            ]
          };
        } else {
          uni.showToast({
            title: '获取职位详情失败',
            icon: 'none'
          });
        }
      } catch (e) {
        console.error('获取职位详情失败:', e);
        uni.showToast({
          title: '获取职位详情失败',
          icon: 'none'
        });
      }
    },
    checkLogin() {
      const userInfo = uni.getStorageSync('userInfo');
      if (!userInfo) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        });
        return false;
      }
      return true;
    },
    async startInterview() {
      if (!this.checkLogin()) {
        return;
      }

      try {
        // 保存所选职位信息
        uni.setStorageSync('selectedJob', JSON.stringify(this.jobDetail));
        
        const userInfo = JSON.parse(uni.getStorageSync('userInfo'));
        const response = await applyJob({
          job_id: this.jobId,
          tenant_id: 1,
          openid: userInfo.openid
        });

        if (response && response.id) {
          // 保存应用ID到本地
          uni.setStorageSync('appId', response.id);
          
          // 更新userInfo对象
          try {
            userInfo.appId = response.id;
            uni.setStorageSync('userInfo', JSON.stringify(userInfo));
          } catch (e) {
            console.error('更新用户信息失败:', e);
          }

          // 导航到摄像头页面
          uni.navigateTo({
            url: '/pages/Personal/Personal',
            fail: (err) => {
              console.error('页面跳转失败:', err);
              uni.showToast({
                title: '页面跳转失败',
                icon: 'none'
              });
            }
          });
        }
      } catch (err) {
        console.error('申请职位失败:', err);
        uni.showToast({
          title: '申请职位失败，请重试',
          icon: 'none'
        });
      }
    }
  }
}
</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: #0039b3;
  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: #0039b3;
  color: #fff;
  writing-mode: vertical-lr;
  padding: 30rpx 20rpx;
  font-size: 32rpx;
  border-top-left-radius: 16rpx;
  border-bottom-left-radius: 16rpx;
}
</style> 