import "./thirdpart-auth-dialog.css";
/* script */
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
import { componentMixin, createComponentName } from '../../utils/base';
const __vue_script__ = {
  name: createComponentName('thirdpart-auth-dialog'),
  mixins: [componentMixin],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    authUrl: {
      type: Object,
      default: null
    },
    siteUrl: {
      type: String,
      default: ''
    },
    authProvider: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      defaultAuthUrl: {
        qq: '/sso/qq'
      }
    };
  },

  watch: {
    visible(newVal) {
      if (newVal) {
        this.createIframe();
      } else {
        this.hiddenIframe();
      }
    }

  },

  mounted() {
    window.addEventListener('message', this.messageHandler, false);
  },

  beforeDestroy() {
    window.removeEventListener('message', this.messageHandler, false);
    this.$emit('destroy');
    if (!this.iframeWrapEl) return;

    if (this.iframeWrapEl.parentNode) {
      document.body.removeChild(this.iframeWrapEl);
    }

    this.iframeEl = null;
    this.iframeWrapEl = null;
  },

  methods: {
    messageHandler(e) {
      const type = e.data.type;

      if (type === 'auth') {
        window.frames['gd-account-frame'].window.postMessage(e.data, '*');
        this.closeDialog();
      }
    },

    closeDialog() {
      this.$emit('update:visible', false);
    },

    createIframe() {
      if (!this.iframeWrapEl) {
        const iframeWrap = document.createElement('div');
        const iframeContainer = document.createElement('div');
        const close = document.createElement('div');
        const iframe = document.createElement('iframe');
        iframeWrap.className = 'gd-thirdpart-auth-iframe-wrap';
        close.className = 'gd-thirdpart-auth-close';
        iframeContainer.className = 'gd-thirdpart-auth-iframe-container';
        iframe.className = 'gd-thirdpart-auth-iframe';
        iframe.frameBorder = 0;
        iframeContainer.appendChild(iframe);
        iframeWrap.appendChild(close);
        iframeWrap.appendChild(iframeContainer);
        close.addEventListener('click', this.closeDialog, false);
        this.$on('destroy', () => {
          close.removeEventListener('click', this.close, false);
        });
        this.iframeEl = iframe;
        this.iframeWrapEl = iframeWrap;
      }

      const authUrl = this.authUrl || this.defaultAuthUrl;
      document.body.appendChild(this.iframeWrapEl);
      this.iframeEl.src = this.siteUrl + authUrl[this.authProvider];
    },

    hiddenIframe() {
      if (!this.iframeWrapEl) return;
      document.body.removeChild(this.iframeWrapEl);
    }

  }
};
/* template */

var __vue_render__ = function () {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c("div");
};

var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */

const __vue_inject_styles__ = undefined;
/* scoped */

const __vue_scope_id__ = undefined;
/* module identifier */

const __vue_module_identifier__ = undefined;
/* functional template */

const __vue_is_functional_template__ = false;
/* component normalizer */

import __vue_normalize__ from '../../utils/vue-normalize-component.js';
/* style inject */

/* style inject SSR */

export default __vue_normalize__({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);