<template>
  <div :style="style">
    <el-carousel arrow="always" height="100%" class="carousel" :direction="carouselStyle.direction"
                 :indicator-position="carouselStyle.indicatorPosition" :interval="carouselStyle.interval"
                 :type="carouselStyle.type" :key="carouselKey">
      <el-carousel-item v-for="(src, index) in carouselStyle.imageList" :key="index">
        <img class="carousel-img" :src="src" alt="" />
      </el-carousel-item>
    </el-carousel>

  </div>
</template>
<script>
export default {
  name: 'WidgetSlider',
  components: {},
  props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      options: {},
      carouselKey: 0, // 重新渲染组件用
    };
  },
  computed: {
    transStyle() {
      return this.objToOne(this.options);
    },
    style() {
      return {
        position: this.ispreview ? "absolute" : "static",
        background: this.transStyle.background,
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        right: this.transStyle.right + "px",
      };
    },
    carouselStyle() {
      // console.log(this.transStyle.imageAdress,"1111");
      return {
        imageList:  this.isBlank(this.transStyle.imageAdress)?[]:this.transStyle.imageAdress.split(","),
        direction: !this.transStyle.tabType ? this.transStyle.tabDirection : 'horizontal',
        indicatorPosition: this.transStyle.tabSelector,
        interval: this.transStyle.tabTime,
        type: this.transStyle.tabType
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
      },
      deep: true
    },
    carouselStyle: {
      handler(newValue, oldValue) {
        if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
          this.carouselKey++;
        }
      },
    },
  },
  created() {
    this.options = this.value;
  },
  mounted() { },
  methods: {},
}
</script>

<style scoped lang="scss">
.carousel {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/deep/ .el-carousel__mask {
  background: transparent;
}
</style>

