<template>
  <div class="page-container">
    <PageTitle title="协议供货" />
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input v-model="queryParams.keyword" placeholder="搜索" style="width: 180px" clearable>
        <template #prefix><el-icon><Search /></el-icon></template>
      </el-input>
      <div class="price-range">
        <el-input v-model="queryParams.minPrice" placeholder="¥ 最高价" style="width: 100px" />
        <span class="range-separator">—</span>
        <el-input v-model="queryParams.maxPrice" placeholder="¥ 最低价" style="width: 100px" />
      </div>
      <el-select v-model="queryParams.category" placeholder="商品类别" style="width: 100px" clearable>
        <el-option label="空调" value="空调" /><el-option label="电脑" value="电脑" /><el-option label="办公设备" value="办公设备" />
      </el-select>
    </div>
    <!-- 排序栏 -->
    <div class="sort-bar">
      <el-select v-model="queryParams.sortType" placeholder="默认排序" style="width: 110px">
        <el-option label="默认排序" value="default" /><el-option label="销量优先" value="sales" /><el-option label="最新上架" value="newest" />
      </el-select>
      <el-select v-model="queryParams.priceSort" placeholder="价格排序" style="width: 110px">
        <el-option label="价格排序" value="" /><el-option label="价格从低到高" value="asc" /><el-option label="价格从高到低" value="desc" />
      </el-select>
    </div>
    <!-- 商品列表 -->
    <div class="product-grid">
      <div v-for="(item, index) in productList" :key="index" class="product-card">
        <div class="product-image">
          <el-image :src="item.image" fit="contain">
            <template #error><div class="image-placeholder"><el-icon :size="40" color="#ccc"><Picture /></el-icon></div></template>
          </el-image>
        </div>
        <div class="product-info">
          <div class="product-name">{{ item.name }}</div>
          <div class="product-price">
            <span v-if="item.tag" class="price-tag">{{ item.tag }}</span>
            <span class="current-price">¥{{ item.price }}</span>
            <span class="original-price">¥{{ item.originalPrice }}</span>
            <div class="add-cart" @click="handleAddCart(item)"><el-icon><Plus /></el-icon></div>
          </div>
        </div>
      </div>
    </div>
    <el-empty v-if="productList.length === 0" description="暂无协议供货商品" />
    <TablePagination v-if="productList.length > 0" v-model:page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :total="total" @change="handleQuery" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Search, Picture, Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { PageTitle, TablePagination } from '@/components'

const queryParams = reactive({ pageNum: 1, pageSize: 15, keyword: '', minPrice: '', maxPrice: '', category: '', sortType: 'default', priceSort: '' })
const total = ref(100)

const productList = ref([
  { id: 1, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '协议价', image: '' },
  { id: 2, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '' },
  { id: 3, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '' },
  { id: 4, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '' },
  { id: 5, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '' },
  { id: 6, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '' },
  { id: 7, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '' },
  { id: 8, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '' },
  { id: 9, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '' },
  { id: 10, name: '格力KFR-72LW/定频冷暖空调柜机3P', price: '1,299', originalPrice: '1,899', tag: '', image: '' }
])

const handleQuery = () => {}
const handleAddCart = (_item: any) => { ElMessage.success('已加入购物车') }
</script>

<style scoped lang="scss">

.search-bar { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; .price-range { display: flex; align-items: center; gap: 5px; .range-separator { color: #999; } } }
.sort-bar { display: flex; gap: 10px; margin-bottom: 20px; }
.product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
.product-card { background: #fff; border-radius: 8px; overflow: hidden; transition: all 0.2s; &:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .product-image { height: 160px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; padding: 10px; .el-image { width: 100%; height: 100%; } .image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f5f5f5; } } .product-info { padding: 12px; .product-name { font-size: 13px; color: #333; line-height: 1.4; height: 36px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 8px; } .product-price { display: flex; align-items: center; gap: 5px; position: relative; .price-tag { font-size: 12px; color: #e60012; } .current-price { font-size: 16px; font-weight: bold; color: #e60012; } .original-price { font-size: 12px; color: #999; text-decoration: line-through; } .add-cart { position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #e60012; color: #e60012; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; &:hover { background: #e60012; color: #fff; } } } } }

</style>
