<template>
  <div>
    <el-dialog :title="$t('label.script_edit')" 
    :visible.sync="scriptEditorVisible"
     width="80%" 
     :before-close="handleClose"
      :append-to-body="isNested"
      :fullscreen="isfullscreen"
      >
       <template slot="title">
        <div class="el__dialog__header">
            <span class="el-dialog__title">
            <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
              {{$t('label.script_edit')}}
            </span>
             <i :class="isfullscreen? 'el-icon-aim' : 'el-icon-rank' " style="font-size: 10px;float:right;margin-right:20px;margin-top:8px;cursor:pointer;" @click="IsFullscreen"></i>
        </div>
      </template>
      <!-- 头部 -->
      <div class="scriptEditorHeader pl-4">
        <div class="scriptEditorHeaderLeft">
          <el-button plain size="small" @click="preStep">
            <img src="../../assets/images/previous.svg" alt="" style="width: 28px; height: 14px;">
          </el-button>
          <el-button plain size="small" @click="nextStep">
            <img src="../../assets/images/next.svg" alt="" style="width: 28px; height: 14px;">
          </el-button>
          <span class="selectForm pl-4">
            <span>{{$t('label.font')}}</span>
            <el-select v-model="fontSize" size="small">
              <el-option label="12" value="12"></el-option>
              <el-option label="13" value="13"></el-option>
              <el-option label="14" value="14"></el-option>
              <el-option label="15" value="15"></el-option>
              <el-option label="16" value="16"></el-option>
              <el-option label="17" value="17"></el-option>
              <el-option label="18" value="18"></el-option>
              <el-option label="19" value="19"></el-option>
              <el-option label="20" value="20"></el-option>
              <el-option label="21" value="21"></el-option>
              <el-option label="22" value="22"></el-option>
              <el-option label="23" value="23"></el-option>
              <el-option label="24" value="24"></el-option>
              <el-option label="25" value="25"></el-option>
              <el-option label="26" value="26"></el-option>
            </el-select>
          </span>
        </div>
        <div class="scriptEditorHeaderRight">
          <el-button size="small" type="primary" @click="precompiled" :loading="btnLoading">{{$t('btns.precompile')}}</el-button>
        </div>
      </div>
      <div class="scriptEditorMain" ref="scriptEditorMainHeight">
        <el-row class="height100">
          <el-col :span="14" class="height100">
            <CodeMirror :code="editor" ref="codemirror" :fontSize="fontSize" :editorHeight="editorHeight" />
          </el-col>
          <el-col :span="10" class="height100">
            <div class="obpm-scriptEditor-computerFile">
              <div style="backgroundColor: #ece9e9">{{$t('home.help')}}</div>
              <iframe frameborder="0" :src="url"  :style="iframeStyle"></iframe>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="bar d-inline-block float-right" slot="footer">
        <el-button size="small" @click="scriptEditorCancel">{{$t('btns.cancel')}}</el-button>
        <el-button size="small" type="primary" @click="scriptEditorConfirm">{{$t('btns.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import CodeMirror from "@/components/Common/CodeMirror";
import { scriptPrecompilation } from "@/service/AdvancedToolAPI.js";
import { getContextPath, getStaticPath} from "@/service/ModulesApi.js";
export default {
  data() {
    return {
      fontSize: "12",
      url: `./scriptHelpHtml/index.html?contextPath=${getContextPath()}&staticPath=${getStaticPath()}`,
      editor:'',//脚本编辑器的初始化内容
      btnLoading: false, // 按钮的加载图标
      isfullscreen: false,// 全屏
      editorHeight:'320px',
      iframeStyle:{
        height: "320px",
        width: "100%",
        overflow: "auto",
      }
    };
  },
  created(){
    this.editor=this.editorCode;
  },
  methods: {
    // 弹框关闭回调
    handleClose() {
      this.$emit("closeScriptEditorDialog");
    },
    // 回退上一步
    preStep() {
      this.$refs.codemirror.undo();
    },
    // 下一步
    nextStep() {
      this.$refs.codemirror.redo();
    },
    // 预编译
    async precompiled() {
      let iscriptString = this.$refs.codemirror.getEditor().trim();
      if (!iscriptString) {
        return this.$message.error(this.$t('placeholder.content'));
      }
      this.btnLoading = true;
      const response = await scriptPrecompilation({ iscriptString: iscriptString });
      this.btnLoading = false;
      if (response.data.errcode == 0) {
        if(response.data.data !== 'SUCCESS!'){
          this.$message.error(response.data.data)
        }else{
          this.$message.success(response.data.data);
        }
      }
    },
    // 脚本编辑器确认
    scriptEditorConfirm() {
      // 写入文本框中
      this.$emit("saveScriptEditor", this.$refs.codemirror.getEditor());
      // this.code = this.$refs.codemirror.getEditor();
      this.$emit("closeScriptEditorDialog");
    },
    // 脚本编辑器取消
    scriptEditorCancel() {
      // this.$refs.codemirror.setCodeEditor(this.editorCode);
      this.$refs.codemirror.refresh();
      this.$emit("closeScriptEditorDialog");
    },
    // 全屏
     IsFullscreen() {
       let windowHeight=document.documentElement.clientHeight
       this.isfullscreen=!this.isfullscreen
       this.$refs["scriptEditorMainHeight"].style.height=this.isfullscreen?windowHeight*0.65+'px':windowHeight*0.5+'px'
       this.editorHeight=this.isfullscreen?windowHeight*0.65+'px':windowHeight*0.5+'px'
       this.iframeStyle["height"]=this.isfullscreen?windowHeight*0.65+'px':windowHeight*0.5+'px'
     }    
  },
  components: {
    CodeMirror,
  },
  props: {
    scriptEditorVisible: Boolean,
    editorCode: String,
    isNested: {
      type: Boolean,
      default: true,
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.scriptEditorHeader {
  position: relative;
  .scriptEditorHeaderLeft {
    display: inline-block;
  }
  .scriptEditorHeaderRight {
    display: inline-block;
    position: absolute;
    right: 10px;
  }
}
.scriptEditorMain {
  height: 320px;
}

</style>
