<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="(url, index) in carouselStyle.htmlurlList" :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: {},
      carouselKey: 0, // 重新渲染组件用
    };
  },
  mounted () {
    // 内嵌iframe时
    //iframeResize.iframeResizer({log: true,}, this.$refs.iframe);
    this.changeFrameHeight();
  },
  computed: {
    transStyle() {
      return this.objToOne(this.options);
    },
    style() {
      const autoLayer = this.transStyle.autoLayer;
      //整屏显示
      if(autoLayer){
        return {
          position:  "absolute",
          height: document.body.clientHeight+ "px",
          width: document.body.clientWidth+ "px",
          left: 0 + "px",
          top: 0 + "px",
          background:""
        };
      }else{
        return {
          position: this.ispreview ? "absolute" : "static",
          background: 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(","),
        htmlurlList: ['http://localhost:8888/#/bigscreen/viewer?reportCode=BI_YS001_1680838448088_1684993969021'],
        //htmlurlList: [],
          //['http://localhost:8888/#/bigscreen/viewer?reportCode=dev_1_1680589693462','http://localhost:8888/#/bigscreen/viewer?reportCode=BI_YS001_1680838448088_1684993969021','http://localhost:8888/#/bigscreen/viewer?reportCode=BI_YS001_1680838448088'],
        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;
  },
  methods: {
    dianji() {
      //设置后就是id==con_lf_top_div 的容器全屏
      let case1 = document.getElementById("iframeId");
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (case1.requestFullscreen) {
          case1.requestFullscreen();
        } else if (case1.webkitRequestFullScreen) {
          case1.webkitRequestFullScreen();
        } else if (case1.mozRequestFullScreen) {
          case1.mozRequestFullScreen();
        } else if (case1.msRequestFullscreen) {
          // IE11
          case1.msRequestFullscreen();
        }
      }
    },
  },
}
</script>

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

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

