<template>
	<view class="page">
		<u-navbar title="认证中心" :border-bottom="false" :background="bgc" back-icon-color="#000" title-color='#262B37'
			title-size='36' height='36' id="navbar" :custom-back="btnfh">
		</u-navbar>
		
		<view class="certification-center">
		  <!-- 认证项目列表 -->
		  <view class="certification-list">
		    <!-- 实名认证 -->
		    <view class="certification-item" @click="navigateTo('realName')">
		      <view class="item-left">
		        <view class="item-info">
		          <text class="item-title">实名认证</text>
		          <text class="item-desc">保障账户安全</text>
		        </view>
		      </view>
		      <view class="item-right" :class="{'verified': realNameStatus === 'verified'}">
		        <!-- <text>{{ realNameStatus === 'verified' ? '已认证' : '未认证' }}</text> -->
		        <uni-icons type="forward" size="16" color="#999"></uni-icons>
		      </view>
		    </view>
		
		    <!-- 驾驶证认证 -->
		<!--  <view class="certification-item" @click="navigateTo('driver')">
		      <view class="item-left">
		        <view class="item-info">
		          <text class="item-title">驾驶证认证</text>
		          <text class="item-desc">租车必备认证</text>
		        </view>
		      </view>
		      <view class="item-right" :class="{'verified': driverStatus === 'uploaded'}">
		        <uni-icons type="forward" size="16" color="#999"></uni-icons>
		      </view>
		    </view> -->
		  </view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      realNameStatus: 'verified', // verified, unverified
	  bgc: {
	  	backgroundColor: "#f7f7f7",
	  },
      studentStatus: 'uploaded', // uploaded, unuploaded
    }
  },
  methods: {
    navigateTo(type) {
      // 根据不同类型跳转到不同认证页面
      let url = '';
      switch(type) {
        case 'realName':
          url = '/page_user/shiming';
          break;
        case 'driver':
          url = '/page_user/renzheng/jiashizheng';
          break;
      }
      uni.navigateTo({
        url: url
      });
    }
  }
}
</script>

<style lang="scss">
.certification-center {
  padding: 30rpx;
  background-color: #f7f7f7;
  max-height: 100vh;
  
  .header {
    margin-bottom: 40rpx;
    
    .title {
      font-size: 44rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 10rpx;
    }
    
    .subtitle {
      font-size: 26rpx;
      color: #999;
    }
  }
  
  .certification-list {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  }
  
  .certification-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .item-left {
      display: flex;
      align-items: center;
      
      .item-icon {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
      }
      
      .item-info {
        display: flex;
        flex-direction: column;
        
        .item-title {
          font-size: 32rpx;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .item-desc {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
    
    .item-right {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #ff5a5f;
      
      &.verified {
        color: #09bb07;
      }
    }
  }
}
</style>