<template>
  <view class="my-container">
    <!-- 用户信息区域 -->
    <view class="user-info">
      <view class="floating-dots"></view>
      <view class="user-info-content" @click="handleLogin">
        <view class="avatar-wrap">
          <image class="avatar" src="/static/user.png" mode="aspectFill" />
        </view>
        <view class="info-content" v-if="userInfo.nickName">
          <text class="nickname">{{ userInfo.nickName }}</text>
          <text class="phone">{{ userInfo.phone }}</text>
        </view>
        <view class="info-content not-login" v-else>
          <text class="login-text">点击登录</text>
          <text class="login-desc">登录后享受更多服务</text>
        </view>
      </view>
      <view class="wave-decoration"></view>
    </view>

    <!-- 押金卡片 -->
    <view class="balance-card">
      <view class="balance-content">
        <text class="label">押金余额</text>
        <text class="amount">¥{{ deposit }}</text>
      </view>
      <view class="withdraw-btn" @click="navigateTo('/pages/deposit/index')">
        提现
        <view class="arrow"></view>
      </view>
    </view>

    <!-- 功能模块 -->
    <view class="function-list">
      <!-- 订单 -->
      <view class="function-item" @click="navigateTo('/pages/order/index')">
        <view class="item-left">
          <view class="icon-wrap order">
            <image src="/static/jl.png" mode="aspectFit" class="icon-image" />
          </view>
          <text class="title">租借记录</text>
        </view>
        <view class="arrow"></view>
      </view>

      <!-- 投诉建议 -->
      <view class="function-item" @click="navigateTo('/pages/feedback/index')">
        <view class="item-left">
          <view class="icon-wrap feedback">
            <image src="/static/complaint.png" mode="aspectFit" class="icon-image" />
          </view>
          <text class="title">投诉与建议</text>
        </view>
        <view class="arrow"></view>
      </view>

      <!-- 帮助中心 -->
      <view class="function-item" @click="navigateTo('/pages/help/index')">
        <view class="item-left">
          <view class="icon-wrap help">
            <image src="/static/hlep.png" mode="aspectFit" class="icon-image" />
          </view>
          <text class="title">帮助中心</text>
        </view>
        <view class="arrow"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      deposit: '0.00'
    }
  },
  onShow() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo) {
        this.userInfo = userInfo
      }
    },
    handleLogin() {
      if (!this.userInfo.nickName) {
        uni.navigateTo({
          url: '/pages/login/index'
        })
      }
    },
    navigateTo(url) {
      // 判断是否需要登录
      // if (!this.userInfo.nickName && url !== '/pages/help/index') {
      //   this.handleLogin()
      //   return
      // }
      uni.navigateTo({ url })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-container {
  min-height: 87.5vh;
  background: #f8f8f8;
  padding-bottom: env(safe-area-inset-bottom);

  .user-info {
    height: 360rpx;
    background: linear-gradient(135deg, #1976D2, #42A5F5);
    position: relative;
    overflow: hidden;

    &::before,
    &::after {
      content: '';
      position: absolute;
      background-repeat: no-repeat;
      opacity: 0.1;
    }

    &::before {
      width: 200rpx;
      height: 200rpx;
      left: -40rpx;
      top: -40rpx;
      background-image: radial-gradient(circle, #fff 2rpx, transparent 3rpx);
      background-size: 30rpx 30rpx;
      transform: rotate(30deg);
    }

    &::after {
      width: 300rpx;
      height: 300rpx;
      right: -60rpx;
      bottom: -60rpx;
      background: 
        radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 30%, transparent 30.5%),
        radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 20%, transparent 20.5%);
      background-size: 60rpx 60rpx;
      background-position: 0 0, 30rpx 30rpx;
      transform: rotate(-15deg);
    }

    .floating-dots {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;

      &::before,
      &::after {
        content: '';
        position: absolute;
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        background: rgba(255,255,255,0.3);
        animation: float 3s infinite ease-in-out;
      }

      &::before {
        top: 20%;
        right: 10%;
        animation-delay: -2s;
      }

      &::after {
        top: 50%;
        right: 20%;
        width: 8rpx;
        height: 8rpx;
        animation-delay: -1s;
      }
    }

    .user-info-content {
      position: relative;
      z-index: 2;
      padding: 60rpx 40rpx;
      display: flex;
      align-items: center;

      .avatar-wrap {
        width: 140rpx;
        height: 140rpx;
        border-radius: 70rpx;
        border: 6rpx solid rgba(255,255,255,0.3);
        overflow: hidden;
        box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.1),
                   0 0 0 6rpx rgba(255,255,255,0.1);
        margin-right: 40rpx;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          top: -10%;
          left: -10%;
          right: -10%;
          bottom: -10%;
          background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
          animation: shine 2s infinite;
        }
        
        .avatar {
          width: 100%;
          height: 100%;
          background: #fff;
        }
      }

      .info-content {
        flex: 1;

        &.not-login {
          .login-text {
            font-size: 40rpx;
            color: #fff;
            font-weight: 500;
            margin-bottom: 12rpx;
            display: block;
          }

          .login-desc {
            font-size: 28rpx;
            color: rgba(255,255,255,0.9);
            display: block;
          }
        }
      }
    }

    .wave-decoration {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 120rpx;
      background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCI+PHBhdGggZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjEpIiBkPSJNMCwyNjAuMjI3YzE3My42NjEsMCwzMjEuMTM3LDAsNDQyLjQyOCwwYzE4MS41MTcsMCwyODUuNjQ1LDAsMzk3LjU3MiwwQzk1Mi4zODksMjYwLjIyNywxMTQwLjI3MSwyNjAuMjI3LDE0NDAsMjYwLjIyN1YwSDBWMjYwLjIyN3oiLz48L3N2Zz4=') bottom/100% no-repeat;
      opacity: 0.8;
    }
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-20rpx) scale(1.1);
    }
  }

  @keyframes shine {
    0% {
      transform: translateX(-100%) rotate(45deg);
    }
    80%, 100% {
      transform: translateX(100%) rotate(45deg);
    }
  }

  .balance-card {
    margin: -60rpx 30rpx 30rpx;
    background: #fff;
    border-radius: 24rpx;
    padding: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 3;
    box-shadow: 0 8rpx 32rpx rgba(25,118,210,0.1);

    .balance-content {
      .label {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 12rpx;
        display: block;
      }

      .amount {
        font-size: 52rpx;
        color: #1976D2;
        font-weight: bold;
      }
    }

    .withdraw-btn {
      padding: 20rpx 36rpx;
      background: linear-gradient(135deg, #1976D2, #42A5F5);
      color: #fff;
      border-radius: 36rpx;
      font-size: 30rpx;
      display: flex;
      align-items: center;
      box-shadow: 0 4rpx 12rpx rgba(25,118,210,0.2);
      
      &:active {
        transform: scale(0.98);
      }
      
      .arrow {
        width: 12rpx;
        height: 12rpx;
        border-top: 3rpx solid #fff;
        border-right: 3rpx solid #fff;
        transform: rotate(45deg);
        margin-left: 12rpx;
      }
    }
  }

  .function-list {
    margin: 0 30rpx;
    background: #fff;
    border-radius: 24rpx;
    padding: 10rpx 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);

    .function-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx 20rpx;
      border-bottom: 1rpx solid #f5f5f5;
      transition: all 0.3s;

      &:active {
        background: #f9f9f9;
      }

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

      .item-left {
        display: flex;
        align-items: center;

        .icon-wrap {
          width: 80rpx;
          height: 80rpx;
          margin-right: 24rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 20rpx;
          background: #F5F9FF;

          .icon-image {
            width: 44rpx;
            height: 44rpx;
          }
        }

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

      .arrow {
        width: 16rpx;
        height: 16rpx;
        border-top: 3rpx solid #999;
        border-right: 3rpx solid #999;
        transform: rotate(45deg);
      }
    }
  }
}
</style> 