<template>
  <div class="product-list" v-loading="productListLoading">
    <section class="container"> 
      <h1 class="page-title">商品列表</h1>
      <section class="filter-section">
        <div class="filter-row">
          <el-input
            v-model="searchAlgorithm"
            size="middle"
            placeholder="输入币种或算法搜索"
            clearable
            @clear="handleAlgorithmClear"
            @keyup.enter.native="handleAlgorithmSearch"
            class="search-input"
          >
            <template #append>
              <el-button type="primary" @click="handleAlgorithmSearch">搜索</el-button>
            </template>
          </el-input>
        </div>
      </section>
      <div class="product-list-grid">
        <div
          v-for="(product, idx) in products"
          :key="product.shopId || product.id || idx"
          class="product-item"
          @click="handleProductClick(product)"
          tabindex="0"
          aria-label="查看详情"
        >
          <!-- <img :src="product.image || 'https://img.yzcdn.cn/vant/apple-1.jpg'" :alt="product.name" class="product-image" /> -->
          <img src="../../assets/imgs/commodity.png" :alt="product.name" class="product-image" />
          <div class="product-info">
            <h4 class="title-line">
              <span class="label">店铺：</span>
              <span class="value ellipsis" :title="product.shopName || product.name">{{ product.shopName || product.name }}</span>
            </h4>
            <p class="info-line coin-line">
              <span class="label">币种：</span>
              <el-tooltip :content="product.coin" placement="top" :open-delay="80">
                <span class="value ellipsis" tabindex="0" :aria-label="`币种 ${product.coin}`">{{ product.coin }}</span>
              </el-tooltip>
            </p>
            <p class="info-line algorithm-line">
              <span class="label">算法：</span>
              <el-tooltip :content="product.algorithm" placement="top" :open-delay="80">
                <span class="value ellipsis" tabindex="0" :aria-label="`算法 ${product.algorithm}`">{{ product.algorithm }}</span>
              </el-tooltip>
            </p>
            <div class="product-footer">
              <div class="paytypes">
                <span class="paytypes-label">支付方式：</span>
                <el-tooltip
                  v-for="(pt, idx) in (product.payTypes || [])"
                  :key="idx"
                  :content="formatPayType(pt)"
                  placement="top"
                  :open-delay="80"
                >
                  <img :src="pt.image" :alt="formatPayType(pt)" class="paytype-icon" />
                </el-tooltip>
              </div>
              <div class="right-meta">
                <span class="product-sold" aria-label="已售数量">已售：{{ product && product.saleNumber != null ? product.saleNumber : 0 }}</span>
              </div>
            </div>
          </div>
        </div>
        <div v-if="products.length === 0 && !productListLoading" class="empty-state">
          <i class="el-icon-goods"></i>
          <p>暂无商品数据</p>
          <p style="font-size: 12px; color: #999; margin-top: 8px;">请检查网络连接或联系管理员</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { addToCart } from "../../utils/cartManager";
import Index from "./index";

export default {
  mixins: [Index],
  name: "ProductList",

  mounted() {},
  methods: {
    /**
     * 将 payType 显示为 CHAIN-COIN 文本
     */
    formatPayType(item) {
      try {
        const chain = (item && item.chain ? String(item.chain) : '').toUpperCase()
        const coin = (item && item.coin ? String(item.coin) : '').toUpperCase()
        if (chain && coin) return `${chain}-${coin}`
        return chain || coin || ''
      } catch (e) {
        return ''
      }
    },
    /**
     * 处理商品点击 - 跳转到详情页
     */


    /**
     * 处理添加到购物车
     */
    handleAddToCart(product) {
      try {
        addToCart({
          id: product.id,
          title: product.title,
          price: product.price,
          image: product.image,
          quantity: 1,
        });
        this.$message({
          message: "已添加到购物车",
          type: "success",
          showClose: true
        });
      } catch (error) {
        console.error("添加到购物车失败:", error);
        console.log("添加到购物车失败，请稍后重试");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.product-list {
  background: #f5f5f5;
  padding: 24px;
}
.container {
  width: 80%;
  margin: 0 auto;
  text-align: left;
  h1 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }
}
.filter-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  width: 80%;
  margin-top: 18px;
}

.filter-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.product-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 30px;
  margin-top: 100px;
  // background: palegoldenrod;
  display: flex;
  flex-wrap: wrap;
}
.product-item {
  width: 400px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 40vh;
}
.product-image {
  width: 57%;
  height:55%;
  object-fit: cover;
  margin-bottom: 12px;
}
.product-info {
  width: 100%;
}
.title-line{
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  margin: 0 0 4px 0;
  font-weight: normal;
}
.title-line .label{
  font-weight: 700;
}
.info-line {
  display: flex;
  align-items: center;
  gap: 6px;
}
.info-line .label { color: #334155; font-weight: 700; }
.info-line .value {
  flex: 1;
  min-width: 0;
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.coin-line { font-size: 14px; margin-top: 8px; }
.algorithm-line { font-size: 14px; margin-top: 6px; }
.algorithm-line .value.bold { font-weight: bold; }
.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.search-input{
  width: 420px;
}
/* 轻度统一高度与圆角，保留 Element 默认视觉 */
::v-deep .search-input .el-input__inner{
  height: 40px;
  line-height: 40px;
  border-radius: 6px 0 0 6px;
  padding: 0 14px;
}
::v-deep .search-input .el-input__inner::placeholder{
  color: #9aa4b2; /* 略浅的占位符 */
}
::v-deep .search-input .el-input__inner:focus{
  box-shadow: 0 0 0 2px rgba(64,158,255,.12);
}
::v-deep .search-input .el-input-group__append .el-button{
  height: 40px;
  border-radius: 0 6px 6px 0;
  padding: 0 16px;
}
.right-meta{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.shop-name{
  color: #64748b;
  font-size: 12px; /* 与已售一致 */
}
.product-price {
  color: #e53e3e;
  font-weight: bold;
  max-width:90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.price-wrap { display: inline-flex; align-items: baseline; gap: 6px; }
.unit { color: #999; font-size: 12px; }
.product-sold { color: #64748b; font-size: 12px; }
.paytypes { display: inline-flex; align-items: center; gap: 8px; }
.paytype-icon { width: 22px; height: 22px; border-radius: 4px; display: inline-block; }
.paytypes-label { color: #64748b; font-size: 12px; }
.add-cart-btn {
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.add-cart-btn:hover {
  background: #369870;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #ddd;
}

.empty-state p {
  margin: 8px 0;
  font-size: 16px;
}
</style>