<template>
  <div class="ModalCarousel">
    <n-carousel
      :autoplay="option.dataStyle.autoplay"
      :interval="option.dataStyle.interval"
      :centered-slides="option.dataStyle.centeredSlides"
      :direction="option.dataStyle.direction"
      :dot-placement="option.dataStyle.dotPlacement"
      :dot-type="option.dataStyle.dotType"
      :draggable="option.dataStyle.draggable"
      :effect="option.dataStyle.effect"
      :slides-per-view="option.dataStyle.slidesPerview"
      :show-arrow="option.dataStyle.showArrow"
      :show-dots="option.dataStyle.showDots"
    >
      <n-image
        v-for="(url, index) in option.dataset"
        preview-disabled
        :key="index"
        :object-fit="option.dataStyle.fit"
        :src="url"
        :fallback-src="requireErrorImg()"
        :width="w"
        :height="h"
      ></n-image>
      <template #arrow="{ prev, next }">
        <div class="arrow-left">
          <n-button
            type="text"
            :color="option.buttonStyle.buttonColor"
            :style="{
              display: flex,
              alignItems: center,
              justifyContent: center,
              width: option.buttonStyle.buttonWidth + 'px',
              height: option.buttonStyle.buttonHeight + 'px',
            }"
            @click="prev"
          >
            <LeftOutlined
              :style="{
                color: option.buttonStyle.iconColor,
                fontSize: option.buttonStyle.iconFontSize + 'px',
              }"
            />
          </n-button>
        </div>
        <div class="arrow-right">
          <n-button
            type="text"
            :color="option.buttonStyle.buttonColor"
            :style="{
              display: flex,
              alignItems: center,
              justifyContent: center,
              width: option.buttonStyle.buttonWidth + 'px',
              height: option.buttonStyle.buttonHeight + 'px',
            }"
            @click="next"
          >
            <RightOutlined
              :style="{
                color: option.buttonStyle.iconColor,
                fontSize: option.buttonStyle.iconFontSize + 'px',
              }"
            />
          </n-button>
        </div>
      </template>
      <template #dots="{ total, currentIndex, to }">
        <ul class="dots">
          <li
            v-for="index of total"
            :key="index"
            :class="{ ['is-active']: currentIndex === index - 1 }"
            @click="to(index - 1)"
          />
        </ul>
      </template>
    </n-carousel>
  </div>
</template>

<script setup lang="ts">
  import { ArrowBack, ArrowForward } from '@vicons/ionicons5';
  import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { requireErrorImg } from '@/utils';
  import { useChartDataFetch } from '@/hooks';
  import { icon } from '@/plugins';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';

  const props = defineProps({
    chartConfig: {
      type: Object as PropType<CreateComponentType>,
      required: true,
    },
  });

  const { w, h } = toRefs(props.chartConfig.attr);

  const option = reactive({
    dataset: props.chartConfig.option.dataset,
    dataStyle: props.chartConfig.option.dataStyle,
    buttonStyle: props.chartConfig.option.buttonStyle,
  });
</script>

<style lang="scss" scoped>
  .ModalCarousel {
    // overflow-y: auto;
    border: v-bind('`${option.buttonStyle.borderWidth}px`') solid
      v-bind('`${option.buttonStyle.borderColor}`');
    padding: 2px;
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');
  }
  .ModalCarousel::-webkit-scrollbar {
    display: none;
  }
  .ModalCarousel {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .arrow-left {
    display: flex;
    position: absolute;
    bottom: v-bind('`${option.buttonStyle.buttonBottom}px`');
    left: v-bind('`${option.buttonStyle.buttonLeftAndRight}px`');
  }
  .arrow-right {
    display: flex;
    position: absolute;
    bottom: v-bind('`${option.buttonStyle.buttonBottom}px`');
    right: v-bind('`${option.buttonStyle.buttonLeftAndRight}px`');
  }

  .dots {
    display: flex;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: v-bind('`${option.buttonStyle.dotBottom}px`');
    left: v-bind('`${option.buttonStyle.dotLeft}px`');
  }

  .dots li {
    display: inline-block;
    width: 12px;
    height: 4px;
    margin: 0 3px;
    border-radius: 4px;
    background-color: v-bind('`${option.buttonStyle.dotColor1}`');
    transition:
      width 0.3s,
      background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }

  .dots li.is-active {
    width: 40px;
    background: v-bind('`${option.buttonStyle.dotColor2}`');
  }

  ::v-deep .n-button {
    padding: 0px !important;
  }
</style>
