<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="container">
    <div class="header">
        <div class="search-box">
            <el-input v-model="searchText" placeholder="Enter Keywords To Search" class="search-input" />
            <div class="search-icon"></div>
        </div>
      <el-select v-model="selectedCategory" placeholder="Category" class="select-input">
        <el-option label="Category 1" value="1" />
        <el-option label="Category 2" value="2" />
      </el-select>
      <el-select v-model="selectedStatus" placeholder="Products for sale" class="select-input">
        <el-option label="Online" value="online" />
        <el-option label="Offline" value="offline" />
      </el-select>
      <el-button type="danger" class="btn-reset" @click="Reset_Btn">Reset</el-button>
      <el-button type="danger" class="btn-new"   @click="show = true">New Product</el-button>
    </div>
    <el-table :data="productList" style="width: 100%">
      <el-table-column prop="id" label="Id" />
      <el-table-column label="Product Image">
        <template #default="scope">
          <img :src="scope.row.image" :alt="scope.row.name" class="product-img" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="Product Name" />
      <el-table-column prop="price" label="Commodity Price">
        <template #default="scope">${{ scope.row.price }}</template>
      </el-table-column>
      <el-table-column prop="sales" label="Sales Volume" />
      <el-table-column label="State">
        <template #default="scope">
          <el-tag :type="scope.row.state === 'Online' ? 'success' : 'danger'">
            {{ scope.row.state }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="Time" />
      <el-table-column label="Operation">
        <template #default="scope">
          <el-button type="primary" text>Edit</el-button>
          <el-button type="danger" text>Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <GoodsDrawer v-model:show="show"></GoodsDrawer>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
import GoodsDrawer from './components/goods-drawer.vue'
  const show = ref(false)
  const searchText = ref('')
  const selectedCategory = ref('')
  const selectedStatus = ref('')
  const Reset_Btn=()=>{
   console.log('重置');
  }
  const productList = ref([
    {
      id: '00010',
      image: 'https://ai-public.mastergo.com/ai/img_res/a59d5d07e117eb6d961215c66250fdd2.jpg',
      name: 'Italian Fettuccine Alfredo',
      price: '90',
      sales: '100W',
      state: 'Online',
      time: '2024-12-15 15:22:11',
    },
    {
      id: '00009',
      image: 'https://ai-public.mastergo.com/ai/img_res/d2fa8449384dece57a03a95dd63ce752.jpg',
      name: 'Classic Spaghetti Carbonara',
      price: '90',
      sales: '52W',
      state: 'Online',
      time: '2024-12-15 15:22:11',
    },
    {
      id: '00008',
      image: 'https://ai-public.mastergo.com/ai/img_res/4635661eaf01c5ff6f2eafa6ce127614.jpg',
      name: 'Spicy Penne Arrabbiata',
      price: '90',
      sales: '1W',
      state: 'Online',
      time: '2024-12-15 15:22:11',
    },
    {
      id: '00007',
      image: 'https://ai-public.mastergo.com/ai/img_res/64fbcaa413252850d70af6e06b04783c.jpg',
      name: 'Traditional Beef Lasagna',
      price: '90',
      sales: '999',
      state: 'Online',
      time: '2024-12-15 15:22:11',
    },
  ])
</script>
<style scoped lang="scss">
  .container {
    max-width: 1704px;
    padding: 16px;
  }

  .header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
  }
  .search-box {
  display: flex;
  align-items: center;
  height: 60px;
  position: relative;
  .search-input {
    width: 240px;
  }
  .search-icon {
    position: absolute;
    margin-left: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 32px;
    height: 32px;
    background-image: url('../../assets/img/search_Icon.png'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  }
  .select-input {
    width: 180px;
  }
  .btn-new {
    margin-left: auto !important;
  }

  .product-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
  }

  :deep(.el-table) {
    --el-table-border-color: #f0f0f0;
    --el-table-header-bg-color: #fafafa;
    --el-table-row-hover-bg-color: #f5f5f5;
  }

  :deep(.el-table .el-table__row:nth-child(even)) {
    background-color: #fafafa;
  }
</style>
