<!--
 * @Date: 2024-09-29 16:27:30
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-09-29 16:48:19
 * @FilePath: /hager/src/components/hagerHCarousel.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-h-carousel">
    <div class="carousel-container">
      <div v-if="items.length > 4" @click="prevItem" class="arrow left-arrow"><i class="el-icon-arrow-left"></i></div>
      <div class="carousel">
        <div class="carousel-track" :style="trackStyle">
          <div v-for="item in items" :key="item.id" class="carousel-item">
            <!-- <img :src="item.image" :alt="item.name" style="width: 100%;"> -->
            <div class="product-item">
              <el-image style="width: 14rem; height: 14rem;" :src="item.image" fit="fit"></el-image>
            </div>
            <h3>{{ item.name }}</h3>
            <p>{{ item.description }}</p>
          </div>
        </div>
      </div>
      <div v-if="items.length > 4" @click="nextItem" class="arrow right-arrow"><i class="el-icon-arrow-right"></i></div>
    </div>
  </div>
</template>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  data () {
    return {
      items: [{
        id: 1,
        image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        name: 'Item 1',
        description: 'This is the description for Item 1.'
      }, {
        id: 2,
        image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        name: 'Item 2',
        description: 'This is the description for Item 2.'
      }, {
        id: 3,
        image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        name: 'Item 3',
        description: 'This is the description for Item 3.'
      }, {
        id: 4,
        image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        name: 'Item 4',
        description: 'This is the description for Item 4.'
      }, {
        id: 5,
        image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        name: 'Item 5',
        description: 'This is the description for Item 5.'
      }, {
        id: 6,
        image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        name: 'Item 6',
        description: 'This is the description for Item 6.'
      }],
      currentIndex: 0,
    }
  },
  mounted () {

  },
  computed: {
    trackStyle() {
      return {
        transform: `translateX(-${this.currentIndex * 25}%)`
      };
    }
  },
  methods: {
    nextItem() {
      if (this.currentIndex < this.items.length - 4) {
        this.currentIndex++;
      } else {
        this.currentIndex = 0; // Loop back to start
      }
    },
    prevItem() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      } else {
        this.currentIndex = this.items.length - 4; // Loop to end
      }
    }
  }
}
</script>

<style lang="less">
.hager-h-carousel {
  .carousel-container {
    position: relative;
    width: 100%;
    // max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel {
    overflow: hidden;
    width: 100%; /* Adjust based on design */
  }

  .carousel-track {
    display: flex;
    transition: transform 0.3s ease-in-out;
  }

  .carousel-item {
    flex: 0 0 25%; /* 4 items, so each takes 25% */
    box-sizing: border-box;
    padding: 10px;
    padding-left: 0;
    // text-align: center;
    .product-item {
      height: auto;
      padding: 1.5rem;
      text-align: center;
      color: #333;
      border-radius: 8px;
      background-color: #f3f3f3;
    }
  }

  .arrow {
    background-color: #fff;
    // border: 1px solid #ccc;
    // padding: 10px;
    cursor: pointer;
    font-size: 1.5rem;
  }

  .left-arrow {
    position: absolute;
    left: -2rem;
  }

  .right-arrow {
    position: absolute;
    right: -2rem;
  }
}
</style>