<template>
  <div :style="style" v-if="isRouterAlive">
    <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="(url, index) in urlData" :key="index">
        <iframe class="carousel-img" :src="url" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
import Vue from 'vue'
import iframeResize from 'iframe-resizer/js/iframeResizer'
Vue.use(iframeResize)
export default {
  name: 'WidgetHtmlSlider',
  components: {},
  props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      options: {},
      urlData:[],
      optionsSetUp:{},
      carouselKey: 0, // 重新渲染组件用
      flagInter: null,
      isRouterAlive:true,
    };
  },
  mounted () {
    // 内嵌iframe时
    // this.iframeResizer({log: true,}, this.$refs.iframe);
    // this.changeFrameHeight();
  },
  computed: {
    transStyle() {
      const obj = this.objToOne(this.options);
      return obj;
    },
    style() {
      //整屏显示
      return {
        position: this.ispreview ? "absolute" : "static",
        width: "100%",
        height: "100%",
        left:"0px",
        top:"0px",
      };
    },
    carouselStyle() {
      this.initData(this.transStyle);
      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;
        this.optionsSetUp = val.setup;
        this.handlerUrlData();
      },
      deep: true,
    },
    carouselStyle: {
      handler(newValue, oldValue) {
        if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
          this.carouselKey++;
        }
      },
    },
  },
  created() {
    this.options = this.value;
  },
  methods: {
    reload(){
      this.isRouterAlive=false;
      this.$nextTick(function(){
        this.isRouterAlive=true;
      })
    },
    initData(data) {
      let urlUp =[];
      if(this.hasOwn(data,"urls")){
        urlUp =  data['urls'];
      }
      let urlData = [];
      if(this.isNotBlankArray(urlUp)){
        for(let i=0;i<urlUp.length;i++){
          const url = urlUp[i].url;
          urlData[i] = url;
        }
      }
      // console.log("12",urlData);
      this.urlData = urlData;
      this.urlData={...this.urlData};
    },
    handlerUrlData(){
      const data = this.optionsSetUp;
      let urlUp =[];
      if(this.hasOwn(data,"urls")){
        urlUp =  data['urls'];
      }else if(this.hasOwn(data,"dynamicHtmlSlider")){
        urlUp =  data['dynamicHtmlSlider'];
      }
      let urlData = [];
      if(this.isNotBlankArray(urlUp)){
        for(let i=0;i<urlUp.length;i++){
          const url = urlUp[i].url;
          urlData[i] = url;
        }
      }
      this.urlData = urlData;
      this.urlData={...this.urlData};
    },
  },
}
</script>

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

.carousel-img {
  width: 100%;
  height: 100%;
}
</style>

