<template>
    <div >
        <div class="searchForm">
          <searchForm
            :search="ORDER_SEARCH_CONFIG"
            @searchData="searchData"
            @resetData="resetData"
            class="search-box searchForm"
          />
        </div>
        <div class="gva-table-box">
<!--            <el-table :data="tableData" style="width: 100%">-->
<!--                <el-table-column type="index" label="序号" width="120" />-->
<!--                <el-table-column prop="order_no" label="订单号" width="180" />-->
<!--                <el-table-column prop="name" label="商品名称" />-->
<!--                <el-table-column prop="price" label="价格" />-->
<!--                <el-table-column prop="order_type" label="类型" />-->
<!--                <el-table-column prop="status" label="状态" />-->
<!--                <el-table-column prop="CreatedAt" label="创建时间" />-->
<!--                <el-table-column prop="UpdatedAt" label="更新时间" />-->
<!--                <el-table-column label="操作" fixed="right" width="100">-->
<!--                    <template #default="scope">-->
<!--                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--            </el-table>-->

            <Content
              @changePage="changePage"
              :total="total"
              v-model:tabloading="tableLoading"
              v-model:currentPage="queryParams.page"
              v-model:pageSize="queryParams.pageSize"
              :data="tableData"
              :config="ORDER_TABLE_CONFIG"
            >
              <template #status="{ row }">
                <el-tag :type="tag(row.status).type">{{ tag(row.status).label }}</el-tag>
              </template>
              <template #operate="{ row }">
                <el-button type="text" @click="handleDetail(row)">详情</el-button>
                <el-button type="text" @click="handleDelete(row)">删除</el-button>
              </template>
            </Content>

        </div>
    </div>
</template>
<script setup>
import searchForm from '@/components/searchForm/index.vue'
import Content from '@/components/content/index.vue'
import {list} from '@/api/order'
import { ref, reactive, onMounted } from 'vue'
import { ORDER_SEARCH_CONFIG, ORDER_TABLE_CONFIG } from '@/config'
const tableLoading = ref(true),  tableData = ref([{ status: 1 }])
const queryParams = reactive({
    page: 1,
    pageSize: 10,
    orderId: '',
    startTime: '',
    endTime: ''
}), total = ref(0)
const EMPTY_STR = '- -'
const tag = (status) => {
    const map = {
        1: { type: 'success', label: '已完成' },
        2: { type: 'info', label: '待处理' },
        3: { type: 'warning', label: '处理中' },
        4: { type: 'danger', label: '已拒绝' }
    }
    return map[status] || { type: '', label: EMPTY_STR }
}
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
  // console.log(queryParams.value)
  getList()
}
const resetData = () => {
  queryParams.value = {
    page: 1,
    pageSize: 10,
  }
  getList()
}
onMounted(() => {
    getList()
})
async function getList() {
    const res = await list(queryParams)
    if(res.code === 0) {
        tableData.value = res.data.list
        total.value = res.data.total
    }
}

function handleDelete(row) {
    console.log(row)
}
function handleDetail(row) {

}


function changePage(data) {
queryParams.value.pageNum = data
getList()
}
</script>
<style lang="scss" scoped>
</style>
