<template>
  <div class="admin-order-page">
    <Breadcrumb />

    <a-card :bordered="false" class="page-card" title="订单管理">
      <AppQueryFilter>
          <a-form :model="queryData" layout="vertical" class="filter-grid app-query-form">
            <a-row :gutter="16">
              <a-col :xs="24" :sm="12" :md="8" :lg="6">
                <a-form-item label="订单号">
                  <a-input v-model="queryData.orderId" placeholder="模糊搜索" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :sm="12" :md="8" :lg="6">
                <a-form-item label="商品名称">
                  <a-input v-model="queryData.goods_name" placeholder="模糊搜索" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :sm="12" :md="8" :lg="6">
                <a-form-item label="用户名">
                  <a-input v-model="queryData.username" placeholder="模糊搜索" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :sm="12" :md="8" :lg="6">
                <a-form-item label="用户邮箱">
                  <EmailAutoComplete v-model="queryData.user_email" placeholder="模糊搜索" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :sm="12" :md="8" :lg="6">
                <a-form-item label="订单状态">
                  <a-select v-model="queryData.state" :options="stateOptions" placeholder="全部" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :sm="12" :md="8" :lg="6">
                <a-form-item label="支付方式">
                  <a-select v-model="queryData.pay_type" placeholder="全部" allow-clear>
                    <a-option value="">全部</a-option>
                    <a-option v-for="item in payTypeOptions" :key="item.value" :value="item.value">
                      {{ item.label }}
                    </a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :xs="24" :sm="24" :md="16" :lg="12">
                <a-form-item label="下单时间">
                  <a-range-picker
                    v-model="queryData.queryTime"
                    show-time
                    format="YY-MM-DD HH:mm"
                    value-format="x"
                    style="width: 100%"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-space>
              <a-button type="primary" @click="search">
                <template #icon><icon-search /></template>
                搜索
              </a-button>
              <a-button @click="reset">
                <template #icon><icon-refresh /></template>
                重置
              </a-button>
            </a-space>
          </a-form>
      </AppQueryFilter>

      <a-table
        :bordered="false"
        :data="data"
        stripe
        :loading="loading"
        :columns="columns"
        class="data-table"
        :scroll="{ x: 1200 }"
        :pagination="{
          showPageSize: true,
          showJumper: true,
          showTotal: true,
          pageSize: pagination.pagesize,
          current: pagination.current,
          total: pagination.total
        }"
        @page-change="handlePageChange"
        @page-size-change="handlePageSizeChange"
      >
        <template #username="{ record }">
          <a-space>
            <a-avatar :size="28">
              <img v-if="record.avatar" :alt="record.username ?? ''" :src="record.avatar" />
              <icon-user v-else />
            </a-avatar>
            {{ record.username || '-' }}
          </a-space>
        </template>
        <template #price="{ record }">
          <span class="price-cell">¥{{ record.price }}</span>
        </template>
        <template #pay_type="{ record }">
          <a-space size="mini">
            <icon-wechatpay v-if="record.pay_type === 'wxpay'" />
            <icon-alipay-circle v-else-if="record.pay_type === 'alipay'" />
            <icon-qq v-else-if="record.pay_type === 'qqpay'" />
            <span>{{ getPayTypeLabel(record.pay_type) }}</span>
          </a-space>
        </template>
        <template #state="{ record }">
          <a-tag :color="getStateColor(record.state)">{{ getStateLabel(record.state) }}</a-tag>
        </template>
        <template #create_time="{ record }">
          {{ formatStoreTimeFull(record.create_time) }}
        </template>
        <template #pay_time="{ record }">
          {{ record.pay_time ? formatStoreTimeFull(record.pay_time) : '-' }}
        </template>
        <template #optional="{ record }">
          <a-button type="text" size="small" @click="goDetail(record.orderId)">详情</a-button>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useResponsiveTable } from '@/hooks/useResponsiveTable'
import { useRouter } from 'vue-router'
import { adminOrderList } from '@/api/order'
import { Notification } from '@arco-design/web-vue'
import { getSemesterTimestamps } from '@/utils/util'
import { formatStoreTimeFull, getPayTypeLabel, getOrderStateMeta } from '@/utils/storeFormat'

const router = useRouter()
const pagination = reactive({ total: 0, current: 1, pagesize: 20 })

const stateOptions = [
  { label: '全部', value: -1 },
  { label: '待支付', value: 0 },
  { label: '待处理', value: 1 },
  { label: '已完成', value: 2 },
  { label: '已退款', value: 5 },
  { label: '已关闭', value: 3 },
  { label: '处理异常', value: 4 }
]

const payTypeOptions = [
  { label: '微信支付', value: 'wxpay' },
  { label: '支付宝', value: 'alipay' },
  { label: 'QQ支付', value: 'qqpay' }
]

const queryData = reactive({
  orderId: '',
  goods_name: '',
  username: '',
  user_email: '',
  state: -1,
  pay_type: '',
  queryTime: []
})

const loading = ref(false)
const data = ref([])

const columnDefs = [
  { title: '订单号', dataIndex: 'orderId', width: 180, ellipsis: true, tooltip: true },
  { title: '商品', dataIndex: 'goods_name', width: 140, ellipsis: true, tooltip: true },
  { title: '用户', slotName: 'username', width: 150 },
  { title: '邮箱', dataIndex: 'user_email', width: 180, ellipsis: true, tooltip: true },
  { title: '金额', slotName: 'price', width: 90 },
  { title: '支付', slotName: 'pay_type', width: 120 },
  { title: '状态', slotName: 'state', width: 100 },
  { title: '下单时间', slotName: 'create_time', width: 165 },
  { title: '支付时间', slotName: 'pay_time', width: 165 },
  { title: '操作', slotName: 'optional', fixed: 'right', width: 80 }
]

const { useTableColumns } = useResponsiveTable()
const columns = useTableColumns(columnDefs)

const getStateLabel = (state) => getOrderStateMeta(state).label
const getStateColor = (state) => getOrderStateMeta(state).color

const search = () => {
  pagination.current = 1
  getList()
}

const reset = () => {
  queryData.orderId = ''
  queryData.goods_name = ''
  queryData.username = ''
  queryData.user_email = ''
  queryData.state = -1
  queryData.pay_type = ''
  queryData.queryTime = getSemesterTimestamps()
  pagination.current = 1
  getList()
}

const getList = async () => {
  try {
    loading.value = true
    const res = await adminOrderList({
      ...queryData,
      pagesize: pagination.pagesize,
      current: pagination.current
    })
    if (!res || res.code !== 0) {
      return Notification.error({
        title: '获取订单列表失败',
        content: res?.msg ?? '请稍后再试'
      })
    }
    data.value = res.data || []
    pagination.total = res.pagination?.total ?? 0
  } catch (error) {
    Notification.error({
      title: '获取订单列表失败',
      content: error.message || '请稍后再试'
    })
  } finally {
    loading.value = false
  }
}

const goDetail = (orderId) => router.push(`/goodsManage/goods/orderDetail/${orderId}`)

const handlePageChange = (page) => {
  pagination.current = page
  getList()
}

const handlePageSizeChange = (size) => {
  pagination.pagesize = size
  pagination.current = 1
  getList()
}

onMounted(() => {
  queryData.queryTime = getSemesterTimestamps()
  getList()
})
</script>

<style scoped>
.admin-order-page {
  padding: 0 20px 20px;
}

.page-card {
  border-radius: 12px;
}

.filter-grid {
  padding-top: 8px;
}

.data-table {
  margin-top: 8px;
}

.price-cell {
  font-weight: 600;
  color: #e85d04;
}
</style>
