Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true,
    styleIsolation: 'shared',
  },

  properties: {
    data: {
      type: Array,
      value: [],
    },
    indicatorDots: {
      type: Boolean,
      value: true,
    },
    indicatorMode: {
      type: String,
      value: 'oval', // solid / oval / number
    },
    indicatorColor: String,
    indicatorActiveColor: String,
    indicatorBottom: String,
    current: {
      type: Number,
      value: 0,
      observer(this, current: number) {
        this.setData({
          currentDotIndex: current,
        });
      },
    },
    autoplay: {
      type: Boolean,
      value: true,
    },
    interval: {
      type: Number,
      value: 5000,
    },
    duration: {
      type: Number,
      value: 500,
    },
    circular: {
      type: Boolean,
      value: true,
    },
    imageMode: {
      type: String,
      value: 'aspectFill',
    },
    imageWidth: String,
    imageHeight: String,
  },

  data: {
    currentDotIndex: 0,
    swiperStyle: '',
  },

  lifetimes: {
    attached() {
      const { imageWidth, imageHeight } = this.data;
      let swiperStyle = '';

      if (imageWidth) swiperStyle += `--swiper-image-width:${imageWidth}`;
      if (imageHeight) swiperStyle += `--swiper-image-height:${imageHeight}`;

      this.setData({ swiperStyle });
    },
  },

  methods: {
    onChangeSwiperItem(e: WechatMiniprogram.TouchEvent) {
      const index = e.detail.current;

      this.setData({ currentDotIndex: index });
      this.triggerEvent('change', { index });
    },

    onClickSwiperItem(e: WechatMiniprogram.TouchEvent) {
      const { index } = e.currentTarget.dataset;
      console.log('onClickSwiperItem', index);

      this.triggerEvent('click', { index });
    },
  },
});