<template>
  <div>
    <div class="product-detail-container">
      <!-- 左侧图片轮播区域 -->
      <div class="left-section">
        <el-carousel
          ref="carousel"
          height="500px"
          class="product-carousel"
          @change="handleCarouselChange"
          indicator-position="none"
        >
          <el-carousel-item v-for="(img, index) in productImages" :key="index">
            <img
              :src="img"
              :alt="`商品图片${index + 1}`"
              class="carousel-img"
            />
          </el-carousel-item>
        </el-carousel>
        <div class="hint-text">
          温馨提示：以上图片仅供参考，若图片与实物有所不同，则以实物为准。
        </div>
        <!-- 自定义图片指示器 -->
        <div class="image-indicators">
          <div
            v-for="(img, index) in productImages"
            :key="index"
            class="indicator-item"
            :class="{ active: activeIndex === index }"
            @click="handleIndicatorClick(index)"
          >
            <img :src="img" :alt="`缩略图${index + 1}`" class="indicator-img" />
          </div>
        </div>
      </div>

      <!-- 右侧商品信息区域保持不变 -->
      <div class="right-section">
        <h2 class="product-title">
          {{ productTitle }}
          <span class="product-count">[{{ productCount }}]</span>
        </h2>

        <div class="product-tags">
          <el-tag type="info" size="mini">[产品标签]</el-tag>
          <span class="subtitle">{{ productSubtitle }}</span>
        </div>

        <div class="price-info">
          <span class="price-label">售价</span>
          <span class="price-amount">¥{{ productPrice }}</span>
          <span class="sales-volume">已售 {{ salesVolume }}万</span>
        </div>

        <div class="product-attr">
          <div class="attr-item">
            <span class="attr-label">起订量</span>
            <span class="attr-value">{{ moq }}</span>
          </div>

          <div class="attr-item">
            <span class="attr-label">收货方式</span>
            <span class="attr-value">{{ deliveryMethod }}</span>
          </div>

          <div class="attr-item spec-group">
            <span class="attr-label">商品规格</span>
            <div class="custom-radio-group">
              <label
                v-for="(spec, idx) in productSpecs"
                :key="idx"
                class="custom-radio"
                :class="{ 'is-checked': selectedSpec === spec }"
                @click="selectedSpec = spec"
              >
                <span class="radio-text">{{ spec }}</span>
              </label>
            </div>
          </div>

          <div class="attr-item">
            <span class="attr-label">发货地</span>
            <span class="attr-value">{{ origin }}</span>
          </div>

          <div class="attr-item">
            <span class="attr-label">其他</span>
            <span class="attr-value">{{ otherInfo }}</span>
          </div>

          <div class="attr-item">
            <span class="attr-label">配送范围</span>
            <span class="attr-value">{{ deliveryRange }}</span>
          </div>
        </div>

        <div class="quantity-control">
          <el-button
            icon="el-icon-minus"
            circle
            @click="decreaseQuantity"
          ></el-button>
          <span class="quantity-value">{{ quantity }}</span>
          <el-button
            icon="el-icon-plus"
            circle
            @click="increaseQuantity"
          ></el-button>
          <el-button type="primary" class="buy-btn">一口价购买</el-button>
          <el-button type="success" class="cart-btn">加入购物车</el-button>
          <el-button type="info" class="bargain-btn">议价</el-button>
          <el-button
            icon="el-icon-share"
            circle
            class="share-btn"
            @click="handleShare"
          ></el-button>
        </div>
      </div>
    </div>

    <div class="product-bottom">
      <!-- 左侧热销模块 -->
      <div class="hot-recommend-sidebar">
        <div class="hot-title">热销推荐</div>
        <div
          v-for="(item, index) in hotRecommendData"
          :key="index"
          class="product-item"
        >
          <img v-lazy="item.imgUrl" alt="" />
          <div class="product-name">{{ item.title }}</div>
          <div class="product-price">￥{{ item.price }}</div>
        </div>
      </div>

      <!-- 右侧 -->
      <div class="product-right">
        <div class="product-tabs">
          <span class="tab-item active">商品详情</span>
          <span class="tab-item">商品评价(125)</span>
        </div>

        <!-- 商品详情 -->
        <div class="product-detail-main"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductDetail",
  data() {
    return {
      productImages: [
        "https://picsum.photos/id/102/500/500",
        "https://picsum.photos/id/103/500/500",
        "https://picsum.photos/id/104/500/500",
        "https://picsum.photos/id/105/500/500",
      ],
      activeIndex: 0, // 当前激活的图片索引
      productTitle: "面包",
      productCount: "52个",
      productSubtitle: "副标题",
      productPrice: 509,
      salesVolume: 1.22,
      moq: 1,
      deliveryMethod: "邮寄",
      productSpecs: ["规格一", "规格二", "规格三", "规格四", "规格五"],
      selectedSpec: "规格一",
      origin: "江苏省苏州市吴中区",
      otherInfo: "下单填写留言，即免费赠送精美贺卡！",
      deliveryRange: "全国（可配送至全国1000多个城市，苏州市区内免配送费）",
      quantity: 1,
      hotRecommendData: [
        {
          id: 1,
          imgUrl: "https://picsum.photos/id/103/500/500", // 替换成实际图片地址，也可用本地相对路径
          title: "北欧花艺素雅仿真花",
          price: 359,
        },
        {
          id: 2,
          imgUrl: "https://picsum.photos/id/103/500/500",
          title: "生日玫瑰鲜花",
          price: 359,
        },
        {
          id: 3,
          imgUrl: "https://picsum.photos/id/103/500/500",
          title: "香雪兰小苍兰鲜花",
          price: 359,
        },
        {
          id: 4,
          imgUrl: "https://picsum.photos/id/103/500/500",
          title: "现代创意简约仿真花艺",
          price: 359,
        },
      ],
    };
  },
  methods: {
    // 处理轮播图切换事件 - 同步更新activeIndex
    handleCarouselChange(index) {
      this.activeIndex = index;
    },

    // 处理指示器点击事件 - 修复切换功能
    handleIndicatorClick(index) {
      // 1. 更新当前激活索引
      this.activeIndex = index;

      // 2. 关键修复：确保轮播组件已加载，再调用切换方法
      this.$nextTick(() => {
        if (this.$refs.carousel) {
          // 调用Element UI轮播组件的官方方法切换图片
          this.$refs.carousel.setActiveItem(index);
        }
      });
    },

    decreaseQuantity() {
      if (this.quantity > 1) {
        this.quantity--;
      }
    },

    increaseQuantity() {
      this.quantity++;
    },

    handleShare() {
      this.$message.info("分享功能待实现");
    },
  },
  mounted() {
    // 初始化检查轮播组件是否存在
    if (!this.$refs.carousel) {
      console.warn("轮播组件未正确加载，请检查ref属性是否设置");
    }
  },
};
</script>

<style lang="scss" scoped>
.product-detail-container {
  display: flex;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  border-radius: 4px;

  .left-section {
    width: 40%;
    margin-right: 20px;
    display: flex;
    flex-direction: column;

    .product-carousel {
      border: 1px solid #eaeaea;
      border-radius: 4px;
      margin-bottom: 15px;

      .carousel-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .hint-text {
      color: #ccc;
      font-size: 12px;
      margin-bottom: 10px;
    }

    .image-indicators {
      display: flex;
      gap: 10px;
      justify-content: center;
      padding: 5px 0;

      .indicator-item {
        width: 80px;
        height: 80px;
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: 4px;
        transition: all 0.3s ease;
        overflow: hidden;

        &.active {
          border-color: #409eff;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }

        .indicator-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
      }
    }
  }

  .right-section {
    width: 60%;

    .product-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;

      .product-count {
        font-size: 14px;
        color: #666;
      }
    }

    .product-tags {
      margin-bottom: 15px;

      .subtitle {
        margin-left: 5px;
        color: #666;
      }
    }

    .price-info {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .price-label {
        font-weight: bold;
        margin-right: 10px;
      }

      .price-amount {
        font-size: 24px;
        color: #ff4d4f;
        margin-right: 20px;
      }

      .sales-volume {
        color: #999;
      }
    }

    .product-attr {
      margin-bottom: 20px;

      .attr-item {
        display: flex;
        flex-direction: column;
        margin-bottom: 15px;

        .attr-label {
          font-weight: bold;
          margin-bottom: 8px;
          color: #333;
        }

        .attr-value {
          color: #666;
        }

        &.spec-group {
          margin-top: 20px;
          margin-bottom: 20px;

          .custom-radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 5px;

            .custom-radio {
              display: inline-block;
              padding: 8px 15px;
              border: 1px solid #ddd;
              border-radius: 4px;
              cursor: pointer;
              transition: all 0.3s ease;
              background-color: #fff;
              position: relative;

              &:hover {
                border-color: #409eff;
              }

              &.is-checked {
                border-color: #409eff;
                background-color: #f0f7ff;
                color: #409eff;
                font-weight: 500;

                &::after {
                  /* content: "✓"; */
                  position: absolute;
                  right: 5px;
                  bottom: 2px;
                  font-size: 12px;
                  color: #409eff;
                }
              }

              .radio-text {
                user-select: none;
              }
            }
          }
        }
      }
    }

    .quantity-control {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 30px;

      .quantity-value {
        width: 40px;
        text-align: center;
      }

      .buy-btn,
      .cart-btn,
      .bargain-btn {
        margin-right: 10px;
      }
    }
  }
}

.product-bottom {
  margin-top: 50px;
  display: flex;

  .hot-recommend-sidebar {
    min-width: 200px;
    padding: 10px;
    // border: 1px solid #eee;
    background-color: #f7f9fa;
    margin-right: 20px;

    .hot-title {
      border-left: 4px solid #ff4d4f;
      padding-left: 10px;
      margin-bottom: 20px;
    }

    .product-item {
      margin-bottom: 20px;
      text-align: center;

      img {
        width: 100%;
        height: auto;
        margin-bottom: 8px;
      }

      .product-name {
        font-size: 14px;
        margin-bottom: 4px;
      }

      .product-price {
        font-size: 12px;
        color: #f40;
      }
    }
  }

  .product-right {
    width: 1000%;
  }
  .product-tabs {
    display: flex;
    // border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    background-color: #f7f9fa;
    padding: 10px;

    .tab-item {
      padding: 10px 20px;
      cursor: pointer;
      margin-right: 10px;
      color: #333;

      &.active {
        color: #ff4d4f;
        border-bottom: 2px solid #ff4d4f;
      }
    }
  }
  .product-detail-main {
    flex: 1;
    padding: 10px;
    background-color: #fff;

    .product-banner {
      width: 100%;
      height: auto;
      margin-bottom: 20px;
    }

    .product-desc {
      font-size: 14px;
      line-height: 1.6;
      color: #666;
    }
  }
}
</style>
    