<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import "style.scss";
</style>

<!-- Template -->
<template>
  <div class="component-container message-component">

    <b-modal centered no-close-on-backdrop no-close-on-esc hide-footer
             size="lg"
             modal-class="modal-layer"
             button-size="sm"
             title-tag="h6"
             :title="title"
             ref="LayerModal">
      <div ref="layerIFrameRef"></div>
    </b-modal>

    <div ref="layerIFrameTemp" style="display: none">
      <iframe id="layerIFrame"></iframe>
    </div>

    <div ref="layerFormTemp" style="display: none">
      <form id="layerForm" :action="prop.action" :method="prop.method">
        <div v-for="(param,_index) in prop.params" :key="_index">
          <input type="hidden" :name="param.name" :data-value="prop.params[_index].value"/>
        </div>
      </form>
    </div>
  </div>
</template>

<!-- Script -->
<script>
  import {mapGetters} from 'vuex';

  const _Layer = {
    name: 'Layer',
    created: function () {
    },
    updated: function () {
      this.$refs.layerIFrameRef.innerHTML = '';
      // console.log(this.$refs.layerIFrameRef);
      // console.log(this.$refs.layerIFrameTemp.innerHTML);
      // console.log(this.$refs.layerFormTemp.innerHTML);
      this.$refs.layerIFrameRef.innerHTML = this.$refs.layerIFrameTemp.innerHTML;
      let _layerIFrame = document.getElementById('layerIFrame');
      _layerIFrame.contentWindow.document.body.innerHTML = this.$refs.layerFormTemp.innerHTML;
      let _layerForm = _layerIFrame.contentWindow.document.getElementById('layerForm');
      let _inputNodes = _layerForm.getElementsByTagName('input');
      for (let i = 0; i < _inputNodes.length; i++) {
        _inputNodes[i].value = _inputNodes[i].getAttribute('data-value');
      }

      let _self = this;
      if (_layerForm.attachEvent) {
        _layerForm.attachEvent("onload", function () {
          _self.listenerIFrame();
        });
      } else {
        _layerIFrame.onload = function () {
          _self.listenerIFrame();
        };
      }


      _layerForm.submit();
    },
    mounted: function () {
    },
    activated: function () {
    },
    data: function () {
      return {
        title: 'Layer',
        prop: {},
      };
    },
    methods: {
      show(_prop, _title) {
        this.title = _title || 'Layer';
        this.prop = _prop || {};
        console.log('Layer > open', this.prop);
        this.$refs.LayerModal.show();
      },
      listenerIFrame() {
      }
    },
    components: {},
    computed: {
      ...mapGetters([])
    }
  };
  export default _Layer;
</script>
