<template>
  <view class="orders-page">
    <!-- 橙色头部 -->
    <view class="header-section">
      <view class="header-content">
        <view class="header-icon" @click="goBack">
          <text class="iconfont icon-fanhui"></text>
        </view>
        <text class="header-title">我的订单</text>
        <text class="header-menu"></text>
      </view>
    </view>
    
    <!-- 状态标签栏 -->
    <view class="stats-bar">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="stat-item"
        :class="{ 'active': currentTab === index }"
        @click="switchTab(index)"
      >
        <view class="stat-number-wrapper">
          <text class="stat-number" :class="{ 'active': currentTab === index }">{{ tab.count || 0 }}</text>
          <view v-if="currentTab === index" class="stat-underline"></view>
        </view>
        <text class="stat-text" :class="{ 'active': currentTab === index }">{{ tab.name }}</text>
      </view>
    </view>

    <!-- 订单列表 -->
    <scroll-view 
      class="orders-list" 
      scroll-y
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view v-if="orderList.length > 0" class="list-container">
        <view 
          v-for="(order, index) in orderList" 
          :key="order.id"
          class="order-item"
          @click="goToDetail(order.orderId)"
        >
          <!-- 订单头部：日期和状态 -->
          <view class="order-header">
            <text class="order-time">{{ order.createTime }}</text>
            <text class="order-status" :style="{ color: getStatusColor(order.status, order.paid) }">
              {{ order.status_text }}
            </text>
          </view>

          <!-- 商品信息列表 -->
          <view class="order-content">
            <view 
              v-for="(goods, gIndex) in order.orderInfoList" 
              :key="gIndex"
              class="goods-row"
            >
              <image v-if="goods.image" class="goods-image" :src="goods.image" mode="aspectFill"></image>
              <view class="goods-info">
                <text class="goods-name">{{ goods.storeName || goods.productName }}</text>
                <view class="goods-price-row">
                  <text class="goods-points">{{ formatPoints(goods.integral || goods.vipPrice || goods.price) }}积分</text>
                  <text class="goods-quantity">x{{ goods.cartNum }}</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 订单汇总 -->
          <view class="order-summary">
            <text class="summary-text">共{{ order.quantity }}件商品，总金额</text>
            <text class="summary-points">{{ formatPoints(order.points) }}积分</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else-if="!loading && isShow" class="empty-state">
        <image class="empty-image" src="/static/images/empty.png" mode="aspectFit"></image>
        <text class="empty-text">暂无订单</text>
        <button class="empty-btn" @click="goToShop">去逛逛</button>
      </view>

      <!-- 加载更多 -->
      <view v-if="orderList.length > 0" class="load-more">
        <text v-if="loading" class="load-text">加载中...</text>
        <text v-else-if="noMore" class="load-text">我也是有底线的</text>
      </view>
    </scroll-view>
    
    <!-- 底部导航栏 -->
    <view class="bottom-tabbar safe-area-inset-bottom">
      <view class="tab-item" @click="goToShop">
        <image class="tab-icon" src="/static/tabBar/home.png" mode="aspectFit"></image>
        <text class="tab-text">积分兑换</text>
      </view>
      <view class="tab-item" @click="goToCart">
        <view class="tab-icon-wrap">
          <image class="tab-icon" src="/static/tabBar/cart.png" mode="aspectFit"></image>
          <view class="cart-badge" v-if="cartCount > 0">
            <text>{{ cartCount > 99 ? '99+' : cartCount }}</text>
          </view>
        </view>
        <text class="tab-text">购物车</text>
      </view>
      <view class="tab-item active">
        <image class="tab-icon" src="/static/tabBar/order-active.png" mode="aspectFit"></image>
        <text class="tab-text active">订单</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getOrderList, orderData, orderCancel, orderTake, orderDel, getCartCounts } from '@/api/order.js';
import { mapGetters } from 'vuex';
import { toLogin } from '@/libs/login.js';

export default {
  data() {
    return {
      // 状态标签: type对应后端参数
      // -99-全部 0-待兑换(待付款) 1-待发货 2-待收货 3-已完成
      tabs: [
        { name: '全部', type: -99, count: 0 },
        { name: '待兑换', type: 0, count: 0 },
        { name: '待发货', type: 1, count: 0 },
        { name: '待收货', type: 2, count: 0 },
        { name: '已完成', type: 4, count: 0 }
      ],
      currentTab: 0,  // 默认显示"全部"
      orderList: [],
      orderData: {}, // 订单统计数据
      cartCount: 0,  // 购物车数量
      page: 1,
      limit: 10,
      loading: false,
      refreshing: false,
      noMore: false,
      isShow: false
    }
  },

  computed: {
    ...mapGetters(['isLogin'])
  },

  onLoad(options) {
    if (options.status !== undefined) {
      const status = parseInt(options.status);
      // 根据状态找到对应的标签索引
      const tabIndex = this.tabs.findIndex(tab => tab.type === status);
      if (tabIndex >= 0) {
        this.currentTab = tabIndex;
      }
    } else {
      // 默认显示"全部"标签（索引0）
      this.currentTab = 0;
    }
  },

  onShow() {
    // 页面显示时刷新订单统计和列表
    if (this.isLogin) {
      this.noMore = false;
      this.page = 1;
      this.orderList = [];
      this.getOrderData();
      this.loadOrderList();
      this.getCartNum();
    } else {
      toLogin();
    }
  },

  onReachBottom() {
    this.loadMore();
  },

  methods: {
    // 初始化页面
    async initPage() {
      // 检查登录状态
      if (!this.isLogin) {
        toLogin();
        return;
      }
      
      // 加载订单统计
      await this.getOrderData();
      
      // 加载订单列表
      this.loadOrderList();
    },

    // 获取订单统计数据
    async getOrderData() {
      try {
        const res = await orderData();
        if (res.data) {
          this.orderData = res.data;
          // 更新各个状态的订单数量
          // 当前标签: 全部(-99), 待兑换(0), 待发货(1), 待收货(2), 已完成(4)
          const unPaidCount = res.data.unPaidCount || 0; // 待兑换(待付款)
          const unShippedCount = res.data.unShippedCount || 0;
          const receivedCount = res.data.receivedCount || 0;
          const evaluateCount = res.data.evaluateCount || 0; // 待评价
          const completeCount = res.data.completeCount || 0; // 已完成
          
          // "已完成"标签：包含待评价(type:3) + 已完成(type:4)
          const finishedCount = evaluateCount + completeCount;
          
          // 计算全部订单数量
          const totalCount = res.data.orderCount || (unPaidCount + unShippedCount + receivedCount + finishedCount);
          
          this.tabs[0].count = totalCount; // 全部
          this.tabs[1].count = unPaidCount; // 待兑换
          this.tabs[2].count = unShippedCount; // 待发货
          this.tabs[3].count = receivedCount; // 待收货
          this.tabs[4].count = finishedCount; // 已完成（包含待评价）
        }
      } catch (error) {
        console.error('加载订单统计失败:', error);
      }
    },
    
    // 获取购物车数量
    async getCartNum() {
      try {
        const res = await getCartCounts(true, 'total');
        if (res.data) {
          this.cartCount = res.data.count || 0;
        }
      } catch (error) {
        console.error('获取购物车数量失败:', error);
      }
    },

    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 切换标签
    switchTab(index) {
      if (this.currentTab === index) return
      this.currentTab = index
      this.resetList()
      this.loadOrderList()
    },

    // 重置列表
    resetList() {
      this.orderList = []
      this.page = 1
      this.noMore = false
    },

    // 加载订单列表
    async loadOrderList() {
      if (this.noMore) return
      if (this.loading) return
      
      // 检查登录状态
      if (!this.isLogin) {
        toLogin();
        return;
      }

      this.loading = true

      try {
        const tab = this.tabs[this.currentTab];
        const params = {
          page: this.page,
          limit: this.limit
        };
        
        let res;
        
        // "全部"时传空字符串，其他传具体type值
        if (tab.type === -99) {
          params.type = '-99';  // 空字符串表示查询所有状态
          res = await getOrderList(params);
        } else if (tab.type === 4) {
          // "已完成"标签：同时获取 type=3(待评价) 和 type=4(已完成) 的订单
          const [res3, res4] = await Promise.all([
            getOrderList({ ...params, type: 3 }),
            getOrderList({ ...params, type: 4 })
          ]);
          
          // 合并两个结果
          const list3 = (res3.data && res3.data.list) || [];
          const list4 = (res4.data && res4.data.list) || [];
          const mergedList = [...list3, ...list4];
          
          // 按创建时间倒序排序
          mergedList.sort((a, b) => {
            const timeA = new Date(a.createTime || 0).getTime();
            const timeB = new Date(b.createTime || 0).getTime();
            return timeB - timeA;
          });
          
          // 构造合并后的响应
          res = {
            data: {
              list: mergedList
            }
          };
        } else {
          params.type = tab.type;
          res = await getOrderList(params);
        }

        if (res.data) {
          const list = res.data.list || [];
          
          // 格式化订单数据
          const formattedList = list.map(order => this.formatOrderData(order));
          
          if (this.page === 1) {
            this.orderList = formattedList;
          } else {
            this.orderList = [...this.orderList, ...formattedList];
          }
          
          if (list.length < this.limit) {
            this.noMore = true;
          }
          
          this.page++;
          this.isShow = true;
        } else {
          uni.showToast({
            title: res.msg || '加载失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('加载订单失败:', error)
        uni.showToast({
          title: error.msg || '加载失败，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
        this.refreshing = false
      }
    },

    // 格式化订单数据
    formatOrderData(order) {
      // 获取商品列表
      const orderInfoList = order.orderInfoList || [];
      
      // 计算总商品数量
      let totalNum = order.totalNum || 1;
      
      // 计算总积分：优先使用payIntegral/useIntegral，否则从商品列表计算
      let totalPoints = 0;
      
      // 优先使用订单级别的积分字段
      if (order.payIntegral !== undefined && order.payIntegral !== null) {
        totalPoints = parseFloat(order.payIntegral) || 0;
      } else if (order.useIntegral !== undefined && order.useIntegral !== null) {
        totalPoints = parseFloat(order.useIntegral) || 0;
      } else if (order.integral !== undefined && order.integral !== null) {
        totalPoints = parseFloat(order.integral) || 0;
      } else {
        // 从商品列表计算总积分
        totalPoints = orderInfoList.reduce((sum, item) => {
          // 优先使用integral字段，否则使用vipPrice或price
          const itemPoints = parseFloat(item.integral) || parseFloat(item.vipPrice) || parseFloat(item.price) || 0;
          const quantity = parseInt(item.cartNum) || 1;
          return sum + (itemPoints * quantity);
        }, 0);
        
        // 如果计算结果为0，尝试使用payPrice或totalPrice
        if (totalPoints === 0) {
          totalPoints = parseFloat(order.payPrice) || parseFloat(order.totalPrice) || 0;
        }
      }
      
      // 获取第一个商品的信息用于列表显示
      let goodsName = '商品名称';
      let goodsImage = '/static/images/default-goods.png';
      let goodsPrice = 0;
      let goodsNum = 1;
      
      if (orderInfoList.length > 0) {
        const firstGoods = orderInfoList[0];
        goodsName = firstGoods.storeName || firstGoods.productName || goodsName;
        goodsImage = firstGoods.image || goodsImage;
        // 商品积分：优先使用integral，否则使用vipPrice或price
        goodsPrice = parseFloat(firstGoods.integral) || parseFloat(firstGoods.vipPrice) || parseFloat(firstGoods.price) || 0;
        goodsNum = firstGoods.cartNum || 1;
      }
      
      console.log('订单积分计算:', {
        orderId: order.orderId,
        payIntegral: order.payIntegral,
        useIntegral: order.useIntegral,
        integral: order.integral,
        payPrice: order.payPrice,
        totalPrice: order.totalPrice,
        calculatedPoints: totalPoints,
        orderInfoList: orderInfoList.map(item => ({
          name: item.storeName,
          integral: item.integral,
          vipPrice: item.vipPrice,
          price: item.price,
          cartNum: item.cartNum
        }))
      });
      
      return {
        id: order.id,
        orderId: order.orderId || order.orderNo || '',
        order_no: order.orderId || order.orderNo || '',
        goods_name: goodsName,
        goods_image: goodsImage,
        quantity: totalNum,
        points: totalPoints,
        goods_points: goodsPrice,
        goods_quantity: goodsNum,
        status: order.status,
        paid: order.paid,
        status_text: order.orderStatus || this.getStatusText(order.status, order.paid),
        orderInfoList: orderInfoList,
        createTime: order.createTime || '',
        created_at: order.createTime || '',
        activityType: order.activityType || '普通'
      };
    },

    // 获取状态文本
    getStatusText(status, paid) {
      if (!paid) return '待兑换';
      
      // status: 0-待发货 1-待收货 2-待评价 3-已完成
      const statusMap = {
        0: '待发货',
        1: '待收货',
        2: '待评价',
        3: '已完成'
      };
      return statusMap[status] || '未知状态';
    },

    // 下拉刷新
    onRefresh() {
      this.refreshing = true
      this.resetList()
      this.getOrderData()
      this.loadOrderList()
    },

    // 加载更多
    loadMore() {
      if (!this.noMore && !this.loading) {
        this.loadOrderList()
      }
    },

    // 取消订单
    cancelOrder(orderId, index) {
      uni.showModal({
        title: '提示',
        content: '确定要取消这个订单吗？',
        confirmColor: '#f55850',
        success: async (res) => {
          if (res.confirm) {
            if (!this.isLogin) {
              toLogin();
              return;
            }
            
            uni.showLoading({ title: '取消中...' })
            
            try {
              const result = await orderCancel(orderId);
              
              uni.hideLoading()
              uni.showToast({
                title: '取消成功',
                icon: 'success'
              })
              
              // 从列表中移除该订单
              if (index !== undefined) {
                this.orderList.splice(index, 1);
              }
              
              // 刷新统计
              this.getOrderData();
            } catch (error) {
              uni.hideLoading()
              uni.showToast({
                title: error.msg || error.message || '取消失败，请重试',
                icon: 'none'
              })
            }
          }
        }
      })
    },

    // 确认收货
    confirmReceipt(orderId, index) {
      uni.showModal({
        title: '确认收货',
        content: '确认已收到商品？',
        confirmColor: '#f55850',
        success: async (res) => {
          if (res.confirm) {
            if (!this.isLogin) {
              toLogin();
              return;
            }
            
            uni.showLoading({ title: '确认中...' })
            
            try {
              const result = await orderTake(orderId);
              
              uni.hideLoading()
              uni.showToast({
                title: '确认收货成功',
                icon: 'success'
              })
              
              // 刷新统计和列表
              this.getOrderData();
              this.resetList();
              this.loadOrderList();
            } catch (error) {
              uni.hideLoading()
              uni.showToast({
                title: error.msg || error.message || '操作失败，请重试',
                icon: 'none'
              })
            }
          }
        }
      })
    },
    
    // 删除订单
    delOrder(orderId, index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这个订单吗？',
        confirmColor: '#f55850',
        success: async (res) => {
          if (res.confirm) {
            try {
              await orderDel(orderId);
              
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
              
              // 从列表中移除该订单
              if (index !== undefined) {
                this.orderList.splice(index, 1);
              }
              
              // 刷新统计
              this.getOrderData();
            } catch (error) {
              uni.showToast({
                title: error.msg || '删除失败',
                icon: 'none'
              })
            }
          }
        }
      })
    },

    // 查看物流
    viewLogistics(order) {
      if (!order.express_no) {
        uni.showToast({
          title: '暂无物流信息',
          icon: 'none'
        })
        return
      }

      // 跳转到积分订单详情页面查看物流
      uni.navigateTo({
        url: `/pages/integral/order-detail?id=${order.orderId}`
      })
    },

    // 跳转订单详情
    goToDetail(orderId) {
      if (!orderId) return;
      uni.navigateTo({
        url: `/pages/integral/order-detail?id=${orderId}`
      })
    },
    
    // 去评价
    goComment(order) {
      if (!order.orderInfoList || order.orderInfoList.length === 0) {
        uni.showToast({
          title: '商品信息不存在',
          icon: 'none'
        })
        return
      }
      const firstGoods = order.orderInfoList[0]
      uni.navigateTo({
        url: `/pages/goods/goods_comment_con/index?unique=${firstGoods.attrId}&orderId=${order.orderId}&id=${order.id}`
      })
    },

    // 去商城
    goToShop() {
      uni.navigateTo({
        url: '/pages/integral/index'
      })
    },
    
    // 去购物车
    goToCart() {
      uni.navigateTo({
        url: '/pages/integral/cart'
      })
    },
    
    // 去支付
    goPay(order) {
      uni.navigateTo({
        url: `/pages/order/order_payment/index?orderNo=${order.orderId}&payPrice=${order.points}`
      })
    },

    // 格式化积分
    formatPoints(price) {
      if (!price && price !== 0) return '0'
      // 积分显示为整数，添加千分位
      return Number(price).toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    
    // 获取状态颜色
    getStatusColor(status, paid) {
      if (!paid) return '#F54900'; // 待付款 - 橙色
      
      // status: 0-待发货 1-待收货 2-待评价 3-已完成
      const colors = {
        0: '#F54900', // 待发货 - 橙色
        1: '#F54900', // 待收货 - 橙色
        2: '#F54900', // 待评价 - 橙色
        3: '#52c41a', // 已完成 - 绿色
      }
      return colors[status] || '#F54900'
    },
  }
}
</script>

<style lang="scss" scoped>
.orders-page {
  min-height: 100vh;
  background-color: #F9FAFB;
  display: flex;
  flex-direction: column;
  padding-bottom: 120rpx;
}

// 橙色头部
.header-section {
  background-color: #F54900;
  padding: 0;
}

.header-content {
  height: 112rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
}

.header-icon {
  width: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .iconfont {
    font-size: 36rpx;
    color: #FFFFFF;
  }
}

.header-title {
  flex: 1;
  font-size: 36rpx;
  color: #FFFFFF;
  font-weight: normal;
  text-align: center;
  line-height: 56rpx;
}

.header-menu {
  font-size: 32rpx;
  color: #FFFFFF;
  font-weight: bold;
  letter-spacing: 2rpx;
  width: 72rpx;
  text-align: right;
}

// 状态统计栏
.stats-bar {
  background-color: #FFFFFF;
  display: flex;
  padding: 32rpx 0;
  align-items: center;
  justify-content: space-around;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.stat-number-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 40rpx;
  color: #333333;
  font-weight: 500;
  line-height: 1.2;
  
  &.active {
    color: #F54900;
  }
}

.stat-underline {
  position: absolute;
  bottom: -4rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 24rpx;
  height: 4rpx;
  background-color: #F54900;
}

.stat-text {
  font-size: 26rpx;
  color: #666666;
  font-weight: normal;
  line-height: 1.2;
  
  &.active {
    color: #F54900;
  }
}

.orders-list {
  flex: 1;
  padding: 24rpx 32rpx;
  background-color: #F9FAFB;
}

.list-container {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.order-item {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #F5F5F5;
}

.order-time {
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
}

.order-status {
  font-size: 28rpx;
  font-weight: normal;
  color: #F54900;
  line-height: 40rpx;
}

.order-content {
  padding: 0 32rpx;
}

.goods-row {
  display: flex;
  padding: 24rpx 0;
  gap: 20rpx;
  border-bottom: 1rpx solid #F5F5F5;
  
  &:last-child {
    border-bottom: none;
  }
}

.goods-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 12rpx;
  background-color: #F5F5F5;
  flex-shrink: 0;
}

.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12rpx;
}

.goods-name {
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  font-weight: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

.goods-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goods-points {
  font-size: 28rpx;
  color: #F54900;
  font-weight: normal;
  line-height: 40rpx;
}

.goods-quantity {
  font-size: 26rpx;
  color: #999999;
  line-height: 40rpx;
}

.order-summary {
  padding: 24rpx 32rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8rpx;
}

.summary-text {
  font-size: 26rpx;
  color: #333333;
  line-height: 40rpx;
}

.summary-points {
  font-size: 28rpx;
  color: #F54900;
  font-weight: 500;
  line-height: 40rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.empty-image {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 40rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 40rpx;
}

.empty-btn {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #F54900;
  color: #FFFFFF;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
  
  &::after {
    border: none;
  }
}

.load-more {
  padding: 40rpx 0;
  text-align: center;
}

.load-text {
  font-size: 28rpx;
  color: #999999;
  line-height: 40rpx;
}

// 底部导航栏
.bottom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #FFFFFF;
  display: flex;
  border-top: 1rpx solid #EEEEEE;
  z-index: 100;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rpx;
}

.tab-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.cart-badge {
  position: absolute;
  top: -8rpx;
  right: -16rpx;
  min-width: 32rpx;
  height: 32rpx;
  background-color: #F54900;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8rpx;
  
  text {
    font-size: 20rpx;
    color: #FFFFFF;
    font-weight: 500;
  }
}

.tab-text {
  font-size: 22rpx;
  color: #999999;
  
  &.active {
    color: #F54900;
  }
}
</style>

