<template>
  <cms-modal
    v-if="visible"
    :class="type === 1 ? 'iframe-class' : ''"
    :visible="visible"
    :closable="false"
    :footer="footer"
    :modal-height="area[1]"
    :modal-width="area[0]"
    :modal-title="title"
    :show-footer="showFooter"
    :modal-callback="modalCallback"
    @onCancel="close"
  >
    <div v-if="type === 1" :style="`margin: -24px;height: ${height}px`">
      <cms-model-iframes ref="mySelf" :data-id="randomObj.dialog" :iframe-url="content"/>
    </div>
    <template slot="footer">
      <cms-button type="primary" @click="onSave" v-if="pageType !== 'view'">{{
          $t('common.button.sureBtn')
        }}
      </cms-button>
      <cms-button @click="close">{{ $t('common.button.cancel') }}</cms-button>
    </template>
  </cms-modal>
</template>

<script>
import { i18n } from '@/utils/i18ns'
import { CmsDialogFormMixin } from '@/comps/CmsEditForm/edit-form-mixin'

export default {
  name: "CmsDialog",
  i18n: i18n,
  mixins: [ CmsDialogFormMixin ],
  data() {
    return {
      visible: false,
      type: 1,
      title: "",
      pageType: '',
      content: undefined,
      component: undefined,
      ok: Function,
      footer: "",
      cancel: Function,
      area: [ "70%", "70%" ],
    };
  },
  methods: {
    /**
     * 保存iframe页面的方法
     */
    onSave() {
      const contentWindow = this.getContentWindow();
      if (contentWindow) {
        const vm = contentWindow.$bus;
        if (typeof vm.onSave === "function") {
          const saveObj = vm.onSave();
          saveObj.then(({ code, msg }) => {
            if (code === 200) {
              this.visible = false;
              this.ok(this, contentWindow);
              this.$messageTips.success(this.$t("common.message.addSuccess"));
            } else {
              this.$messageTips.success(msg);
            }
          }).catch(({ msg, type }) => {
            if (type === 1) {
              this.$messageTips.warning(msg);
            } else {
              this.$messageTips.error(msg);
            }
          });
        } else {
          throw "iframe页面必须在methods中提供onSave方法";
        }
      }
    },
    /**
     * 提交iframe页面的操作
     */
    onSubmit() {
      const contentWindow = this.getContentWindow();
      if (contentWindow) {
        const vm = contentWindow.$bus;
        console.log("vue::::::", vm);
        if (vm.onSubmit) {
          vm.onSubmit().then(({ code, msg }) => {
            const contentWindow = this.getContentWindow();
            if (code === 200) {
              this.visible = false;
              this.ok(this, contentWindow);
              this.$messageTips.success(this.$t("common.message.submitSuccess"));
            } else {
              this.$messageTips.error(msg);
            }
          }).catch((error) => {
            this.$messageTips.success(error);
          });
        } else {
          throw "页面必须在methods中提供onSubmit方法";
        }
      }
    },
    /**
     * 关闭窗口的方法
     */
    close() {
      this.visible = false;
      if (this.cancel) {
        this.cancel(this);
      }
    },

    /** 获取iframe的实例 */
    iframeInstance() {
      return this.$refs.mySelf.getElement();
    },
    /**
     * 获取iframe中的window
     */
    getContentWindow() {
      if (this.$refs.mySelf) {
        return this.$refs.mySelf.getElementContent();
      }
      return undefined;
    },
  },
  created() {
  },
  computed: {
    randomObj() {
      return {
        dialog: "dialog_" + new Date().getTime(), // 先定义随机ID
      };
    },
    height() {
      if (this.area.length > 1) {
        if (this.area[1].indexOf("px") !== -1) {
          return this.area[1].replaceAll("px");
        }
      }
      if (this.area.length === 1) {
        if (this.area[0].indexOf("px") !== -1) {
          return this.area[0].replaceAll("px");
        }
      }
      return (
        document.body.clientHeight *
        (this.area.length > 1
          ? parseInt(this.area[1].replaceAll("%")) / 100
          : parseInt(this.area[0].replaceAll("%")) / 100)
      );
    },
  },
};
</script>

<style scoped lang="scss">
.iframe-class {
}
</style>
