<template>
  <div class="site-product-page">
    <div class="site-product-container">
      <!-- 搜索区域（独立卡片） -->
      <div class="search-card">
        <el-form :model="queryParams" :inline="true" label-width="80px">
          <el-form-item label="名称/编号">
            <el-input v-model="queryParams.keyword" placeholder="请输入商品名称/编号搜索" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="商品品牌">
            <el-select v-model="queryParams.brand" placeholder="请选择" clearable style="width: 120px">
              <el-option label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品来源">
            <el-input v-model="queryParams.source" placeholder="请输入商品来源" clearable style="width: 140px" />
          </el-form-item>
          <el-form-item label="是否自营">
            <el-select v-model="queryParams.isSelf" placeholder="请选择" clearable style="width: 100px">
              <el-option label="全部" value="" />
              <el-option label="是" value="1" />
              <el-option label="否" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select v-model="queryParams.auditStatus" placeholder="请选择" clearable style="width: 120px">
              <el-option label="全部" value="" />
              <el-option label="待审核" value="0" />
              <el-option label="已通过" value="1" />
              <el-option label="已拒绝" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="上下架状态">
            <el-select v-model="queryParams.shelfStatus" placeholder="请选择" clearable style="width: 120px">
              <el-option label="全部" value="" />
              <el-option label="上架" value="1" />
              <el-option label="下架" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品类型">
            <el-select v-model="queryParams.productType" placeholder="请选择" clearable style="width: 120px">
              <el-option label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品类目">
            <el-select v-model="queryParams.category1" placeholder="一级类目" clearable style="width: 120px">
              <el-option label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryParams.category2" placeholder="二级类目" clearable style="width: 120px">
              <el-option label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryParams.category3" placeholder="三级类目" clearable style="width: 120px">
              <el-option label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            <el-button type="primary" icon="Upload" @click="handleImport">导入</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格区域（独立卡片） -->
      <div class="table-card">
        <el-table v-loading="loading" :data="productList" border>
          <el-table-column label="商品编号" align="center" prop="productNo" width="100" />
          <el-table-column label="商品图片" align="center" width="100">
            <template #default="scope">
              <el-image
                :src="scope.row.imageUrl"
                fit="cover"
                style="width: 60px; height: 60px; border-radius: 4px"
                :preview-src-list="[scope.row.imageUrl]"
                preview-teleported
              />
            </template>
          </el-table-column>
          <el-table-column label="商品信息" align="left" min-width="200">
            <template #default="scope">
              <div class="product-info">
                <div class="product-name">{{ scope.row.name }}</div>
                <div class="product-brand">品牌：{{ scope.row.brand }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="主站分类" align="center" prop="mainCategory" width="80" />
          <el-table-column label="赠礼分类" align="center" prop="giftCategory" width="80" />
          <el-table-column label="场景标签" align="center" prop="sceneTag" width="80" />
          <el-table-column label="单位" align="center" width="100">
            <template #default="scope">
              <div>单位：{{ scope.row.unit }}</div>
              <div>起订量：{{ scope.row.minOrder }}</div>
            </template>
          </el-table-column>
          <el-table-column label="SKU价格" align="center" width="120">
            <template #default="scope">
              <div>市场价：<span class="price">¥{{ scope.row.marketPrice }}</span></div>
              <div>会员价：<span class="price red">¥{{ scope.row.memberPrice }}</span></div>
              <div>成本价：<span class="price">¥{{ scope.row.costPrice }}</span></div>
            </template>
          </el-table-column>
          <el-table-column label="库存" align="center" width="120">
            <template #default="scope">
              <div>库存总数：<span class="stock">{{ scope.row.stock }}</span></div>
              <div>可用库存：{{ scope.row.availableStock }}</div>
              <div>虚拟库存：{{ scope.row.virtualStock }}</div>
              <el-link type="primary" @click="handleViewStock(scope.row)">[可用库存明细]</el-link>
            </template>
          </el-table-column>
          <el-table-column label="上下架状态" align="center" width="90">
            <template #default="scope">
              <el-tag :type="scope.row.shelfStatus === '上架' ? 'success' : 'info'" size="small">
                {{ scope.row.shelfStatus }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" width="80" />
          <el-table-column label="操作" align="center" width="80">
            <template #default="scope">
              <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script setup name="GiftSiteProduct" lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 查询参数
const queryParams = reactive({
  keyword: '',
  brand: '',
  source: '',
  isSelf: '',
  auditStatus: '',
  shelfStatus: '',
  productType: '',
  category1: '',
  category2: '',
  category3: '',
  pageNum: 1,
  pageSize: 10
});

// 列表数据
const productList = ref([
  {
    id: '1',
    productNo: '002063913',
    imageUrl: '/img/商品1.jpg',
    name: '水洗棉毛巾被四件套',
    brand: '柠檬好梦',
    mainCategory: '床品套件',
    giftCategory: '家用电器',
    sceneTag: '',
    unit: '个',
    minOrder: 1,
    marketPrice: '688.00',
    memberPrice: '165.00',
    costPrice: '142.00',
    stock: 999,
    availableStock: 0,
    virtualStock: 999,
    shelfStatus: '上架',
    remark: ''
  },
  {
    id: '2',
    productNo: '002065000',
    imageUrl: '/img/商品2.jpg',
    name: '雅兰家纺印花四件套（花色：绽放时光）YLT2203 被套200*230cm床单230*230cm枕套48*74cm*2',
    brand: '国产',
    mainCategory: '床品套件',
    giftCategory: '四件套',
    sceneTag: '',
    unit: '个',
    minOrder: 100,
    marketPrice: '139.00',
    memberPrice: '92.00',
    costPrice: '71.00',
    stock: 999,
    availableStock: 0,
    virtualStock: 999,
    shelfStatus: '上架',
    remark: ''
  },
  {
    id: '3',
    productNo: '002065001',
    imageUrl: '/img/商品3.jpg',
    name: '膳魔师精品JNL保温水杯有色男女便携304不锈钢直身保温杯 JNL-502版 游杯 500ml',
    brand: '膳魔师',
    mainCategory: '保温杯',
    giftCategory: '保温杯',
    sceneTag: '',
    unit: '个',
    minOrder: 12,
    marketPrice: '445.00',
    memberPrice: '202.00',
    costPrice: '155.00',
    stock: 999,
    availableStock: 0,
    virtualStock: 999,
    shelfStatus: '上架',
    remark: ''
  }
]);
const loading = ref(false);
const total = ref(3);

// 查询列表
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 300);
};

// 搜索
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

// 重置
const resetQuery = () => {
  Object.assign(queryParams, {
    keyword: '',
    brand: '',
    source: '',
    isSelf: '',
    auditStatus: '',
    shelfStatus: '',
    productType: '',
    category1: '',
    category2: '',
    category3: ''
  });
  handleQuery();
};

// 导入
const handleImport = () => {
  ElMessage.info('导入功能开发中...');
};

// 查看库存明细
const handleViewStock = (row: any) => {
  ElMessage.info(`查看库存明细：${row.productNo}`);
};

// 删除
const handleDelete = (row: any) => {
  ElMessageBox.confirm(`是否确认删除商品"${row.productNo}"？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功');
    getList();
  }).catch(() => {});
};

onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss">
.site-product-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20px;
}

.site-product-container {
  max-width: 1400px;
  margin: 0 auto;
}

.search-card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 12px;
}

.table-card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

.product-info {
  text-align: left;
  
  .product-name {
    font-size: 13px;
    color: #303133;
    line-height: 1.4;
    margin-bottom: 5px;
  }
  
  .product-brand {
    font-size: 12px;
    color: #909399;
  }
}

.price {
  color: #303133;
  
  &.red {
    color: #f56c6c;
  }
}

.stock {
  color: #e6a23c;
}

.action-link {
  cursor: pointer;
  
  &.danger {
    color: #f56c6c;
    &:hover { color: #f78989; }
  }
}
</style>
