<template>
  <view class="interview-container">
    <!-- 顶部导航栏 -->
    <!-- 面试信息 -->
    <view class="interview-info">
      <view class="info-item">
        <text class="label">面试岗位:</text>
        <text class="value">前端岗位</text>
      </view>
      <view class="info-item">
        <text class="label">面试岗位:</text>
        <text class="value">2024年06月28日 14:48</text>
      </view>
      <view class="info-item">
        <text class="value">2024年06月28日 16:47</text>
      </view>
      <view class="info-item">
        <text class="label">公司全称:</text>
        <text class="value">敏龙科技集团有限公司</text>
      </view>
    </view>
    
    <!-- 表单信息 -->
    <view class="form-container">
      <view class="form-title">填写报名信息</view>
      <view class="form-subtitle">如确认报名（此次面试），请填写以下信息</view>
      
      <view class="form-item">
        <text class="form-label">姓名 <text class="required">*</text></text>
        <input type="text" v-model="formData.name" placeholder="请输入姓名" />
      </view>
      
      <view class="form-item">
        <text class="form-label">手机号 <text class="required">*</text></text>
        <input type="number" v-model="formData.phone" placeholder="请输入手机号" maxlength="11" />
      </view>
      
      <view class="form-item">
        <text class="form-label">邮箱</text>
        <input type="text" v-model="formData.email" placeholder="请输入邮箱" />
      </view>
      
      <button class="submit-btn" @click="submitForm">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        phone: '',
        email: ''
      }
    }
  },
  methods: {
    goHome() {
      uni.navigateBack({
        delta: 1
      });
    },
    submitForm() {
      // 表单验证
      if (!this.formData.name.trim()) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        });
        return;
      }
      
      if (!this.formData.phone.trim()) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        });
        return;
      }
      
      if (!/^1\d{10}$/.test(this.formData.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }
      
      if (this.formData.email && !/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(this.formData.email)) {
        uni.showToast({
          title: '请输入正确的邮箱',
          icon: 'none'
        });
        return;
      }
      
      // 提交表单数据
      console.log('提交的表单数据:', this.formData);
      
      // 模拟提交成功
      uni.showLoading({
        title: '提交中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '提交成功',
          icon: 'success',
          duration: 1500,
          success: () => {
            // 修改为跳转到成功页面
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/success/success',  // 修改为成功页面的路径
                fail: (err) => {
                  console.error('页面跳转失败:', err);
                  uni.showToast({
                    title: '页面跳转失败',
                    icon: 'none'
                  });
                }
              });
            }, 1500);
          }
        });
      }, 1000);
    }
  }
}
</script>

<style>
.interview-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #6c5ce7;
  color: #fff;
}

.scan-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ff9f43;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
}

.interview-info {
  background-color: #6c5ce7;
  color: #fff;
  padding: 20rpx 30rpx 40rpx;
}

.info-item {
  margin: 10rpx 0;
  font-size: 28rpx;
}

.label {
  margin-right: 10rpx;
}

.form-container {
  flex: 1;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  margin-top: -20rpx;
  padding: 40rpx 30rpx;
}

.form-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.form-subtitle {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.required {
  color: #ff4757;
}

input {
  width: 100%;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #6c5ce7;
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
  margin-top: 60rpx;
}
</style> 