<template>
  <GiPageLayout>
    <!-- 统计卡片区域 -->
    <div class="statistics-section">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon pending">
                <GiSvgIcon name="clock-circle" />
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.pendingOrders }}</div>
                <div class="stat-label">待处理订单</div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon processing">
                <GiSvgIcon name="sync" />
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.processingOrders }}</div>
                <div class="stat-label">处理中订单</div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon completed">
                <GiSvgIcon name="check-circle" />
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.completedOrders }}</div>
                <div class="stat-label">已完成订单</div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon total">
                <GiSvgIcon name="dollar" />
              </div>
              <div class="stat-info">
                <div class="stat-number">¥{{ statistics.totalAmount }}</div>
                <div class="stat-label">采购总额</div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 选项卡区域 -->
    <a-card class="tab-card" :bordered="false">
      <a-tabs v-model:active-key="activeTab" type="card" @change="handleTabChange">
        <a-tab-pane key="orders" title="采购订单">
          <!-- 采购订单内容 -->
          <div class="tab-content">
            <!-- 搜索区域 -->
            <div class="search-section">
              <a-form layout="inline" :model="orderSearchForm" @submit="handleOrderSearch">
                <a-row :gutter="16">
                  <a-col :span="6">
                    <a-form-item label="订单编号">
                      <a-input
                        v-model:value="orderSearchForm.orderNo"
                        placeholder="请输入订单编号"
                        allow-clear
                        style="width: 100%"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="供应商">
                      <a-input
                        v-model:value="orderSearchForm.supplierName"
                        placeholder="请输入供应商名称"
                        allow-clear
                        style="width: 100%"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="订单状态">
                      <a-select
                        v-model:value="orderSearchForm.status"
                        :options="orderStatusOptions"
                        placeholder="请选择状态"
                        allow-clear
                        style="width: 100%"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="采购类型">
                      <a-select
                        v-model:value="orderSearchForm.purchaseType"
                        :options="purchaseTypeOptions"
                        placeholder="请选择类型"
                        allow-clear
                        style="width: 100%"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="16">
                  <a-col :span="6">
                    <a-form-item label="申请日期">
                      <a-range-picker
                        v-model:value="orderSearchForm.dateRange"
                        style="width: 100%"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="申请人">
                      <a-input
                        v-model:value="orderSearchForm.applicant"
                        placeholder="请输入申请人"
                        allow-clear
                        style="width: 100%"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item>
                      <a-space>
                        <a-button type="primary" html-type="submit" :loading="orderLoading">
                          <template #icon>
                            <GiSvgIcon name="search" />
                          </template>
                          搜索
                        </a-button>
                        <a-button @click="handleOrderReset">
                          <template #icon>
                            <GiSvgIcon name="refresh" />
                          </template>
                          重置
                        </a-button>
                        <a-button @click="handleOrderExport">
                          <template #icon>
                            <GiSvgIcon name="download" />
                          </template>
                          导出
                        </a-button>
                      </a-space>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>

            <!-- 操作按钮 -->
            <div class="action-section">
              <a-space>
                <a-button type="primary" @click="handleCreateOrder">
                  <template #icon>
                    <GiSvgIcon name="plus" />
                  </template>
                  新建采购订单
                </a-button>
                <a-button @click="handleBatchApprove">
                  <template #icon>
                    <GiSvgIcon name="check" />
                  </template>
                  批量审批
                </a-button>
                <a-button @click="handleBatchCancel">
                  <template #icon>
                    <GiSvgIcon name="close" />
                  </template>
                  批量取消
                </a-button>
              </a-space>
            </div>

            <!-- 订单表格 -->
            <a-table
              :columns="orderColumns"
              :data="orderData"
              :loading="orderLoading"
              :pagination="orderPagination"
              :row-selection="orderRowSelection"
              row-key="orderId"
              @change="handleOrderTableChange"
            >
              <!-- 订单状态 -->
              <template #status="{ record }">
                <a-tag :color="getOrderStatusColor(record.status)">
                  {{ getOrderStatusText(record.status) }}
                </a-tag>
              </template>

              <!-- 采购类型 -->
              <template #purchaseType="{ record }">
                <a-tag :color="getPurchaseTypeColor(record.purchaseType)">
                  {{ record.purchaseTypeLabel }}
                </a-tag>
              </template>

              <!-- 订单金额 -->
              <template #totalAmount="{ record }">
                <span class="text-green-600 font-medium">
                  ¥{{ record.totalAmount.toLocaleString() }}
                </span>
              </template>

              <!-- 紧急程度 -->
              <template #urgency="{ record }">
                <a-tag :color="getUrgencyColor(record.urgency)">
                  {{ getUrgencyText(record.urgency) }}
                </a-tag>
              </template>

              <!-- 操作列 -->
              <template #action="{ record }">
                <a-dropdown>
                  <a-button type="text" size="small">
                    操作
                    <template #icon>
                      <GiSvgIcon name="down" />
                    </template>
                  </a-button>
                  <template #content>
                    <a-doption @click="handleViewOrder(record)">
                      <template #icon>
                        <GiSvgIcon name="eye" />
                      </template>
                      查看详情
                    </a-doption>
                    <a-doption v-if="record.status === 'draft'" @click="handleEditOrder(record)">
                      <template #icon>
                        <GiSvgIcon name="edit" />
                      </template>
                      编辑
                    </a-doption>
                    <a-doption v-if="record.status === 'pending'" @click="handleApproveOrder(record)">
                      <template #icon>
                        <GiSvgIcon name="check" />
                      </template>
                      审批
                    </a-doption>
                    <a-doption v-if="record.status === 'pending'" @click="handleRejectOrder(record)">
                      <template #icon>
                        <GiSvgIcon name="close" />
                      </template>
                      驳回
                    </a-doption>
                    <a-doption v-if="['draft', 'pending'].includes(record.status)" @click="handleCancelOrder(record)">
                      <template #icon>
                        <GiSvgIcon name="stop" />
                      </template>
                      取消
                    </a-doption>
                    <a-doption v-if="record.status === 'processing'" @click="handleTrackOrder(record)">
                      <template #icon>
                        <GiSvgIcon name="location" />
                      </template>
                      跟踪
                    </a-doption>
                    <a-doption v-if="record.status === 'shipped'" @click="handleReceiveOrder(record)">
                      <template #icon>
                        <GiSvgIcon name="import" />
                      </template>
                      收货
                    </a-doption>
                    <a-doption v-if="record.status === 'draft'" class="text-red-500" @click="handleDeleteOrder(record)">
                      <template #icon>
                        <GiSvgIcon name="delete" />
                      </template>
                      删除
                    </a-doption>
                  </template>
                </a-dropdown>
              </template>
            </a-table>
          </div>
        </a-tab-pane>

        <a-tab-pane key="suppliers" title="供应商管理">
          <!-- 供应商管理内容 -->
          <div class="tab-content">
            <!-- 搜索区域 -->
            <div class="search-section">
              <a-form layout="inline" :model="supplierSearchForm" @submit="handleSupplierSearch">
                <a-row :gutter="16">
                  <a-col :span="6">
                    <a-form-item label="供应商名称">
                      <a-input
                        v-model:value="supplierSearchForm.supplierName"
                        placeholder="请输入供应商名称"
                        allow-clear
                        style="width: 100%"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="供应商类型">
                      <a-select
                        v-model:value="supplierSearchForm.supplierType"
                        :options="supplierTypeOptions"
                        placeholder="请选择类型"
                        allow-clear
                        style="width: 100%"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item label="合作状态">
                      <a-select
                        v-model:value="supplierSearchForm.cooperationStatus"
                        :options="cooperationStatusOptions"
                        placeholder="请选择状态"
                        allow-clear
                        style="width: 100%"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-item>
                      <a-space>
                        <a-button type="primary" html-type="submit" :loading="supplierLoading">
                          <template #icon>
                            <GiSvgIcon name="search" />
                          </template>
                          搜索
                        </a-button>
                        <a-button @click="handleSupplierReset">
                          <template #icon>
                            <GiSvgIcon name="refresh" />
                          </template>
                          重置
                        </a-button>
                      </a-space>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>

            <!-- 操作按钮 -->
            <div class="action-section">
              <a-button type="primary" @click="handleCreateSupplier">
                <template #icon>
                  <GiSvgIcon name="plus" />
                </template>
                新增供应商
              </a-button>
            </div>

            <!-- 供应商表格 -->
            <a-table
              :columns="supplierColumns"
              :data="supplierData"
              :loading="supplierLoading"
              :pagination="supplierPagination"
              row-key="supplierId"
              @change="handleSupplierTableChange"
            >
              <!-- 合作状态 -->
              <template #cooperationStatus="{ record }">
                <a-tag :color="getCooperationStatusColor(record.cooperationStatus)">
                  {{ getCooperationStatusText(record.cooperationStatus) }}
                </a-tag>
              </template>

              <!-- 供应商类型 -->
              <template #supplierType="{ record }">
                <a-tag :color="getSupplierTypeColor(record.supplierType)">
                  {{ record.supplierTypeLabel }}
                </a-tag>
              </template>

              <!-- 信用等级 -->
              <template #creditRating="{ record }">
                <a-rate :model-value="record.creditRating" readonly />
              </template>

              <!-- 操作列 -->
              <template #action="{ record }">
                <a-space>
                  <a-button type="text" size="small" @click="handleViewSupplier(record)">
                    查看
                  </a-button>
                  <a-button type="text" size="small" @click="handleEditSupplier(record)">
                    编辑
                  </a-button>
                  <a-button type="text" size="small" danger @click="handleDeleteSupplier(record)">
                    删除
                  </a-button>
                </a-space>
              </template>
            </a-table>
          </div>
        </a-tab-pane>

        <a-tab-pane key="analysis" title="采购分析">
          <!-- 采购分析内容 -->
          <div class="tab-content">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-card title="采购金额趋势" :bordered="false">
                  <div class="chart-container">
                    <!-- 这里可以集成图表组件 -->
                    <div class="chart-placeholder">
                      采购金额趋势图表
                    </div>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="12">
                <a-card title="供应商分布" :bordered="false">
                  <div class="chart-container">
                    <div class="chart-placeholder">
                      供应商分布图表
                    </div>
                  </div>
                </a-card>
              </a-col>
            </a-row>
            <a-row :gutter="16" style="margin-top: 16px;">
              <a-col :span="24">
                <a-card title="采购明细分析" :bordered="false">
                  <div class="chart-container">
                    <div class="chart-placeholder">
                      采购明细分析图表
                    </div>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>

    <!-- 采购订单弹窗 -->
    <PurchaseOrderModal
      v-model:visible="orderModalVisible"
      :order-data="currentOrder"
      @success="handleOrderSuccess"
    />

    <!-- 供应商弹窗 -->
    <SupplierModal
      v-model:visible="supplierModalVisible"
      :supplier-data="currentSupplier"
      @success="handleSupplierSuccess"
    />
  </GiPageLayout>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { Message, Modal } from '@arco-design/web-vue'
import PurchaseOrderModal from './components/PurchaseOrderModal.vue'
import SupplierModal from './components/SupplierModal.vue'

defineOptions({ name: 'ProcurementBusiness' })

// 统计数据
const statistics = ref({
  pendingOrders: 0,
  processingOrders: 0,
  completedOrders: 0,
  totalAmount: '0.00',
})

// 当前激活的选项卡
const activeTab = ref('orders')

// 采购订单相关
const orderSearchForm = reactive({
  orderNo: '',
  supplierName: '',
  status: '',
  purchaseType: '',
  dateRange: [],
  applicant: '',
})

const orderData = ref([])
const orderLoading = ref(false)
const orderPagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: true,
  showPageSize: true,
})

const orderRowSelection = {
  type: 'checkbox' as const,
  showCheckedAll: true,
  selectedRowKeys: ref<string[]>([]),
  onChange: (selectedRowKeys: string[]) => {
    orderRowSelection.selectedRowKeys.value = selectedRowKeys
  },
}

// 供应商相关
const supplierSearchForm = reactive({
  supplierName: '',
  supplierType: '',
  cooperationStatus: '',
})

const supplierData = ref([])
const supplierLoading = ref(false)
const supplierPagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: true,
  showPageSize: true,
})

// 弹窗控制
const orderModalVisible = ref(false)
const supplierModalVisible = ref(false)
const currentOrder = ref(null)
const currentSupplier = ref(null)

// 选项配置
const orderStatusOptions = [
  { label: '草稿', value: 'draft' },
  { label: '待审批', value: 'pending' },
  { label: '已审批', value: 'approved' },
  { label: '处理中', value: 'processing' },
  { label: '已发货', value: 'shipped' },
  { label: '已完成', value: 'completed' },
  { label: '已取消', value: 'cancelled' },
]

const purchaseTypeOptions = [
  { label: '设备采购', value: 'equipment' },
  { label: '材料采购', value: 'material' },
  { label: '服务采购', value: 'service' },
  { label: '办公用品', value: 'office' },
]

const supplierTypeOptions = [
  { label: '设备供应商', value: 'equipment' },
  { label: '材料供应商', value: 'material' },
  { label: '服务供应商', value: 'service' },
  { label: '综合供应商', value: 'comprehensive' },
]

const cooperationStatusOptions = [
  { label: '合作中', value: 'cooperating' },
  { label: '暂停合作', value: 'paused' },
  { label: '终止合作', value: 'terminated' },
  { label: '待评估', value: 'evaluating' },
]

// 采购订单表格列
const orderColumns = [
  {
    title: '订单编号',
    dataIndex: 'orderNo',
    key: 'orderNo',
    width: 150,
    fixed: 'left',
  },
  {
    title: '供应商',
    dataIndex: 'supplierName',
    key: 'supplierName',
    width: 200,
  },
  {
    title: '采购类型',
    dataIndex: 'purchaseType',
    key: 'purchaseType',
    slotName: 'purchaseType',
    width: 120,
  },
  {
    title: '订单金额',
    dataIndex: 'totalAmount',
    key: 'totalAmount',
    slotName: 'totalAmount',
    width: 120,
  },
  {
    title: '紧急程度',
    dataIndex: 'urgency',
    key: 'urgency',
    slotName: 'urgency',
    width: 100,
  },
  {
    title: '申请人',
    dataIndex: 'applicant',
    key: 'applicant',
    width: 100,
  },
  {
    title: '申请日期',
    dataIndex: 'applyDate',
    key: 'applyDate',
    width: 120,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    slotName: 'status',
    width: 100,
  },
  {
    title: '操作',
    key: 'action',
    slotName: 'action',
    width: 100,
    fixed: 'right',
  },
]

// 供应商表格列
const supplierColumns = [
  {
    title: '供应商名称',
    dataIndex: 'supplierName',
    key: 'supplierName',
    width: 200,
  },
  {
    title: '供应商类型',
    dataIndex: 'supplierType',
    key: 'supplierType',
    slotName: 'supplierType',
    width: 120,
  },
  {
    title: '联系人',
    dataIndex: 'contactPerson',
    key: 'contactPerson',
    width: 100,
  },
  {
    title: '联系电话',
    dataIndex: 'contactPhone',
    key: 'contactPhone',
    width: 120,
  },
  {
    title: '信用等级',
    dataIndex: 'creditRating',
    key: 'creditRating',
    slotName: 'creditRating',
    width: 120,
  },
  {
    title: '合作状态',
    dataIndex: 'cooperationStatus',
    key: 'cooperationStatus',
    slotName: 'cooperationStatus',
    width: 100,
  },
  {
    title: '操作',
    key: 'action',
    slotName: 'action',
    width: 150,
  },
]

// 获取订单状态颜色
const getOrderStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    draft: 'gray',
    pending: 'orange',
    approved: 'blue',
    processing: 'cyan',
    shipped: 'purple',
    completed: 'green',
    cancelled: 'red',
  }
  return colorMap[status] || 'gray'
}

// 获取订单状态文本
const getOrderStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    draft: '草稿',
    pending: '待审批',
    approved: '已审批',
    processing: '处理中',
    shipped: '已发货',
    completed: '已完成',
    cancelled: '已取消',
  }
  return textMap[status] || status
}

// 获取采购类型颜色
const getPurchaseTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    equipment: 'blue',
    material: 'green',
    service: 'orange',
    office: 'purple',
  }
  return colorMap[type] || 'gray'
}

// 获取紧急程度颜色
const getUrgencyColor = (urgency: string) => {
  const colorMap: Record<string, string> = {
    high: 'red',
    medium: 'orange',
    low: 'green',
  }
  return colorMap[urgency] || 'gray'
}

// 获取紧急程度文本
const getUrgencyText = (urgency: string) => {
  const textMap: Record<string, string> = {
    high: '紧急',
    medium: '一般',
    low: '普通',
  }
  return textMap[urgency] || urgency
}

// 获取合作状态颜色
const getCooperationStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    cooperating: 'green',
    paused: 'orange',
    terminated: 'red',
    evaluating: 'blue',
  }
  return colorMap[status] || 'gray'
}

// 获取合作状态文本
const getCooperationStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    cooperating: '合作中',
    paused: '暂停合作',
    terminated: '终止合作',
    evaluating: '待评估',
  }
  return textMap[status] || status
}

// 获取供应商类型颜色
const getSupplierTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    equipment: 'blue',
    material: 'green',
    service: 'orange',
    comprehensive: 'purple',
  }
  return colorMap[type] || 'gray'
}

// 选项卡切换
const handleTabChange = (key: string) => {
  activeTab.value = key
  if (key === 'orders') {
    loadOrderData()
  } else if (key === 'suppliers') {
    loadSupplierData()
  }
}

// 采购订单相关方法
const handleOrderSearch = () => {
  orderPagination.current = 1
  loadOrderData()
}

const handleOrderReset = () => {
  Object.assign(orderSearchForm, {
    orderNo: '',
    supplierName: '',
    status: '',
    purchaseType: '',
    dateRange: [],
    applicant: '',
  })
  orderPagination.current = 1
  loadOrderData()
}

const handleOrderExport = () => {
  Message.info('导出功能开发中...')
}

const handleCreateOrder = () => {
  currentOrder.value = null
  orderModalVisible.value = true
}

const handleBatchApprove = () => {
  if (orderRowSelection.selectedRowKeys.value.length === 0) {
    Message.warning('请选择要审批的订单')
    return
  }
  Message.info('批量审批功能开发中...')
}

const handleBatchCancel = () => {
  if (orderRowSelection.selectedRowKeys.value.length === 0) {
    Message.warning('请选择要取消的订单')
    return
  }
  Message.info('批量取消功能开发中...')
}

const handleOrderTableChange = (pag: any) => {
  orderPagination.current = pag.current || 1
  orderPagination.pageSize = pag.pageSize || 10
  loadOrderData()
}

const handleViewOrder = (record: any) => {
  currentOrder.value = record
  orderModalVisible.value = true
}

const handleEditOrder = (record: any) => {
  currentOrder.value = record
  orderModalVisible.value = true
}

const handleApproveOrder = (record: any) => {
  Message.info('审批功能开发中...')
}

const handleRejectOrder = (record: any) => {
  Message.info('驳回功能开发中...')
}

const handleCancelOrder = (record: any) => {
  Message.info('取消功能开发中...')
}

const handleTrackOrder = (record: any) => {
  Message.info('跟踪功能开发中...')
}

const handleReceiveOrder = (record: any) => {
  Message.info('收货功能开发中...')
}

const handleDeleteOrder = (record: any) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除采购订单"${record.orderNo}"吗？`,
    onOk: () => {
      Message.success('删除成功')
      loadOrderData()
    },
  })
}

const handleOrderSuccess = () => {
  orderModalVisible.value = false
  loadOrderData()
}

// 供应商相关方法
const handleSupplierSearch = () => {
  supplierPagination.current = 1
  loadSupplierData()
}

const handleSupplierReset = () => {
  Object.assign(supplierSearchForm, {
    supplierName: '',
    supplierType: '',
    cooperationStatus: '',
  })
  supplierPagination.current = 1
  loadSupplierData()
}

const handleCreateSupplier = () => {
  currentSupplier.value = null
  supplierModalVisible.value = true
}

const handleSupplierTableChange = (pag: any) => {
  supplierPagination.current = pag.current || 1
  supplierPagination.pageSize = pag.pageSize || 10
  loadSupplierData()
}

const handleViewSupplier = (record: any) => {
  currentSupplier.value = record
  supplierModalVisible.value = true
}

const handleEditSupplier = (record: any) => {
  currentSupplier.value = record
  supplierModalVisible.value = true
}

const handleDeleteSupplier = (record: any) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除供应商"${record.supplierName}"吗？`,
    onOk: () => {
      Message.success('删除成功')
      loadSupplierData()
    },
  })
}

const handleSupplierSuccess = () => {
  supplierModalVisible.value = false
  loadSupplierData()
}

// 加载数据
const loadOrderData = async () => {
  orderLoading.value = true
  try {
    // 模拟数据
    setTimeout(() => {
      orderData.value = [
        {
          orderId: '1',
          orderNo: 'PO2024001',
          supplierName: '深圳市智能设备有限公司',
          purchaseType: 'equipment',
          purchaseTypeLabel: '设备采购',
          totalAmount: 150000,
          urgency: 'high',
          applicant: '张三',
          applyDate: '2024-01-15',
          status: 'pending',
        },
        {
          orderId: '2',
          orderNo: 'PO2024002',
          supplierName: '北京材料供应商',
          purchaseType: 'material',
          purchaseTypeLabel: '材料采购',
          totalAmount: 50000,
          urgency: 'medium',
          applicant: '李四',
          applyDate: '2024-01-16',
          status: 'processing',
        },
      ]
      orderPagination.total = 2
      orderLoading.value = false
    }, 1000)
  } catch (error) {
    console.error('加载订单数据失败:', error)
    orderLoading.value = false
  }
}

const loadSupplierData = async () => {
  supplierLoading.value = true
  try {
    // 模拟数据
    setTimeout(() => {
      supplierData.value = [
        {
          supplierId: '1',
          supplierName: '深圳市智能设备有限公司',
          supplierType: 'equipment',
          supplierTypeLabel: '设备供应商',
          contactPerson: '王经理',
          contactPhone: '13800138000',
          creditRating: 4,
          cooperationStatus: 'cooperating',
        },
        {
          supplierId: '2',
          supplierName: '北京材料供应商',
          supplierType: 'material',
          supplierTypeLabel: '材料供应商',
          contactPerson: '赵经理',
          contactPhone: '13900139000',
          creditRating: 3,
          cooperationStatus: 'cooperating',
        },
      ]
      supplierPagination.total = 2
      supplierLoading.value = false
    }, 1000)
  } catch (error) {
    console.error('加载供应商数据失败:', error)
    supplierLoading.value = false
  }
}

const loadStatistics = async () => {
  try {
    // 模拟统计数据
    statistics.value = {
      pendingOrders: 5,
      processingOrders: 3,
      completedOrders: 12,
      totalAmount: '1,250,000.00',
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

// 初始化
onMounted(() => {
  loadStatistics()
  loadOrderData()
})
</script>

<style lang="scss" scoped>
.statistics-section {
  margin-bottom: 16px;

  .stat-card {
    .stat-content {
      display: flex;
      align-items: center;

      .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;

        &.pending {
          background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
          color: white;
        }

        &.processing {
          background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
          color: white;
        }

        &.completed {
          background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
          color: white;
        }

        &.total {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
        }
      }

      .stat-info {
        .stat-number {
          font-size: 24px;
          font-weight: bold;
          color: #1d2129;
          line-height: 1;
        }

        .stat-label {
          font-size: 14px;
          color: #86909c;
          margin-top: 4px;
        }
      }
    }
  }
}

.tab-card {
  .tab-content {
    .search-section {
      margin-bottom: 16px;
      padding: 16px;
      background: #fafafa;
      border-radius: 6px;
    }

    .action-section {
      margin-bottom: 16px;
    }

    .chart-container {
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;

      .chart-placeholder {
        color: #86909c;
        font-size: 16px;
      }
    }
  }
}

.text-green-600 {
  color: #52c41a;
}

.font-medium {
  font-weight: 500;
}
</style>
