<template>
  <div class="p-4">
    <div class="mb-4 flex justify-between">
      <div>
        <FInput
          v-model="filters.search"
          placeholder="搜索订单..."
          type="text"
          class="w-60"
          @input="debouncedSearch"
        >
          <template #prefix>
            <i-lucide-search class="h-4 w-4 text-gray-500" />
          </template>
        </FInput>
      </div>
      <div class="flex items-center space-x-2">
        <Button
          icon="download"
          appearance="primary"
          @click="exportToCsv"
        >
          导出
        </Button>
        <Button
          icon="refresh-cw"
          appearance="minimal"
          @click="resetAndFetch"
        />
      </div>
    </div>

    <Card class="overflow-hidden !rounded-none !border-0">
      <template v-if="orders.length === 0">
        <div class="flex h-60 flex-col items-center justify-center space-y-2 p-4 text-center">
          <i-lucide-file-text class="h-8 w-8 text-gray-400" />
          <p class="text-base font-medium">无订单记录</p>
          <p class="text-sm text-gray-600">暂无订单记录可以显示</p>
        </div>
      </template>

      <template v-else>
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead>
              <tr class="border-b text-left text-sm font-medium text-gray-600">
                <th 
                  v-for="column in columns" 
                  :key="column.key" 
                  class="whitespace-nowrap px-4 py-3"
                  :class="column.class"
                >
                  {{ column.label }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr 
                v-for="order in orders" 
                :key="order.name || order.order_id"
                class="border-b text-sm hover:bg-gray-50"
              >
                <td class="px-4 py-3">{{ formatDate(order.creation) }}</td>
                <td class="px-4 py-3">{{ order.title || '-' }}</td>
                <td class="px-4 py-3">{{ order.order_id || '-' }}</td>
                <td class="px-4 py-3">{{ order.trade_no || '-' }}</td>
                <td class="px-4 py-3">{{ order.order_type || '-' }}</td>
                <td class="px-4 py-3">{{ order.payment_method || '-' }}</td>
                <td class="px-4 py-3">{{ order.description || '-' }}</td>
                <td class="px-4 py-3 text-right">{{ formatCurrency(order.total) }}</td>
                <td class="px-4 py-3">
                  <StatusIndicator :status="getStatusProps(order.status)" />
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="flex items-center justify-between p-4">
          <div class="text-sm text-gray-600">
            显示 {{ orders.length }} 条订单，共 {{ totalCount }} 条
          </div>
          <Button
            v-if="hasMoreToLoad"
            @click="loadMore"
            :loading="loadingMore"
            appearance="primary"
          >
            加载更多
          </Button>
        </div>
      </template>
    </Card>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue';
import { Button, Card, Input as FInput, createResource } from 'jingrow-ui';
import StatusIndicator from '../components/StatusIndicator.vue';
import { unparse } from 'papaparse';

export default {
  name: 'BillingOrders',
  components: {
    Button,
    Card,
    FInput,
    StatusIndicator,
  },
  setup() {
    const pageSize = 20;
    const orders = ref([]);
    const totalCount = ref(0);
    const currentPage = ref(1);
    const initialLoading = ref(true);
    const loadingMore = ref(false);
    
    const filters = reactive({
      search: ''
    });
    
    // 定义表格列
    const columns = [
      { key: 'creation', label: '时间', class: '' },
      { key: 'title', label: '标题', class: '' },
      { key: 'order_id', label: '订单号', class: '' },
      { key: 'trade_no', label: '交易号', class: '' },
      { key: 'order_type', label: '订单类型', class: '' },
      { key: 'payment_method', label: '支付方式', class: '' },
      { key: 'description', label: '描述', class: '' },
      { key: 'total', label: '金额', class: 'text-right' },
      { key: 'status', label: '状态', class: '' }
    ];
    
    // 计算是否还有更多数据可加载
    const hasMoreToLoad = computed(() => {
      return orders.value.length < totalCount.value;
    });
    
    // 创建获取订单的资源
    const ordersResource = createResource({
      url: 'jcloud.api.billing.get_orders',
      transform(response) {
        console.log('API响应:', response); // 调试日志
        return {
          orders: response.orders || [],
          total: response.total || 0
        };
      },
      onSuccess(data) {
        // 更新总数
        totalCount.value = data.total;
        
        if (currentPage.value === 1) {
          // 第一页数据，替换现有数据
          orders.value = data.orders;
        } else {
          // 非第一页，追加数据
          orders.value = [...orders.value, ...data.orders];
        }
        
        // 更新加载状态
        initialLoading.value = false;
        loadingMore.value = false;
        
        console.log('获取到订单数据:', {
          orders: orders.value,
          total: totalCount.value,
          hasMore: hasMoreToLoad.value
        });
      },
      onError(error) {
        console.error('获取订单数据失败:', error);
        initialLoading.value = false;
        loadingMore.value = false;
      }
    });
    
    // 导出资源
    const exportResource = createResource({
      url: 'jcloud.api.billing.get_orders',
      onSuccess(response) {
        const orders = response.orders || [];
        
        // 定义CSV字段
        const fields = [
          '标题',
          '订单ID',
          '交易号',
          '订单类型',
          '支付方式',
          '描述',
          '金额',
          '状态',
          '创建时间'
        ];
        
        // 准备数据
        const csvData = orders.map(order => [
          order.title || '',
          order.order_id || '',
          order.trade_no || '',
          order.order_type || '',
          order.payment_method || '',
          order.description || '',
          order.total || 0,
          order.status || '',
          order.creation || ''
        ]);
        
        // 添加表头
        csvData.unshift(fields);
        
        // 生成CSV
        let csv = unparse(csvData);
        
        // 添加BOM以支持中文
        csv = '\uFEFF' + csv;
        
        // 触发下载
        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
        const today = new Date().toISOString().split('T')[0];
        const filename = `订单记录-${today}.csv`;
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = filename;
        link.click();
        URL.revokeObjectURL(link.href);
      },
      onError(error) {
        console.error('导出数据失败:', error);
      }
    });
    
    // 方法：加载初始数据
    function fetchOrders() {
      if (currentPage.value === 1) {
        initialLoading.value = true;
      } else {
        loadingMore.value = true;
      }
      
      ordersResource.submit({
        page: currentPage.value,
        page_size: pageSize,
        search: filters.search,
      });
    }
    
    // 方法：重置并获取第一页数据
    function resetAndFetch() {
      currentPage.value = 1;
      fetchOrders();
    }
    
    // 方法：加载更多数据
    function loadMore() {
      if (loadingMore.value) return;
      
      currentPage.value += 1;
      loadingMore.value = true;
      fetchOrders();
    }
    
    // 搜索防抖
    let searchTimeout;
    function debouncedSearch() {
      clearTimeout(searchTimeout);
      searchTimeout = setTimeout(() => {
        resetAndFetch();
      }, 300);
    }
    
    // 导出为CSV
    function exportToCsv() {
      exportResource.submit({
        page: 1,
        page_size: 1000, // 设置较大的值获取更多数据用于导出
        search: filters.search,
      });
    }
    
    // 格式化金额
    function formatCurrency(amount) {
      if (amount === undefined || amount === null) return '-';
      return new Intl.NumberFormat('zh-CN', {
        style: 'currency',
        currency: 'CNY',
      }).format(amount);
    }
    
    // 格式化日期
    function formatDate(dateString) {
      if (!dateString) return '-';
      
      const date = new Date(dateString);
      if (isNaN(date.getTime())) return '-';
      
      // 格式化为 YYYY-MM-DD HH:MM 格式
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    }
    
    // 获取状态样式
    function getStatusProps(status) {
      const statusMap = {
        '待支付': { label: '待支付', color: 'orange' },
        '已支付': { label: '已支付', color: 'green' },
        '交易成功': { label: '交易成功', color: 'green' },
        '已取消': { label: '已取消', color: 'red' },
        '已退款': { label: '已退款', color: 'red' },
      };
      
      return statusMap[status] || { label: status, color: 'blue' };
    }
    
    // 生命周期钩子
    onMounted(() => {
      fetchOrders();
    });
    
    return {
      columns,
      orders,
      totalCount,
      currentPage,
      initialLoading,
      loadingMore,
      hasMoreToLoad,
      filters,
      fetchOrders,
      resetAndFetch,
      loadMore,
      debouncedSearch,
      exportToCsv,
      formatCurrency,
      formatDate,
      getStatusProps
    };
  }
};
</script> 