<template>
  <div class="carousel" style="width: 500px">
    <el-carousel
      v-if="type === 'image'"
      ref="carouselRef"
      :interval="option.interval"
      :arrow="option.arrow"
      :indicator-position="option.indicatorPosition"
      @change="handleChange"
    >
      <el-carousel-item v-for="(item, index) in data" :key="index">
        <img :src="item.image" style="width: 100%; height: auto" />
      </el-carousel-item>
    </el-carousel>

    <div v-if="type === 'video'" class="carousel-video">
      <!-- <img :src="state.videoPicture" class="carousel-video-picture" /> -->
      <video ref="videoRef" controls class="carousel-video-video" width="100%" height="100%" @ended="pauseVideo">
        <source :src="state.videoUrl" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <!-- <span class="carousel-video-btn" @click="handlePlay">
        <el-icon><VideoPlay /></el-icon>
      </span> -->
    </div>

    <div class="carousel-container">
      <span class="carousel-arrow carousel-arrow-left" @click="handleLeftClick">
        <el-icon><ArrowLeftBold /></el-icon>
      </span>
      <el-scrollbar ref="scrollbarRef" class="carousel-list">
        <div
          v-for="(item, index) in data"
          :key="index"
          :class="`carousel-list-item ${state.current === index ? 'active' : ''}`"
          @click="handleClick(index)"
        >
          <el-image style="width: 100px; height: 100px" :src="item.image ?? item" fit="cover" />
        </div>
      </el-scrollbar>
      <span class="carousel-arrow carousel-arrow-right" @click="handleRightClick">
        <el-icon><ArrowRightBold /></el-icon>
      </span>
    </div>
  </div>
</template>
<script setup name="custom-carousel-picture">
import { reactive, ref } from 'vue';

const props = defineProps({
  data: { type: Array, default: () => [] },
  type: { type: String, default: 'image' },
  option: {
    type: Object,
    default: () => {
      return {
        height: '',
        initialIndex: 0,
        autoplay: true,
        loop: true,
        interval: 3000,
        arrow: 'never',
        indicatorPosition: 'none',
      };
    },
  },
});

const emit = defineEmits(['']);

const carouselRef = ref(null);
const scrollbarRef = ref(null);
const videoRef = ref(null);

const state = reactive({
  current: 0,
  isReady: false,
  videoPicture: '',
  videoUrl: '',
});

const handleChange = (cur, last) => {
  state.current = cur;
};

const handleLeftClick = () => {
  // const index = carouselRef.value.activeIndex;
  // carouselRef.value.setActiveItem(index + 1);
  scrollbarRef.value.setScrollLeft(scrollbarRef.value.wrapRef.scrollLeft - 120);
};

const handleRightClick = () => {
  // const index = carouselRef.value.activeIndex;
  // carouselRef.value.setActiveItem(index - 1);
  scrollbarRef.value.setScrollLeft(scrollbarRef.value.wrapRef.scrollLeft + 120);
};

const playVideo = () => {
  if (videoRef.value) {
    videoRef.value.play();
  }
};

const pauseVideo = () => {
  if (videoRef.value) {
    videoRef.value.pause();
  }
};

const handleClick = (index) => {
  const { type, data } = props;
  switch (type) {
    case 'image': {
      carouselRef.value.setActiveItem(index);
      break;
    }
    case 'video': {
      const url = data[index];
      state.videoUrl = url;
      playVideo();
      break;
    }
  }
};

const handlePlay = () => {
  playVideo();
};
</script>
<style lang="scss" scoped>
.carousel {
  display: flex;
  width: 100%;
  flex-direction: column;
  &-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 30px;
  }
  &-list {
    flex: 3;
    :deep(.el-scrollbar__bar) {
      display: none !important;
    }
    :deep(.el-scrollbar__view) {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    &-item {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px;
      width: 100px;
      height: 100px;
      border: 2px solid #ffffff;
      border-radius: 4px;
      text-align: center;
      color: var(--el-color-danger);
      background: var(--el-color-danger-light-9);
      flex-shrink: 0;
      cursor: pointer;
      &.active {
        border-color: var(--el-color-primary);
      }
    }
  }
  &-arrow {
    width: 50px;
    text-align: center;
    .el-icon {
      display: inline-block;
      margin: 0 auto;
      width: 40px;
      height: 40px;
      font-size: 32px;
      line-height: 40px;
      cursor: pointer;
    }
  }
  &-video {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 300px;
    &-picture {
      position: absolute;
      z-index: 10;
    }
    &-video {
      position: absolute;
      z-index: 11;
    }
    &-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 12;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: -25px;
      margin-left: -25px;
      width: 50px;
      height: 50px;
      border-radius: 25px;
      background: rgb(0 0 0 / 20%);
      flex-direction: row;
      cursor: pointer;
      .el-icon {
        font-size: 32px;
        color: #ffffff;
      }
    }
  }
}
</style>
