<template>
    <div >
        <div class="searchForm">
          <searchForm
            :search="ORDER_SEARCH_CONFIG"
            @searchData="searchData"
            @resetData="resetData"
            class="search-box searchForm"
          />
        </div>
        <div class="gva-table-box">
          <div class="gva-btn-list">
            <el-button type="info" @click="exportOrders">导出订单</el-button>
          </div>

          <!-- 订单统计信息 -->
          <div style="margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px;">
            <el-row :gutter="20">
              <el-col :span="4">
                <div style="text-align: center;">
                  <div style="font-size: 24px; font-weight: bold; color: #409eff;">{{ getOrderStats().total }}</div>
                  <div style="color: #666;">总订单数</div>
                </div>
              </el-col>
              <el-col :span="4">
                <div style="text-align: center;">
                  <div style="font-size: 24px; font-weight: bold; color: #e6a23c;">{{ getOrderStats().unpaid }}</div>
                  <div style="color: #666;">未付款</div>
                </div>
              </el-col>
              <el-col :span="4">
                <div style="text-align: center;">
                  <div style="font-size: 24px; font-weight: bold; color: #67c23a;">{{ getOrderStats().paid }}</div>
                  <div style="color: #666;">已付款</div>
                </div>
              </el-col>
              <el-col :span="4">
                <div style="text-align: center;">
                  <div style="font-size: 24px; font-weight: bold; color: #f56c6c;">{{ getOrderStats().expired }}</div>
                  <div style="color: #666;">已过期</div>
                </div>
              </el-col>
              <el-col :span="4">
                <div style="text-align: center;">
                  <div style="font-size: 24px; font-weight: bold; color: #909399;">{{ getOrderStats().course }}</div>
                  <div style="color: #666;">课程订单</div>
                </div>
              </el-col>
              <el-col :span="4">
                <div style="text-align: center;">
                  <div style="font-size: 24px; font-weight: bold; color: #e6a23c;">{{ getOrderStats().vip }}</div>
                  <div style="color: #666;">VIP订单</div>
                </div>
              </el-col>
            </el-row>
          </div>

          <!-- 自定义订单表格 -->
          <el-table
            :data="tableData"
            v-loading="tableLoading"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column prop="order_no" label="订单号" align="center" min-width="180" />
            <el-table-column prop="title" label="商品名称" align="center" min-width="150" />
            <el-table-column prop="name" label="用户姓名" align="center" width="100" />、
            <el-table-column prop="user_id" label="用户ID" align="center" width="100" />
            <el-table-column label="价格" align="center" width="100">
              <template #default="{ row }">
                <span class="text-green-600 font-bold">{{ formatPrice(row.price) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单类型" align="center" width="100">
              <template #default="{ row }">
                <el-tag :type="row.order_type === 1 ? 'primary' : 'success'">
                  {{ row.order_type === 1 ? '课程' : 'VIP' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="支付方式" align="center" width="100">
              <template #default="{ row }">
                <el-tag :type="getPayTypeTag(row.pay_type).type">
                  {{ getPayTypeTag(row.pay_type).label }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="订单状态" align="center" width="100">
              <template #default="{ row }">
                <el-tag :type="getStatusTag(row.status).type">
                  {{ getStatusTag(row.status).label }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" width="180">
              <template #default="{ row }">
                {{ formatDate(row.CreatedAt) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100">
              <template #default="{ row }">
                <el-button type="primary" link @click="handleDetail(row)">
                  <el-icon style="margin-right: 5px"><InfoFilled /></el-icon>详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div style="margin-top: 20px; text-align: right;">
            <el-pagination
              v-model:current-page="queryParams.page"
              v-model:page-size="queryParams.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="changePage"
            />
          </div>
        </div>

        <!-- 订单详情弹窗 -->
        <el-dialog
          v-model="detailVisible"
          title="订单详情"
          width="70%"
          destroy-on-close
        >
          <el-descriptions :column="2" border>
            <el-descriptions-item label="订单号">{{ detailData.order_no || EMPTY_STR }}</el-descriptions-item>
            <el-descriptions-item label="商品名称">{{ detailData.title || EMPTY_STR }}</el-descriptions-item>
            <el-descriptions-item label="用户姓名">{{ detailData.name || EMPTY_STR }}</el-descriptions-item>
            <el-descriptions-item label="用户ID">{{ detailData.user_id || EMPTY_STR }}</el-descriptions-item>
            <el-descriptions-item label="价格">{{ formatPrice(detailData.price) }}</el-descriptions-item>
            <el-descriptions-item label="订单类型">
              <el-tag :type="detailData.order_type === 1 ? 'primary' : 'success'">
                {{ detailData.order_type === 1 ? '课程' : 'VIP' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="支付方式">
              <el-tag :type="getPayTypeTag(detailData.pay_type).type">
                {{ getPayTypeTag(detailData.pay_type).label }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="订单状态">
              <el-tag :type="getStatusTag(detailData.status).type">
                {{ getStatusTag(detailData.status).label }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="手机号">{{ detailData.phone || EMPTY_STR }}</el-descriptions-item>
            <el-descriptions-item label="讲师ID">{{ detailData.teacher_Id || EMPTY_STR }}</el-descriptions-item>
            <el-descriptions-item label="VIP ID">{{ detailData.vip_id || EMPTY_STR }}</el-descriptions-item>
            <el-descriptions-item label="微信OpenID">{{ detailData.open_id || EMPTY_STR }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ formatDate(detailData.CreatedAt) }}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ formatDate(detailData.UpdatedAt) }}</el-descriptions-item>
            <el-descriptions-item label="描述" :span="2">{{ detailData.desc || EMPTY_STR }}</el-descriptions-item>
          </el-descriptions>
        </el-dialog>
    </div>
</template>
<script setup>
import searchForm from '@/components/searchForm/index.vue'
import { list } from '@/api/order'
import { ref, onMounted } from 'vue'
import { ORDER_SEARCH_CONFIG } from '@/config'
import { formatDate } from '@/utils/format'
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const tableLoading = ref(true), tableData = ref([])
const detailVisible = ref(false)
const detailData = ref({})

const queryParams = ref({
    page: 1,
    pageSize: 10,
    order_no: '',
    title: '',
    name: '',
    order_type: '',
    pay_type: '',
    status: '',
    startTime: '',
    endTime: ''
}), total = ref(0)

const EMPTY_STR = '- -'

// 获取订单状态标签
const getStatusTag = (status) => {
    const map = {
        1: { type: 'warning', label: '未付款' },
        2: { type: 'success', label: '已付款' },
        3: { type: 'danger', label: '已过期' }
    }
    return map[status] || { type: '', label: EMPTY_STR }
}

// 获取支付方式标签
const getPayTypeTag = (payType) => {
    const map = {
        1: { type: 'success', label: '微信' },
        2: { type: 'primary', label: '支付宝' },
        3: { type: 'info', label: '余额' }
    }
    return map[payType] || { type: '', label: EMPTY_STR }
}

// 格式化价格显示（分转元）
const formatPrice = (price) => {
    if (price === null || price === undefined || price === '') return '0.00元'
    if (price === 0) return '0.00元'
    const yuan = (Number(price) / 100).toFixed(2)
    return yuan + '元'
}

const searchData = (data) => {
  if (data.times) {
    data.startTime = data.times[0]
    data.endTime = data.times[1]
  }
  queryParams.value.page = 1
  queryParams.value = { ...queryParams.value, ...data }
  delete queryParams.value.times
  getList()
}

const resetData = () => {
  queryParams.value = {
    page: 1,
    pageSize: 10,
    order_no: '',
    title: '',
    name: '',
    order_type: '',
    pay_type: '',
    status: '',
    startTime: '',
    endTime: ''
  }
  getList()
}

onMounted(() => {
    getList()
})

async function getList() {
    tableLoading.value = true
    try {
        const res = await list(queryParams.value)
        if(res.code === 0) {
            tableData.value = res.data.list
            total.value = res.data.total
            console.log('订单数据获取成功:', {
                total: res.data.total,
                list: res.data.list,
                firstItem: res.data.list[0]
            })
        } else {
            ElMessage.error(res.msg || '获取订单列表失败')
        }
    } catch (error) {
        console.error('获取订单列表失败:', error)
        ElMessage.error('获取订单列表失败')
    } finally {
        tableLoading.value = false
    }
}

function handleDetail(row) {
    detailData.value = { ...row }
    detailVisible.value = true
}

function changePage(data) {
  queryParams.value.page = data
  getList()
}

function handleSizeChange(val) {
  queryParams.value.pageSize = val
  getList()
}

// 导出订单功能
function exportOrders() {
  ElMessage.success('导出功能开发中...')
}

// 获取订单统计信息
function getOrderStats() {
  const stats = {
    total: total.value, // 总订单数（来自后端）
    unpaid: tableData.value.filter(item => item.status === 1).length,
    paid: tableData.value.filter(item => item.status === 2).length,
    expired: tableData.value.filter(item => item.status === 3).length,
    course: tableData.value.filter(item => item.order_type === 1).length,
    vip: tableData.value.filter(item => item.order_type === 2).length
  }
  return stats
}
</script>
<style lang="scss" scoped>
.gva-table-box {
  .gva-btn-list {
    margin-bottom: 20px;
  }

  .el-row {
    .el-col {
      .el-statistic {
        text-align: center;
        padding: 20px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        .el-statistic__number {
          font-size: 24px;
          font-weight: bold;
        }

        .el-statistic__label {
          color: #666;
          margin-top: 8px;
        }
      }
    }
  }
}

.searchForm {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-dialog {
  .el-descriptions {
    .el-descriptions__body {
      .el-descriptions__table {
        .el-descriptions__cell {
          padding: 12px 16px;
        }
      }
    }
  }
}
</style>
