<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import type { TableColumnData } from '@arco-design/web-vue'

// 订单类型与状态
type OrderStatus = '待支付' | '进行中' | '已完成' | '已取消'
interface OrderItem { id: string; orderNo: string; customer: string; amount: number; status: OrderStatus; createTime: string }
const StatusOptions: { label: string; value: OrderStatus }[] = [
  { label: '待支付', value: '待支付' },
  { label: '进行中', value: '进行中' },
  { label: '已完成', value: '已完成' },
  { label: '已取消', value: '已取消' },
]

// 假数据源与统计
const allOrders = ref<OrderItem[]>([])
const stats = computed(() => ({
  total: allOrders.value.length,
  pending: allOrders.value.filter(o=>o.status==='待支付').length,
  progress: allOrders.value.filter(o=>o.status==='进行中').length,
  done: allOrders.value.filter(o=>o.status==='已完成').length,
  cancel: allOrders.value.filter(o=>o.status==='已取消').length,
}))

// 统计卡片渲染数据（去趋势化）
const statCards = computed(() => [
  { key: 'total', title: '订单总数', value: stats.value.total, color: '#2f54eb', iconChar: 'T' },
  { key: 'pending', title: '待支付', value: stats.value.pending, color: '#faad14', iconChar: 'P' },
  { key: 'progress', title: '进行中', value: stats.value.progress, color: '#1677ff', iconChar: 'R' },
  { key: 'done', title: '已完成', value: stats.value.done, color: '#52c41a', iconChar: 'D' },
  { key: 'cancel', title: '已取消', value: stats.value.cancel, color: '#8c8c8c', iconChar: 'C' },
])

// 查询表单与分页
const searchForm = reactive({ orderNo: '', status: '' as ''|OrderStatus, timeRange: [] as [string,string]|[], page: 1, size: 10 })
const filtered = computed(() => {
  let list = allOrders.value.slice()
  if (searchForm.orderNo) list = list.filter(o=>o.orderNo.includes(searchForm.orderNo.trim()))
  if (searchForm.status) list = list.filter(o=>o.status===searchForm.status)
  if (Array.isArray(searchForm.timeRange) && searchForm.timeRange.length===2) {
    const [s,e] = searchForm.timeRange; const S=+new Date(s as any), E=+new Date(e as any)
    list = list.filter(o=>{ const t=+new Date(o.createTime as any); return t>=S && t<=E })
  }
  return list
})
const paged = computed(() => {
  const start = (searchForm.page-1)*searchForm.size
  return filtered.value.slice(start, start+searchForm.size)
})
const pagination = reactive({ current: 1, pageSize: 10, total: 0, showTotal: true, showPageSize: true })

// 表格列
const columns: TableColumnData[] = [
  { title: '订单编号', dataIndex: 'orderNo', width: 180 },
  { title: '客户', dataIndex: 'customer', width: 160 },
  { title: '金额', dataIndex: 'amount', width: 120, render: ({record}:any)=>`￥${(record.amount||0).toLocaleString()}` },
  { title: '状态', dataIndex: 'status', width: 100, slotName: 'status' },
  { title: '下单时间', dataIndex: 'createTime', width: 180 },
  { title: '操作', slotName: 'action', width: 140, fixed: 'right' },
]

// 操作
const loading = ref(false)
const search = () => { pagination.total = filtered.value.length }
const reset = () => { Object.assign(searchForm, { orderNo: '', status: '', timeRange: [], page: 1, size: 10 }); pagination.current=1; pagination.pageSize=10; search() }
const onPageChange = (p:number)=>{ searchForm.page=p; pagination.current=p }
const onPageSizeChange=(s:number)=>{ searchForm.size=s; searchForm.page=1; pagination.pageSize=s; pagination.current=1; search() }
const getStatusColor = (s:OrderStatus)=>({ '待支付':'orange','进行中':'blue','已完成':'green','已取消':'gray' }[s])

// 新增订单（本地）
const showAdd = ref(false)
const newOrder = reactive<{orderNo:string;customer:string;amount:number;status:OrderStatus;createTime:string}>(
  { orderNo:'', customer:'', amount:0, status:'待支付', createTime:'' }
)
const openAdd = ()=>{ Object.assign(newOrder,{ orderNo:'',customer:'',amount:0,status:'待支付',createTime:new Date().toISOString().slice(0,19).replace('T',' ') }); showAdd.value=true }
const submitAdd = ()=>{
  const id = Math.random().toString(36).slice(2)
  allOrders.value.unshift({ id, ...newOrder })
  showAdd.value=false; search()
}

// 生成假数据
const genMock = (n=60)=>{
  const pick=<T,>(arr:T[])=>arr[Math.floor(Math.random()*arr.length)]
  const now=Date.now()
  return Array.from({length:n}).map((_,i)=>{
    const offset = Math.floor(Math.random()*60)*86400000
    const dt = new Date(now-offset).toISOString().slice(0,19).replace('T',' ')
    const st = pick<OrderStatus>(['待支付','进行中','已完成','已取消'])
    return { id:`O${i+1}`, orderNo:`NO${100000+i}`, customer:`客户${(i%20)+1}`, amount: Math.floor(Math.random()*50000)+1000, status: st, createTime: dt }
  })
}
onMounted(()=>{ allOrders.value = genMock(88); search() })
</script>

<template>
  <GiPageLayout>
    <!-- 顶部统计（美化 + 居中 + 独立容器） -->
    <a-row :gutter="12" class="mb-3 stats-row">
      <a-col :span="24">
        <div class="stats-wrap">
          <a-row :gutter="12" justify="center">
            <a-col v-for="card in statCards" :key="card.key" :xs="12" :sm="12" :md="6" :lg="4">
              <a-card hoverable class="stat-card">
                <div class="stat-inner">
                  <div class="stat-icon" :style="{ background: card.color }">
                    <span>{{ card.iconChar }}</span>
                  </div>
                  <div class="stat-value">{{ card.value }}</div>
                  <div class="stat-title">{{ card.title }}</div>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>

    <!-- 查询表单 + 新增按钮 -->
    <GiForm :columns="[
      { field:'orderNo', label:'订单编号', type:'input', props:{placeholder:'支持模糊查询'} },
      { field:'status', label:'订单状态', type:'select', props:{ placeholder:'全部', options: StatusOptions } },
      { field:'timeRange', label:'订单时间', type:'range-picker', props:{ showTime:true, format:'YYYY-MM-DD HH:mm:ss' } },
    ]" v-model="searchForm" search size="medium" @search="search" @reset="reset">
      <template #extra>
        <a-button type="primary" @click="openAdd"><icon-plus/> 新增订单</a-button>
      </template>
    </GiForm>

    <!-- 订单列表 -->
    <GiTable :data="paged" :columns="columns" :loading="loading" :pagination="pagination"
             @page-change="onPageChange" @page-size-change="onPageSizeChange" @refresh="search">
      <template #status="{ record }"><a-tag :color="getStatusColor(record.status)">{{ record.status }}</a-tag></template>
      <template #action="{ record }"><a-space>
        <a-link @click="()=>{}">查看</a-link>
        <a-link @click="()=>{}">编辑</a-link>
      </a-space></template>
    </GiTable>

    <!-- 新增订单弹窗（本地） -->
    <a-modal v-model:visible="showAdd" title="新增订单" :width="520" @before-ok="submitAdd">
      <a-form :model="newOrder" layout="vertical">
        <a-form-item field="orderNo" label="订单编号"><a-input v-model="newOrder.orderNo" placeholder="NO123456"/></a-form-item>
        <a-form-item field="customer" label="客户"><a-input v-model="newOrder.customer"/></a-form-item>
        <a-form-item field="amount" label="金额"><a-input-number v-model="newOrder.amount" style="width:100%"/></a-form-item>
        <a-form-item field="status" label="状态"><a-select v-model="newOrder.status" :options="StatusOptions"/></a-form-item>
        <a-form-item field="createTime" label="下单时间"><a-date-picker v-model="newOrder.createTime" show-time style="width:100%"/></a-form-item>
      </a-form>
    </a-modal>
  </GiPageLayout>
</template>

<style scoped>
.mb-3{ margin-bottom:12px; }
.stats-row{ }
.stats-wrap{ max-width: 1200px; margin: 0 auto; }
.stat-card{ border: 1px solid var(--color-border-2,#f0f0f0); background: linear-gradient(180deg,#ffffff 0%, #fafbff 100%); }
.stat-inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px 10px; text-align:center; }
.stat-icon{ width:44px; height:44px; border-radius:12px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:8px; box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.stat-value{ font-size:28px; font-weight:700; color:#1d2129; line-height:1.2; }
.stat-title{ margin-top:6px; color:#86909c; }

</style>