<template>
  <div class="iframe-com-ins" :style="stylesTransform(containerStyles)">
    <iframe class="iframe-subsystem-ins" :src="url" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="100%"
      :style="stylesTransform(iframeInsStyles)"></iframe>
  </div>
</template>
<script>
export default {
  name: "iframeComIns",
  props: {
    // 容器样式
    styles: {
      type: [Object, String],
      default: () => ("")
    },
    // iframe样式
    iframeStyles: {
      type: [Object, String],
      default: () => ("")
    },
    // 子系统链接地址
    url: {
      type: String,
      default: ""
    }
  },
  watch: {
    "styles": {
      handler(newValue) {
        this.containerStyles = newValue;
      },
      deep: true
    },
    "iframeStyles": {
      handler(newValue) {
        console.log(newValue);
        this.iframeInsStyles = newValue;
      },
      deep: true
    },
  },
  data() {
    return {
      containerStyles: this.styles,
      iframeInsStyles: this.iframeStyles
    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    stylesTransform(stylesStr) {
      try {
        const styles = typeof stylesStr == "string" ? JSON.parse(stylesStr) : stylesStr;
        return styles ? styles : {};
      } catch (error) {
        return {};
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.iframe-com-ins {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .iframe-subsystem-ins {
    width: 100%;
    height: 100%;
  }
}
</style>
