<!--
 * 轮播图
  -->
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import { isEmpty } from 'src/common/utils';
// import * as echarts from 'echarts';
// type EChartsOption = echarts.EChartsOption;

interface Props {
  itemKey: string;
  list: any[];
  times?: number;
  navigation?: boolean; // 小圆点点击导航
}

const props = withDefaults(defineProps<Props>(), {
  itemKey: 'id',
  list: () => [],
  times: 10000,
  navigation: false,
});

const pointActive = ref<any>(1);
const lastIndex = ref(0);
const timer = ref<any>(null);

watch(
  () => props.list,
  () => {
    listChange();
  }
);

onMounted(() => {
  //
});

onBeforeUnmount(() => {
  offTimer();
});

// list改变
function listChange() {
  console.log('listChange', props.list);

  offTimer(); // 清除定时器
  if (isEmpty(props.list)) {
    resetIndex();
  } else {
    // 如果当前下标 > list长度，则下标重新开始
    if (pointActive.value > props.list.length) {
      resetIndex();
    }
    onStartTimer();
  }
}

function onStartTimer() {
  timer.value = setTimeout(() => {
    const maxLength = props.list.length;
    if (pointActive.value >= maxLength) {
      pointActive.value = 1;
      lastIndex.value = 0;
    } else {
      pointActive.value++;
      lastIndex.value++;
    }
    onStartTimer();
  }, props.times);
}

function onClickPoint(val: any, index: number) {
  offTimer();
  if (index > lastIndex.value) {
    // 右
  } else if (index < lastIndex.value) {
    // 左
  } else {
    return;
  }
  pointActive.value = val[props.itemKey];
  lastIndex.value = index;
  onStartTimer();
}

function offTimer() {
  if (timer.value) {
    clearTimeout(timer.value);
    timer.value = null;
  }
}

function resetIndex() {
  pointActive.value = 1;
  lastIndex.value = 0;
}
</script>
<template>
  <div class="carousel-box">
    <div class="carousel">
      <div class="carousel-content">
        <div class="carousel-item-box">
          <!-- item -->
          <template v-for="(i, index) in props.list" :key="index">
            <div
              class="item-box opacity-in"
              v-show="pointActive === i[props.itemKey]"
            >
              <!-- some item -->
              <div class="my-item-box center">
                <div class="fit" :id="`chart-pie-dom-${i[props.itemKey]}`">
                  {{ i.label }}
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="carousel-points" v-if="props.navigation">
        <div
          class="point"
          :class="{ 'active-point': pointActive === i[props.itemKey] }"
          v-for="(i, index) in props.list"
          :key="index"
          @click="onClickPoint(i, index)"
        ></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@keyframes opacity-in {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.carousel-box {
  width: 100%;
  height: 100%;
}
.carousel {
  width: 100%;
  height: 100%;
  border: 1px solid $primary;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.carousel-content {
  flex: 1;
  overflow: hidden;
}
.carousel-item-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.item-box {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: absolute;
  background-color: pink;
  top: 0;
  left: 0;
}

.opacity-in {
  animation: opacity-in 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.my-item-box {
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 40px;
}

.carousel-points {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 4px;
  padding-bottom: 0px;
}
.point {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  margin-bottom: 4px;
  border-radius: 50%;
  border: 1px solid $primary;
  cursor: pointer;
  transition: all 0.5s;
}
.active-point {
  height: 10px;
  width: 30px;
  border-radius: 10px;
  background-color: $primary;
}
</style>
