<template>
  <view class="page-container">
    <view class="top-section">
      <!-- 用户信息 -->
      <view class="user-info">
        <view class="avatar">
          <view class="avatar-placeholder">📄</view>
        </view>
        <view class="user-desc">注册会员8709745760778985472</view>
      </view>

      <!-- 会员卡片 -->
      <view class="member-card">
        <view class="card-header">
          <view class="card-name">江行知</view>
          <view class="bind-btn">绑定学员 ⇄</view>
        </view>
        <view class="card-id">证件号：360681201804040811</view>
        
        <view class="card-func">
          <view class="func-item" @click="goToInfo">
            <view class="func-icon">⿱</view>
            <view class="func-text">人员信息</view>
          </view>
          <view class="func-item">
            <view class="func-icon">✓</view>
            <view class="func-text">参赛能力认证</view>
          </view>
          <view class="func-item">
            <view class="func-icon">🏆</view>
            <view class="func-text">成绩查询</view>
          </view>
          <view class="func-item">
            <view class="func-icon">↻</view>
            <view class="func-text">参赛记录</view>
          </view>
        </view>
      </view>
    </view>

    <view class="bottom-section">
      <view class="info-title">
        <view class="title-line"></view>
        <text>人员信息</text>
      </view>

      <view class="info-list">
        <view class="info-item">
          <view class="item-label">姓名</view>
          <view class="item-value">江行知</view>
        </view>
        <view class="info-item">
          <view class="item-label">国籍</view>
          <view class="item-value">中国</view>
        </view>
        <view class="info-item">
          <view class="item-label">证件类型</view>
          <view class="item-value">身份证</view>
        </view>
        <view class="info-item">
          <view class="item-label">身份证号</view>
          <view class="item-value">360681201804040811</view>
        </view>
        <view class="info-item">
          <view class="item-label">生日</view>
          <view class="item-value">2018-04-04</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const userInfo = ref({
  memberNo: '8709745760778985472',
  name: '江行知',
  idCard: '360681201804040811',
  nationality: '中国',
  idType: '身份证',
  birthday: '2018-04-04'
})

const goToInfo = () => {
  console.log('跳转到人员信息页')
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF9E8 0%, #FFFFFF 100%);
  padding: 0 30rpx;
  box-sizing: border-box;
}

.top-section {
  padding-top: 40rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.more-btn {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-left: auto;
  background: #FFFFFF;
  padding: 10rpx 20rpx;
  border-radius: 40rpx;
}

.dots {
  font-size: 32rpx;
  color: #666;
  line-height: 1;
}

.circle {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid #666;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background: #666;
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 30rpx;
  margin-bottom: 40rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  border: 4rpx solid #E8E8E8;
}

.avatar-placeholder {
  color: #999;
}

.user-desc {
  font-size: 36rpx;
  color: #333;
  font-weight: 500;
}

/* 会员卡片 */
.member-card {
  background: linear-gradient(135deg, #F7E090 0%, #E6C560 100%);
  border-radius: 24rpx;
  padding: 40rpx;
  position: relative;
  overflow: hidden;
  margin-bottom: 30rpx;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml,%3Csvg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0,50 Q250,20 500,50 T1000,50" fill="none" stroke="%23E6C560" stroke-width="2" opacity="0.3"/%3E%3C/svg%3E');
    background-size: cover;
    z-index: 0;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  position: relative;
  z-index: 1;
}

.card-name {
  font-size: 40rpx;
  font-weight: bold;
  color: #222;
}

.bind-btn {
  font-size: 28rpx;
  color: #666;
}

.card-id {
  font-size: 28rpx;
  color: #555;
  margin-bottom: 40rpx;
  position: relative;
  z-index: 1;
}

/* 功能入口 */
.card-func {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.func-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
  cursor: pointer;
}

.func-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #333;
}

.func-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

/* ========== 下半部分：人员信息 ========== */
.bottom-section {
  background: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  padding: 30rpx;
  margin-top: 20rpx;
}

.info-title {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 30rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

.title-line {
  width: 12rpx;
  height: 32rpx;
  background: #E6C560;
  border-radius: 4rpx;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #F0F0F0;

  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.item-label {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.item-value {
  font-size: 32rpx;
  color: #999;
}

/* 底部固定按钮（可选） */
.fixedBottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background: #FFFFFF;
  border-top: 1rpx solid #F0F0F0;
}

.btn-red {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: #C40F18;
  color: #FFFFFF;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 500;
  border: none;
}
</style>