<template>
  <div class="root comp-bgimg"></div>
  <!-- <div v-else class="root comp-bgimg" :style="{'height':height}">
    <img :src="comp.props.url.val" :style="{'width':'100%','height':height}" />
  </div>-->
</template>

<script>
import apiHelper from "../assets/js/apiHelper.js";

export default {
  name: "CompImg",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      showImg: false,
      height: "100%"
    };
  },
  created: function() {
    // 合并参数是为了当实际属性少于基础属性时 补位
    this.mergeCompProps(this.comp);
    this.updateDom();
  },
  methods: {
    updateDom() {
      var that = this;
      switch (that.sup8.env) {
        case that.sup8._def.env.design:
          // 将当前设置的背景图片加到body标签下
          $(".part_phone_screen").css({
            "background-repeat": "no-repeat",
            "background-image": `url(${this.comp.props.url.val})`,
            "background-size": "100%",
            "background-color": this.comp.props.bgColor.val
          });
          break;
        case that.sup8._def.env.preview: // 预览模式
        case that.sup8._def.env.run:
          // 将当前设置的背景图片加到body标签下
          $("body").css({
            overflow: "hidden",
            "background-repeat": "no-repeat",
            "background-image": `url(${this.comp.props.url.val})`,
            "background-size": "100%",
            "background-color": this.comp.props.bgColor.val
          });

          $("#mainx").css({
            overflow: "auto",
            height: "100vh"
          });

          break;
        default:
          break;
      }
    }
  },
  watch: {
    "comp.props.url.val": function() {
      console.log("comp.props.url.val");
      this.updateDom();
    },
    "comp.props.bgColor.val": function() {
      console.log("comp.props.url.val");
      this.updateDom();
    }
  },
  mounted: function() {
    console.log("CompImg:mounted:this.comp", this.comp);
  }
};
</script>

<style scoped>
.root {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  overflow: hidden;
  word-break: break-all;
  min-height: 50px;

  z-index: -1;
  /* top: 0px;
  position: unset;
  width: 100%; */
}

.root img {
  width: 100%;
  height: 100%;
  /* height: 300px; */
}
</style>
