<template>
  <view class="personal-page">
    <!-- 头部用户信息区域 -->
    <view class="header-section">
      <view class="user-info">
        <view class="user-name">潘1陈1勇</view>
        <view class="invite-code">
          <text>邀请码：</text>
          <text class="code">xmrkqq</text>
          <text class="copy-btn">📋</text>
        </view>
      </view>
      <image class="header-icon" src="/static/images/kong1.png" mode="aspectFit"></image>
    </view>
    
    <!-- 买卖功能区 -->
    <view class="trade-section">
      <!-- 买方功能 -->
      <view class="trade-block">
        <view class="trade-title">买方</view>
        <view class="trade-functions">
          <view class="trade-function" @click="goToBuyerWarehouse">
            <image class="function-icon" src="/static/images/huo.png" mode="aspectFit"></image>
            <text class="function-text">买方仓库</text>
          </view>
          <view class="trade-function" @click="goToTrade()">
            <image class="function-icon" src="/static/images/kong1.png" mode="aspectFit"></image>
            <text class="function-text">交易中</text>
          </view>
          <view class="trade-function" @click="goToCompleted()">
            <image class="function-icon" src="/static/images/kong2.png" mode="aspectFit"></image>
            <text class="function-text">已完成</text>
          </view>
        </view>
      </view>
      
      <!-- 卖方功能 -->
      <view class="trade-block">
        <view class="trade-title">卖方</view>
        <view class="trade-functions">
          <view class="trade-function" @click="goToSellerWarehouse">
            <image class="function-icon" src="/static/images/huo.png" mode="aspectFit"></image>
            <text class="function-text">卖方仓库</text>
          </view>
          <view class="trade-function" @click="goToTrade" data-from="seller">
            <image class="function-icon" src="/static/images/kong1.png" mode="aspectFit"></image>
            <text class="function-text">交易中</text>
          </view>
          <view class="trade-function" @click="goToCompleted" data-from="seller">
            <image class="function-icon" src="/static/images/kong2.png" mode="aspectFit"></image>
            <text class="function-text">已完成</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 金额信息区 -->
    <view class="amount-section">
      <view class="amount-row">
        <view class="amount-item" @click="goToBalance">
          <text>余额:0.000</text>
          <text class="arrow">›</text>
        </view>
        <view class="amount-item" @click="goToCoupon">
          <text>优惠券:0.000</text>
          <text class="arrow">›</text>
        </view>
      </view>
      <view class="amount-row">
        <view class="amount-item" @click="goToPrize">
          <text>我的奖金:289.377</text>
          <text class="arrow">›</text>
        </view>
        <view class="amount-item" @click="goToPromote">
          <text>推广奖金:0.000</text>
          <text class="arrow">›</text>
        </view>
      </view>
    </view>
    
    <!-- 功能菜单区 -->
    <view class="menu-section">
      <view class="menu-item" @click="goToInvite">
        <image class="menu-icon" src="/static/images/kong3.png" mode="aspectFit"></image>
        <text>邀请好友</text>
        <text class="arrow">›</text>
      </view>
      <view class="menu-item" @click="goToMyFans">
        <image class="menu-icon" src="/static/images/kong4.png" mode="aspectFit"></image>
        <text>我的粉丝</text>
        <text class="arrow">›</text>
      </view>
      <view class="menu-item" @click="goToPayee">
        <image class="menu-icon" src="/static/images/kong5.png" mode="aspectFit"></image>
        <text>收款方式</text>
        <text class="arrow">›</text>
      </view>
      <view class="menu-item" @click="goToAgreement">
        <image class="menu-icon" src="/static/images/kong6.png" mode="aspectFit"></image>
        <text>我的合同</text>
        <text class="arrow">›</text>
      </view>
      <view class="menu-item" @click="goToSetting">
        <image class="menu-icon" src="/static/images/kong7.png" mode="aspectFit"></image>
        <text>设置</text>
        <text class="arrow">›</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        nickname: '潘1陈1勇',
        inviteCode: 'xmrkqq'
      },
      amounts: {
        balance: '0.000',
        coupon: '0.000',
        prize: '289.377',
        promote: '0.000'
      }
    }
  },
  
  onShow() {
    // 登录状态判断已移至API调用中实现
    // 实际项目中可以在此直接调用接口加载用户信息，无需提前判断token
    // this.loadUserInfo();
  },
  
  methods: {
    // 登录状态判断已移至API调用中实现
    // 移除了checkLogin方法，避免重复判断
    
    // 复制邀请码
    copyInviteCode() {
      uni.setClipboardData({
        data: this.userInfo.inviteCode,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          });
        }
      });
    },
    
    // 买方相关功能
    goToBuyerWarehouse() {
      // 导航到买方仓库页面
      // cate=1 表示买方仓库(我购买的), type=1 表示寄卖中/交易中
      uni.navigateTo({
        url: '/pages/sub-pages/rushing-order/index?cate=1&type=1'
      });
    },
    
    // 卖方相关功能
    goToSellerWarehouse() {
      // 导航到卖方仓库页面
      // cate=2 表示卖方仓库(我寄卖的), type=1 表示寄卖中/交易中
      uni.navigateTo({
        url: '/pages/sub-pages/rushing-order/index?cate=2&type=1'
      });
    },
    
    // 交易中
    goToTrade(e) {
      // 导航到交易中页面
      // 通过事件对象获取data-from属性，判断是买方还是卖方进入
      const fromSeller = e && e.currentTarget && e.currentTarget.dataset && e.currentTarget.dataset.from === 'seller';
      // cate=1 表示买方, cate=2 表示卖方, type=1 表示寄卖中/交易中
      uni.navigateTo({
        url: `/pages/sub-pages/rushing-order/index?cate=${fromSeller ? 2 : 1}&type=1`
      });
    },
    
    // 已完成
    goToCompleted(e) {
      // 导航到已完成页面
      // 通过事件对象获取data-from属性，判断是买方还是卖方进入
      const fromSeller = e && e.currentTarget && e.currentTarget.dataset && e.currentTarget.dataset.from === 'seller';
      // cate=1 表示买方, cate=2 表示卖方, type=2 表示已完成
      uni.navigateTo({
        url: `/pages/sub-pages/rushing-order/index?cate=${fromSeller ? 2 : 1}&type=2`
      });
    },
    
    // 余额
    goToBalance() {
      uni.navigateTo({
        url: '/pages/sub-pages/balance/index'
      });
    },
    
    // 优惠券
    goToCoupon() {
      // 导航到优惠券页面
    },
    
    // 我的奖金
    goToPrize() {
      // 导航到奖金页面
    },
    
    // 推广奖金
    goToPromote() {
      uni.navigateTo({
        url: '/pages/sub-pages/promote-prize/index'
      });
    },
    
    // 邀请好友
    goToInvite() {
      uni.navigateTo({
        url: '/pages/sub-pages/invite/index'
      });
    },
    
    // 我的粉丝
    goToMyFans() {
      uni.navigateTo({
        url: '/pages/sub-pages/my-fans/index'
      });
    },
    
    // 收款方式
    goToPayee() {
      uni.navigateTo({
        url: '/pages/sub-pages/my-payee/index'
      });
    },
    
    // 我的合同
    goToAgreement() {
      uni.navigateTo({
        url: '/pages/sub-pages/webview/sign'
      });
    },
    
    // 设置
    goToSetting() {
      uni.navigateTo({
        url: '/pages/sub-pages/setting/index'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.personal-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx; /* 为底部导航栏留出空间 */
}

/* 头部用户信息区域 */
.header-section {
  background-color: #f44336;
  padding: 40rpx 30rpx 60rpx;
  margin-bottom: 60rpx;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .user-info {
    flex: 1;
    
    .user-name {
      font-size: 42rpx;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 15rpx;
    }
    
    .invite-code {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #ffffff;
      opacity: 0.9;
      
      .code {
        color: #ffffff;
        font-weight: 500;
        margin: 0 10rpx;
      }
      
      .copy-btn {
        font-size: 28rpx;
        margin-left: 5rpx;
      }
    }
  }
  
  .header-icon {
    width: 120rpx;
    height: 120rpx;
  }
}

/* 买卖功能区 */
.trade-section {
  margin: -30rpx 30rpx 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  
  .trade-block {
    padding: 20rpx 30rpx;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .trade-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 20rpx;
    }
    
    .trade-functions {
      display: flex;
      justify-content: space-between;
      
      .trade-function {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        
        .function-icon {
          width: 60rpx;
          height: 60rpx;
          margin-bottom: 10rpx;
        }
        
        .function-text {
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
  }
}

/* 金额信息区 */
.amount-section {
  margin: 0 30rpx 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  padding: 1px;
  
  .amount-row {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  .amount-item {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    font-size: 28rpx;
    color: #333333;
    border-right: 1px solid #f0f0f0;
    
    &:nth-child(2) {
      border-right: none;
    }
    
    .arrow {
      font-size: 40rpx;
      color: #cccccc;
    }
  }
}

/* 功能菜单区 */
.menu-section {
  margin: 0 30rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  
  .menu-item {
    display: flex;
    align-items: center;
    padding: 35rpx 30rpx;
    border-bottom: 1px solid #f0f0f0;
    font-size: 28rpx;
    color: #333333;
    
    &:last-child {
      border-bottom: none;
    }
    
    .menu-icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 20rpx;
    }
    
    .arrow {
      margin-left: auto;
      font-size: 40rpx;
      color: #cccccc;
    }
  }
}
</style>

