<template>
  <div :class="['widget', 'dof-tag-page-container', hasMargin && 'slider-margin']">
    <slider
      :infinite="infinite"
      :scrollable="scrollable"
      class="dof-tag-page-container-slider"
      :index="sliderIndex"
      @change="sliderChange"
    >
      <slot></slot>
    </slider>
  </div>
</template>

<script>
export default {
  props: {
    infinite: {
      type: Boolean,
      default: false
    },
    sliderIndex: {
      type: [Number, String],
      default: 0
    },
    scrollable: {
      //设置是否可以通过滑动手势来切换页面，默认为 true
      type: Boolean,
      default: true
    },
    sliderStyles: {
      type: Object,
      default: () => ({})
    },
    hasMargin: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({}),
  computed: {},
  methods: {
    sliderChange(index) {
      // this.sliderIndex = index
      this.$emit('dofPanelSlider', index)
    }
  },
  watch: {
    sliderIndex(newVal) {
      if (this.sliderIndex !== newVal) {
        this.sliderIndex = newVal
      }
    }
  }
}
</script>

<style scoped>
.dof-tag-page-container {
  flex-direction: column;
}
.slider-margin {
  margin-top: 16px;
}
.dof-tag-page-container-slider {
  flex: 1;
}
</style>
