<template>
  <div class="kf-3dc-atom w-100 h-100 flex-column-start" :style="frameStyle" v-show="props.show"
       :class="'vivify '+ buttonClass">
    <div v-if="props.title" class="w-100 flex-row-start-center" >{{ props.title }}</div>
    <iframe :src="getFrameUrl(props.src)" :alt="props.name" style="border: 0px;width: 100%;height: 100%"
            @error="onError" :scrolling="scroll"
            @load="onLoad" ref="frameRef"/>
  </div>
</template>

<script>
import {onMounted, ref, getCurrentInstance, computed, watch, onUnmounted} from 'vue'
import styleManager from '../utils/style.vue'
import eventManager from '../utils/event'
import globalEventManager from '@/utils/globalEvent'
import pageModel from "../model/page";

export default {
  name: "kfFrame",
  props: {
    props: {
      type: Object,
      default: () => {
      }
    },
    eventList: {
      type: Array,
      default: () => []
    },
    eventScript: {
      type: String
    }
  },
  widgetConfig: {
    parent: "base",
    rank: 6,
    label: {
      zh: "外部网页"
    },
    category: "基础",
    component: "kfFrame",
    display: true,
    version: 1,
    icon: "icon-anniu",
    defaultSize: {
      x: 400,
      y: 400
    },
    imgName: 'kfFrame',
  },
  setup(props) {
    let frameRef = ref(null);
    let frameStyle = ref({})
    const {proxy} = getCurrentInstance();

    let defaultHandler = ref({})
    let callbackId = null;
    let loadSuccess = ref(-1);
    let buttonClass = ref('')

    onMounted(() => {
      refreshEvents()
      frameStyle.value = styleManager.updateStyle(proxy)
      buttonClass.value = styleManager.updateClass(proxy)
    })

    watch(frameRef, (newValue, oldValue) => {
      if (newValue) {
        callbackId = globalEventManager.addCallback("*", (event) => {
          if (loadSuccess.value === 1) {
            frameRef.value.contentWindow.postMessage(event, "*");
          }
        })
      }
    });

    const refreshEvents = function (firstTime = false) {
      eventManager.registerEvent(proxy);
    }

    pageModel.watchProps(props, watch, proxy, (changes) => {
      refreshEvents();
      if (styleManager.styleChanged("kfFrame", changes)) {
        frameStyle.value = styleManager.updateStyle(proxy)
      }
      if (styleManager.classChanged("kfFrame", changes)) {
        buttonClass.value = styleManager.updateClass(proxy)
      }
    })

    const eventHandler = computed(() => {
      return eventManager.loadEventHandler(defaultHandler, props.props.key, props.props.pageName)
    });

    const getFrameUrl = function (frameSrc) {
      return frameSrc;
    };

    onUnmounted(() => {
      if (callbackId) {
        globalEventManager.removeCallbackById(callbackId);
      }
    })

    const onError = function (e) {
      loadSuccess.value = 0;
      globalEventManager.issueEvent("/frame_error", {
        url: props.props.src
      })
    }

    const onLoad = function (e) {
      try {
        frameRef.value.contentWindow.postMessage({
          action: "/frame_init",
          args: {
            frameId: callbackId
          }
        }, "*");
      } catch (e) {
        console.log(e);
      }

      loadSuccess.value = 1;
      globalEventManager.issueEvent("/frame_load", {
        url: props.props.src
      });
      if (eventHandler.value.load) {
        eventHandler.value.load();
      }
    }

    const scroll = computed(() => {
      let result;

      switch (props.props.overflow) {
        case "hidden":
          result = "no"
          break;
        case "auto":
          result = "auto"
          break;
        case "scroll":
          result = "yes"
          break;
        default:
          result = "no"
      }

      return result;
    })

    return {
      frameRef,
      frameStyle,
      defaultHandler,
      eventHandler,
      getFrameUrl,
      onError,
      loadSuccess,
      onLoad,
      buttonClass,
      scroll
    }
  }
}
</script>

<style lang="scss">
.kf-3dc-atom {
  border-width: 0;
  border-style: solid;
  padding: 4px;
  justify-content: center;
  align-items: center;
  transition: all 0.2s linear 0s;
  img {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .kf-3dc-atom-i {
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    display: flex;
    justify-content: inherit;
    align-items: center;
    color: inherit;
    font-size: inherit;
    border-radius: 0;
    font-family: inherit;
  }
}
</style>