<template>
  <div>
    <iframe
      ref="formFormat"
      :src="src"
      width="100%"
      :height="iframeHeight"
      frameborder="0"
      :style="iframeStyle"
    ></iframe>

    <!-- 脚本选择器弹窗 -->
    <!-- scriptEditorVisible:弹窗显示   showScritptEditorCode：将文本框的值传给编译器  handleScriptEditor：将编译器的值传给textarea-->
    <ScriptEditor
      v-if="scriptEditorVisible"
      :scriptEditorVisible="scriptEditorVisible"
      :editorCode="showScritptEditorCode"
      @closeScriptEditorDialog="scriptEditorVisible = false"
      @saveScriptEditor="handleScriptEditor"
    />
  </div>
</template>

<script>
import { getContextPath, getStaticPath } from '@/service/ModulesApi.js'
import ScriptEditor from '@/components/Common/scriptEditor'
import {delMsg} from '@/utils/elementui'
export default {
  name: 'FormFormat',
  components:{
    ScriptEditor
  },
  data() {
    return {
      appId: sessionStorage.getItem('appId'),
      iframeHeight: 400,
      iframeStyle: '', //iframe全屏样式
      iframeHeightBefore: 100,
      src: ``,
      contextPath: getContextPath(),
      staticPath: getStaticPath(),
      spanClick: 'handleSpanClick',

      scriptEditorVisible: false, // 脚本编辑器弹窗
      currentScriptEditor: '', // 当前点击的是哪一个脚本编辑器
      code: '', //新表单设计器打开脚本编辑器的值
    }
  },
  props: {
    showType: String,
    moduleId: String,
    formId: String,
  },
  mounted() {
    //操作脚本编辑器2021年5月8日14:00:56
    window['openIscript'] = (code, formIscriptName, scriptid) => {
      if (this.showType == 'new') {
        this.currentScriptEditor = 'newFormDesigner'
      } else {
        this.currentScriptEditor = 'oldFormDesigner'
      }
      this.code = code
      this.formIscriptName = formIscriptName
      this.scriptid = scriptid
      this.scriptEditorVisible = true
    }

    //操作iframe的全屏事件
    window[this.spanClick] = (isScresn) => {
      this.allScrean(isScresn)
    }

    this.getScollerHeight()

    if (this.showType == 'old') {
      this.src = `./formHtml/fcktest2.html?contextPath=${getContextPath()}`
    } else {
      this.src = `./formHtml/formbuilder/dist/index.html?contextPath=${getContextPath()}`
    }

    this.src += `&staticPath=${this.staticPath}&moduleId=${this.moduleId}&application=${this.appId}&formid=${this.formId}`
  },
  computed: {
    /**
     * 将 textarea 的值写入 脚本编辑器
     */
    showScritptEditorCode() {
      let code
      if (this.currentScriptEditor == 'newFormDesigner') {
        code = this.code
      } else if (this.currentScriptEditor == 'oldFormDesigner') {
        code = this.code
      }
      return code
    },
  },
  methods: {
    //全屏操作事件
    allScrean(isScresn) {
      if (isScresn) {
        this.iframeStyle =
          'position:absolute;top:0;left:0;right:0;bottom:0;z-index:10'
        this.iframeHeight = '100%'
      } else {
        this.iframeStyle = ''
        console.log('brefore', this.iframeHeightBefore)
        this.iframeHeight = this.iframeHeightBefore
      }
    },

    //vue中的全屏按钮点击事件
    openAllScren() {
      this.$refs['formFormat'].contentWindow.document
        .getElementById('handleTest')
        .click()
    },

    // 重置字段id
    async resetId() {
      try{
        await delMsg(this.$t('msg.resetId'), this.$t('msg.tip'))
        this.$refs.formFormat.contentWindow.document.getElementById('resetid').click()
        this.$message.success(this.$t('msg.reset_ss'))
      }catch(e){
        console.log(e)
      }
    },

    /**
     * 动态计算页面table高度
     */
    getScollerHeight() {
      setTimeout(() => {
        let clientHeight =
          document.documentElement.clientHeight || document.body.clientHeight
        this.iframeHeight = clientHeight - 60 - 32 - 41 - 50 - 20 - 16
        this.iframeHeightBefore = clientHeight - 60 - 32 - 41 - 50 - 20 - 16
      }, 100)
    },

    save() {
      this.$refs.formFormat.contentWindow.document
        .getElementById('save_btn')
        .click()
      console.log(window.formFormat)
      return window.formFormat
    },

    /**
     * 将脚本编辑器的值写入到textarea中
     */
    handleScriptEditor(val) {
      if (this.currentScriptEditor == 'newFormDesigner') {
        this.$refs.formFormat.contentWindow.formApp.setScript(
          this.scriptid,
          this.formIscriptName,
          val
        )
        this.$refs.formFormat.contentWindow.document.getElementsByName(
          this.formIscriptName
        )[0].value = val
      } else if (this.currentScriptEditor == 'oldFormDesigner') {
        this.$refs.formFormat.contentWindow[
          this.$refs.formFormat.contentWindow.length - 1
        ][0].document.getElementById(this.formIscriptName).value = val
      }
    },
  },
}
</script>
<style lang='less' scoped>
</style>