<template>
  <view class="success-container">
    <!-- 用户头像 -->
    <view class="avatar-container">
      <view class="avatar-circle"></view>
    </view>
    
    <!-- 面试结束提示 -->
    <view class="interview-status">
      <text class="status-text">AI面试已结束</text>
    </view>
    
    <!-- 提示信息 -->
    <view class="tips-container">
      <text class="tips-text">本次面试的全部环节已结束，非常感谢您的参与</text>
    </view>
    
    <!-- 底部按钮 -->
    <view class="btn-container">
      <button class="confirm-btn" @click="goBack">我知道了</button>
    </view>
  </view>
</template>

<script>
import { apiBaseUrl } from '@/common/config.js';
export default {
  data() {
    return {
      interviewInfo: {
        position: '前端岗位',
        startTime: '2024/06/28 14:48',
        endTime: '2024/06/28 16:47',
        company: '敏龙科技集团有限公司'
      }
    }
  },
  onLoad() {
    this.completeInterview()
  },
  methods: {
    async completeInterview() {
      try {
        const result = await uni.request({
          url: `${apiBaseUrl}/api/job/complete_interview`,
          method: 'POST',
          data: {
            "application_id": JSON.parse(uni.getStorageSync('appId')),
            "tenant_id": JSON.parse(uni.getStorageSync('userInfo')).tenant_id
          }
        });
        
        // if (result.statusCode === 200) {
        //   console.log('面试完成状态已更新');
        // } else {
        //   console.error('更新面试状态失败');
        // }
      } catch (error) {
       // console.error('请求失败:', error);
      }
    },
    goBack() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style>
.success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #ffffff;
  padding: 30rpx;
}

.avatar-container {
  margin-top: 100rpx;
  margin-bottom: 40rpx;
}

.avatar-circle {
  width: 180rpx;
  height: 180rpx;
  background-color: #f5f5f5;
  border-radius: 50%;
  position: relative;
}

.avatar-circle::after {
  content: '';
  position: absolute;
  bottom: -30rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 120rpx;
  height: 60rpx;
  background-color: #f5f5f5;
  border-radius: 60rpx 60rpx 0 0;
}

.interview-status {
  margin-top: 60rpx;
  margin-bottom: 20rpx;
}

.status-text {
  font-size: 36rpx;
  color: #003399;
  font-weight: normal;
}

.tips-container {
  padding: 0 60rpx;
  text-align: center;
  margin-bottom: 60rpx;
}

.tips-text {
  font-size: 28rpx;
  color: #999999;
  line-height: 1.5;
}

.btn-container {
  margin-top: 80rpx;
  width: 100%;
  padding: 0 40rpx;
}

.confirm-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #ffffff;
  color: #333333;
  border-radius: 45rpx;
  font-size: 32rpx;
  border: 1px solid #e0e0e0;
}
</style> 