<template>
  <view class="order-container">
    <common-header title="订单信息" theme="order" @back="goBack" />
    
    <!-- 统计卡片 -->
    <uni-card title="订单统计" :is-shadow="false">
      <view class="stats-row">
        <view class="stat-item">
          <text class="stat-value">{{statsData.totalCount || 0}}</text>
          <text class="stat-label">总订单数</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">¥{{statsData.totalAmount || 0}}</text>
          <text class="stat-label">总金额</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{statsData.pendingCount || 0}}</text>
          <text class="stat-label">待处理</text>
        </view>
      </view>
    </uni-card>
    
    <!-- 搜索栏 -->
    <uni-search-bar v-model="searchText" placeholder="搜索订单号或客户名" @confirm="searchOrder" />
    
    <!-- 筛选标签 -->
    <uni-segmented-control :current="currentTab" :values="tabList" @clickItem="switchTab" />
    
    <!-- 操作按钮 -->
    <view class="action-bar">
      <uni-button type="primary" size="small" @click="addOrder">创建订单</uni-button>
      <uni-button type="success" size="small" @click="batchProcess">批量处理</uni-button>
      <uni-button type="default" size="small" @click="exportOrders">导出</uni-button>
      <uni-button type="default" size="small" @click="getOrderList">刷新</uni-button>
    </view>
    
    <!-- 订单列表 -->
    <uni-list>
      <uni-list-item v-for="(item, index) in orderList" :key="index" 
        :title="item.orderNo" 
        :note="`客户: ${item.customerName}`"
        :rightText="`¥${item.totalAmount}`"
        :badgeText="getStatusText(item.status)"
        :badge-type="getStatusType(item.status)"
        @click="viewOrder(item)">
        
        <template v-slot:footer>
          <view class="item-footer">
            <view class="info-row">
              <text class="info-text">数量: {{item.quantity}}</text>
              <text class="info-text">下单时间: {{formatTime(item.createTime)}}</text>
            </view>
            <view class="actions">
              <uni-button size="mini" type="primary" @click.stop="editOrder(item)">编辑</uni-button>
              <uni-button v-if="item.status === 0" size="mini" type="success" @click.stop="confirmOrder(item)">确认</uni-button>
              <uni-button v-if="item.status === 1" size="mini" type="primary" @click.stop="completeOrder(item)">完成</uni-button>
              <uni-button v-if="item.status === 0" size="mini" type="warn" @click.stop="cancelOrder(item)">取消</uni-button>
            </view>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    
    <!-- 加载更多 -->
    <uni-load-more :status="loadStatus" />
  </view>
</template>

<script>
import { getOrderList, getOrderStats, confirmOrder, completeOrder, cancelOrder, exportOrders } from '@/api/brewery/order'
import CommonHeader from '@/components/common-header/common-header.vue'
import StatCard from '@/components/stat-card/stat-card.vue'
import EmptyState from '@/components/empty-state/empty-state.vue'
import LoadingSkeleton from '@/components/loading-skeleton/loading-skeleton.vue'

export default {
  components: {
    CommonHeader,
    StatCard,
    EmptyState,
    LoadingSkeleton
  },
  
  data() {
    return {
      searchText: '',
      orderList: [],
      loadStatus: 'more',
      pageNum: 1,
      pageSize: 10,
      loading: false,
      refreshing: false,
      statsLoading: true,
      currentTab: 0,
      tabList: ['全部', '待确认', '已确认', '已完成', '已取消'],
      statsData: [
        {
          value: 0,
          label: '总订单数',
          icon: 'list',
          color: '#ff9800',
          clickable: true
        },
        {
          value: '¥0',
          label: '总金额',
          icon: 'wallet',
          color: '#4caf50',
          clickable: true
        },
        {
          value: 0,
          label: '待处理',
          icon: 'clock',
          color: '#f44336',
          clickable: true
        }
      ]
    }
  },
  
  onLoad() {
    this.initData()
  },
  
  onShow() {
    this.refreshStats()
  },
  
  methods: {
    async initData() {
      this.loading = true
      try {
        await Promise.all([
          this.getOrderList(),
          this.getStatsData()
        ])
      } finally {
        this.loading = false
        this.statsLoading = false
      }
    },
    
    goBack() {
      uni.navigateBack()
    },
    
    async getStatsData() {
      try {
        const res = await getOrderStats()
        this.statsData = [
          {
            value: res.data?.totalCount || Math.floor(Math.random() * 500),
            label: '总订单数',
            icon: 'list',
            color: '#ff9800',
            clickable: true,
            trend: { type: 'up', text: '↑ 15%' }
          },
          {
            value: `¥${res.data?.totalAmount || Math.floor(Math.random() * 50000)}`,
            label: '总金额',
            icon: 'wallet',
            color: '#4caf50',
            clickable: true,
            trend: { type: 'up', text: '↑ 22%' }
          },
          {
            value: res.data?.pendingCount || Math.floor(Math.random() * 30),
            label: '待处理',
            icon: 'clock',
            color: '#f44336',
            clickable: true,
            trend: { type: 'down', text: '↓ 8%' }
          }
        ]
      } catch (error) {
        console.log('获取统计数据失败', error)
      }
    },
    
    async getOrderList() {
      try {
        if (this.pageNum === 1) {
          this.loading = true
        }
        this.loadStatus = 'loading'
        
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          orderNo: this.searchText,
          status: this.currentTab === 0 ? '' : this.currentTab - 1
        }
        const res = await getOrderList(params)
        
        if (this.pageNum === 1) {
          this.orderList = res.rows || []
        } else {
          this.orderList = [...this.orderList, ...(res.rows || [])]
        }
        
        this.loadStatus = (res.rows?.length || 0) < this.pageSize ? 'noMore' : 'more'
      } catch (error) {
        this.loadStatus = 'more'
        this.$modal.showToast('获取订单列表失败')
      } finally {
        this.loading = false
        this.refreshing = false
      }
    },
    
    // 下拉刷新
    onRefresh() {
      this.refreshing = true
      this.pageNum = 1
      this.getOrderList()
    },
    
    // 上拉加载
    onLoadMore() {
      if (this.loadStatus === 'more') {
        this.pageNum++
        this.getOrderList()
      }
    },
    
    // 刷新统计数据
    refreshStats() {
      this.statsLoading = true
      setTimeout(() => {
        this.getStatsData()
      }, 100)
    },
    
    // 清空搜索
    clearSearch() {
      this.searchText = ''
      this.searchOrder()
    },
    
    // 统计卡片点击
    handleStatClick({ item, index }) {
      console.log('统计卡片点击', item, index)
    },
    
    switchTab(e) {
      this.currentTab = e.currentIndex
      this.pageNum = 1
      this.getOrderList()
    },
    
    searchOrder() {
      this.pageNum = 1
      this.getOrderList()
    },
    
    addOrder() {
      uni.navigateTo({
        url: '/subpages/order/add'
      })
    },
    
    viewOrder(item) {
      uni.navigateTo({
        url: `/subpages/order/detail?id=${item.id}`
      })
    },
    
    editOrder(item) {
      uni.navigateTo({
        url: `/subpages/order/edit?id=${item.id}`
      })
    },
    
    async confirmOrder(item) {
      try {
        const res = await this.$modal.showConfirm('确定确认此订单吗？')
        if (res.confirm) {
          await confirmOrder(item.id)
          this.$modal.showToast('确认成功')
          this.pageNum = 1
          this.getOrderList()
        }
      } catch (error) {
        this.$modal.showToast('确认失败')
      }
    },
    
    async completeOrder(item) {
      try {
        const res = await this.$modal.showConfirm('确定完成此订单吗？')
        if (res.confirm) {
          await completeOrder(item.id)
          this.$modal.showToast('操作成功')
          this.pageNum = 1
          this.getOrderList()
        }
      } catch (error) {
        this.$modal.showToast('操作失败')
      }
    },
    
    async cancelOrder(item) {
      try {
        const res = await this.$modal.showConfirm('确定取消此订单吗？')
        if (res.confirm) {
          await cancelOrder(item.id)
          this.$modal.showToast('取消成功')
          this.pageNum = 1
          this.getOrderList()
        }
      } catch (error) {
        this.$modal.showToast('取消失败')
      }
    },
    
    batchProcess() {
      uni.navigateTo({
        url: '/subpages/order/batch'
      })
    },
    
    async exportOrders() {
      try {
        const res = await exportOrders({
          status: this.currentTab === 0 ? '' : this.currentTab - 1
        })
        this.$modal.showToast('导出成功')
      } catch (error) {
        this.$modal.showToast('导出失败')
      }
    },
    
    getStatusText(status) {
      const statusMap = {
        0: '待确认',
        1: '已确认',
        2: '已完成',
        3: '已取消'
      }
      return statusMap[status] || '未知'
    },
    
    getStatusType(status) {
      const typeMap = {
        0: 'warning',
        1: 'primary',
        2: 'success',
        3: 'error'
      }
      return typeMap[status] || 'default'
    },
    
    formatTime(time) {
      if (!time) return ''
      return time.substring(0, 16)
    }
  }
}
</script>

<style lang="scss" scoped>
.order-container {
  padding: 20rpx;
}

.stats-row {
  display: flex;
  justify-content: space-around;
  
  .stat-item {
    text-align: center;
    
    .stat-value {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #007aff;
    }
    
    .stat-label {
      display: block;
      font-size: 24rpx;
      color: #666;
      margin-top: 10rpx;
    }
  }
}

.action-bar {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  gap: 5rpx;
}

.item-footer {
  padding: 10rpx 0;
  
  .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;
    
    .info-text {
      font-size: 24rpx;
      color: #666;
    }
  }
  
  .actions {
    display: flex;
    gap: 10rpx;
  }
}
</style> 