<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class=" bg-gray-50 p-8 bg-white">
    <div class="mx-auto w-full">
      <!-- Search Area -->
      <div class="mb-6 flex items-center gap-4">
        <el-input v-model="searchKeyword" placeholder="Enter Keywords To Search" class="!rounded-button">
          <template #append >
            <el-icon class="w-full h-full" @click="console.log('搜索')">
              <Search />
            </el-icon>
          </template>
        </el-input>

        <el-select v-model="classification" placeholder="Product classification filtering" class="w-3 !rounded-button">
          <el-option v-for="item in classifications" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <div class="flex items-center gap-2">
          <span class="whitespace-nowrap text-gray-600">Trading Hours:</span>
          <el-date-picker v-model="dateRange" type="daterange" range-separator="—"
            start-placeholder="Please enter the time" end-placeholder="Please enter the time"
            class="w-[400px] !rounded-button" />
        </div>

        <el-button type="primary" class="!rounded-button" @click="handleReset">
          Reset
        </el-button>
      </div>

      <!-- Table -->
      <!-- 内容居中 -->
      <el-table :data="tableData" class="w-full" :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center' }">
        <el-table-column prop="orderNumber" label="Order Number" width="120" />
        <el-table-column prop="employeeId" label="Employee ID" width="120" />
        <el-table-column prop="classification" label="Classification" />
        <el-table-column prop="cashierName" label="Cashier's Name" width="150" />
        <el-table-column prop="amountReceivable" label="Amount Receivable">
          <template #default="{ row }">
            ${{ row.amountReceivable }}
          </template>
        </el-table-column>
        <el-table-column prop="tradingHours" label="Trading Hours" width="150" />
        <el-table-column prop="orderUpload" label="Order Upload" />
        <el-table-column label="Operation" width="100">
          <template #default="{ row }">
            <el-button type="primary" link class="!rounded-button text-orange-500" @click="handleDetails(row)">
              Details
            </el-button>
          </template>
        </el-table-column>
      </el-table>


    </div>
    <!-- Pagination -->
    <div class="fixed bottom-5 right-5 flex items-center justify-between">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40, 50]"
        :total="total" layout="prev, pager, next, sizes" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const searchKeyword = ref('');
const classification = ref('');
const dateRange = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(600);
console.log('total', total);
const classifications = [
  { value: 'seasonal', label: 'Seasonal Hot Dishes' },
  { value: 'regular', label: 'Regular Menu' },
  { value: 'drinks', label: 'Beverages' },
  { value: 'desserts', label: 'Desserts' },
];

const tableData = [
  {
    orderNumber: '00001',
    employeeId: '12312123',
    classification: 'Seasonal Hot Dishes',
    cashierName: 'Emma Thompson',
    amountReceivable: 90,
    tradingHours: '2025-04-25',
    orderUpload: '2025-04-25',
  },
  {
    orderNumber: '00002',
    employeeId: '12312123',
    classification: 'Seasonal Hot Dishes',
    cashierName: 'Michael Chen',
    amountReceivable: 90,
    tradingHours: '2025-04-25',
    orderUpload: '2025-04-25',
  },
  {
    orderNumber: '00003',
    employeeId: '12312123',
    classification: 'Seasonal Hot Dishes',
    cashierName: 'Sarah Wilson',
    amountReceivable: 90,
    tradingHours: '2025-04-25',
    orderUpload: '2025-04-25',
  },
  {
    orderNumber: '00004',
    employeeId: '12312123',
    classification: 'Seasonal Hot Dishes',
    cashierName: 'David Miller',
    amountReceivable: 90,
    tradingHours: '2025-04-25',
    orderUpload: '2025-04-25',
  },
  {
    orderNumber: '00005',
    employeeId: '12312123',
    classification: 'Seasonal Hot Dishes',
    cashierName: 'Rachel Anderson',
    amountReceivable: 90,
    tradingHours: '2025-04-25',
    orderUpload: '2025-04-25',
  },
  {
    orderNumber: '00006',
    employeeId: '12312123',
    classification: 'Seasonal Hot Dishes',
    cashierName: 'James Parker',
    amountReceivable: 90,
    tradingHours: '2025-04-25',
    orderUpload: '2025-04-25',
  },
];

const handleReset = () => {
  searchKeyword.value = '';
  classification.value = '';
  dateRange.value = [];
};
const handleDetails = (row) => {
  console.log('row', row);
  router.push({ path: '/order/orderDetail', query: { id: row.orderNumber } });
};
</script>

<style scoped>
.el-input__wrapper {
  background-color: white !important;
}

.el-table {
  --el-table-header-bg-color: #f8f9fa;
  --el-table-border-color: #e5e7eb;
  --el-table-header-text-color: #4b5563;
}
.el-input{
  --el-fill-color-light:#f67f20;
  --el-color-info:white;
  --el-input-border-color:#f67f20;
}
</style>