<template>
  <view class="page flex-col">
    <!-- 头部导航 -->
    <view class="flex-col">
      <view class="flex-row">
        <view class="flex-row">
          <text class="header-title">分销中心</text>
        </view>
      </view>
      
      <!-- 用户信息 -->
      <view class="user-info">
        <image class="avatar" :src="userAvatar" mode="aspectFill"></image>
        <view class="user-detail">
          <view class="flex-row" style="align-items: center;">
            <text class="username">Hi,{{userName}}</text>
          </view>
          <view class="flex-row" style="align-items: center;">
            <text class="user-id">ID: {{userId}}</text>
            <text class="invite-code">复查邀请码</text>
          </view>
        </view>
        <view class="share-btn" @tap="share">
          <image class="share-icon" src="/static/images/share.png" mode="aspectFill"></image>
          <text class="share-text">分享</text>
        </view>
      </view>
    </view>
    
    <!-- 佣金统计 -->
    <view class="commission-box flex-col">
      <view class="flex-row">
        <view class="commission-item">
          <text class="commission-label">累计佣金(元)</text>
          <view>
            <text class="commission-value">{{totalCommission}}</text>
          </view>
        </view>
        
        <view class="commission-item">
          <text class="commission-label">分销订单(笔)</text>
          <view>
            <text class="commission-value">{{orderCount}}</text>
          </view>
        </view>
      </view>
      
      <!-- 申请分销商按钮 -->
      <view class="apply-btn" @tap="goToApplyForm">
        <text>申请成为分销商</text>
      </view>
    </view>
    
    <!-- 佣金明细 -->
    <view class="details-list flex-col">
      <view class="details-title">
        <text>佣金明细</text>
        <text style="margin-top: 6rpx; font-size: 22rpx; color: #999999;">佣金将于每月15日结算至您的银行卡账号中</text>
      </view>
      
      <!-- 佣金明细列表 -->
      <view v-if="commissionList.length > 0">
        <view 
          v-for="(item, index) in commissionList" 
          :key="index"
          class="detail-item"
          @tap="addCommission"
        >
          <view class="detail-left">
            <image class="user-avatar" :src="item.avatar" mode="aspectFill"></image>
            <view class="detail-info">
              <text class="detail-name">{{item.name}}</text>
              <text class="detail-date">下单日期: {{item.date}}</text>
            </view>
          </view>
          <view class="detail-amount">
            <text class="add-icon">+</text>
            <text>{{item.amount}}</text>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-else class="empty-box">
        <image class="empty-icon" src="/static/images/empty-commission.png" mode="aspectFill"></image>
        <text class="empty-text">暂无佣金明细</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onLoad } from '@dcloudio/uni-app'
import { getDistributorInfo, getCommissionList } from '@/api/distributor'

const main = useMainStore()
const { isLogin } = storeToRefs(main)

// 用户信息
const userAvatar = ref('/static/images/avatar.png')
const userName = ref('爱喝汤的小力')
const userId = ref('1234567890')

// 佣金统计
const totalCommission = ref('12000.00')
const orderCount = ref('1')

// 佣金明细列表
const commissionList = ref([
  {
    avatar: '/static/images/avatar.png',
    name: 'VVV用户昵称',
    date: '2023-09-05 09:05:47',
    amount: '78.0'
  },
  {
    avatar: '/static/images/avatar.png',
    name: 'VVV用户昵称',
    date: '2023-09-05 09:05:47',
    amount: '78.0'
  }
])

// 页面加载
onLoad(() => {
  if(!isLogin.value) {
    uni.navigateTo({url: '/pages/components/pages/login/login'})
  }
  getCommissionData()
})

// 获取佣金数据
const getCommissionData = () => {
  uni.showLoading({
    title: '加载中...'
  })
  
  // 获取分销商信息
  getDistributorInfo().then(res => {
    if (res.code === 0 || res.code === 200) {
      if (res.data) {
        userName.value = res.data.name || '爱喝汤的小力'
        userId.value = res.data.userId || '1234567890'
        totalCommission.value = res.data.totalCommission || '0.00'
        orderCount.value = res.data.orderCount || '0'
      }
      
      // 获取佣金明细列表
      return getCommissionList({ page: 1, limit: 10 })
    } else {
      uni.hideLoading()
      uni.showToast({
        title: res.msg || '获取数据失败',
        icon: 'none'
      })
    }
  }).then(res => {
    uni.hideLoading()
    if (res && (res.code === 0 || res.code === 200)) {
      if (res.data && res.data.records && res.data.records.length > 0) {
        commissionList.value = res.data.records.map(item => {
          return {
            avatar: item.avatar || '/static/images/avatar.png',
            name: item.userName || 'VVV用户昵称',
            date: item.createTime || '2023-09-05 09:05:47',
            amount: item.amount || '0.00'
          }
        })
      }
    }
  }).catch(err => {
    uni.hideLoading()
    console.error('获取分销数据失败', err)
  })
}

// 分享
const share = () => {
  uni.showToast({
    title: '分享功能',
    icon: 'none'
  })
}

// 添加佣金（演示用）
const addCommission = () => {
  uni.showToast({
    title: '查看佣金详情',
    icon: 'none'
  })
}

// 跳转到分销商申请表单
const goToApplyForm = () => {
  uni.navigateTo({
    url: '/pages/components/pages/fenxiao/fenxiaorequestform'
  })
}
</script>

<style scoped>
@import './common.css';

.apply-btn {
  background-color: #52AC41;
  border-radius: 30rpx;
  padding: 15rpx 0;
  margin: 20rpx 30rpx 0;
  text-align: center;
}

.apply-btn text {
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 500;
}
</style>
