<template>
  <div class="obpm-reports" v-loading="loading">
    <div class="obpm-title">
      <div class="d-inline-block">
        <el-tabs v-model="activeName" :before-leave="handleClick">
          <el-tab-pane :label="$t('report.basic')" name="basic"></el-tab-pane>
          <el-tab-pane :label="$t('report.content')" name="content"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="bar d-inline-block float-right">
        <el-button type="primary" size="small" @click="showCode" v-if="activeName=='content'">{{$t('btns.showcode')}}</el-button>
        <el-button type="primary" size="small" @click="openAllScren" v-if="activeName=='content'">{{$t('btns.full_screen')}}</el-button>

        <el-button type="primary" size="small" @click="preview" v-if="activeName=='content'">{{$t('btns.preview')}}</el-button>

        <el-button type="primary" size="small" @click="saveReports('params')" :loading="btnLoading">{{$t("btns.save")}}</el-button>
        <el-button size="small" @click="goback">{{$t("btns.exit")}}</el-button>
      </div>
    </div>
    <el-scrollbar v-if="activeName=='basic'" :style="{height: tableHeight + 'px'}" :native="false">
      <div class="mt-3" >
        <el-form :model="params" ref="params" :rules="rules" label-position="top" label-width="160px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item :label="$t('report.name')" prop="name" class="padding0Label">
                <el-input v-model="params.name" size="small" :placeholder="$t('placeholder.name')"  class="width-360"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="4">
              <el-form-item :label="$t('report.as_print')" class="padding0InlineLabel">
                <el-radio-group v-model="params.isPrint" @change="onPrintChange">
                  <el-radio :label="1">{{$t('report.yes')}}</el-radio>
                  <el-radio :label="0">{{$t('report.no')}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="isPrintVisible">
            <el-col :span="8">
              <el-form-item :label="$t('report.relatedforms')" class="padding0Label">
                <el-select v-model="params.formId" :placeholder="$t('placeholder.select')" size="small"  class="width-360">
                  <el-option
                    v-for="item in relatedforms"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="!isPrintVisible">
            <el-col :span="20">
              <el-form-item :label="$t('report.dataSource')" class="padding0InlineLabel">
                <el-radio-group v-model="params.dataSourceType" @change="onDataSourceType">
                  <el-radio label="DATASOURCE_TYPE_VIEW">{{$t('report.datasource_type_view')}}</el-radio>
                  <el-radio label="DATASOURCE_TYPE_SQL">{{$t('report.sql_datasource_type')}}</el-radio>
                  <el-radio label="DATASOURCE_TYPE_PROCEDURE">{{$t('report.datasource_type_procedure')}}</el-radio>
                  <el-radio label="DATASOURCE_TYPE_CUSTOM">{{$t('report.datasource_type_custom')}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" v-if="!isPrintVisible && (sqlVisible || procedureVisible)">
              <el-form-item :label="$t('report.dataSource')" class="padding0Label" prop="dataSourceName">
                  <el-input v-model="params.dataSourceName" readonly size="small" clearable class="width-360"></el-input>
                  <el-button size="small" @click="openDataSourceDialog">{{$t('btns.choose_dbsource')}}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" v-if="!isPrintVisible && (sqlVisible || procedureVisible)">
              <el-form-item :label="$t('report.datasource_searchform')" class="padding0Label" prop="dataSourceSearchForm">
                <el-select v-model="params.dataSourceSearchForm" :placeholder="$t('placeholder.select')" size="small" class="width-360">
                  <el-option
                    v-for="item in formData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" v-if="!isPrintVisible && sqlVisible">
              <el-form-item :label="$t('report.datasource_type_sql')" class="padding0Label" prop="dataSourceSqlScript">
                <el-input
                  style="width: 95%"
                  type="textarea"
                  :rows="5"
                  v-model="params.dataSourceSqlScript"
                  size="small">
                </el-input>
                <i class="el-icon-edit-outline" @click="showScriptEditor('dataSourceSqlScript')" style="width: 5%"></i>
                <el-button size="small" @click="testDataSource">{{$t('btns.test')}}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" v-if="!isPrintVisible && viewVisible">
              <el-form-item :label="$t('report.data_view')" class="padding0Label" prop="viewId">
                <el-select v-model="params.viewId" :placeholder="$t('placeholder.select')" size="small"  class="width-360">
                  <el-option
                    v-for="item in viewData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="!isPrintVisible && procedureVisible">
            <el-col :span="8">
              <el-form-item :label="$t('report.datasource_type_procedure')" class="padding0InlineLabel">
                <el-input
                  style="width: 95%"
                  type="textarea"
                  :rows="2"
                  v-model="params.procedureScript"
                  size="small">
                </el-input>
                <i class="el-icon-edit-outline" @click="showScriptEditor('procedureScript')" style="width: 5%"></i>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20" v-if="!isPrintVisible && customVisible">
            <el-col :span="8">
              <el-form-item :label="$t('report.datasource_type_custom')" class="padding0InlineLabel" prop = "dataSourceCustomScript">
                <el-input
                  style="width: 95%"
                  type="textarea"
                  :rows="2"
                  v-model="params.dataSourceCustomScript"
                  size="small">
                </el-input>
                <i class="el-icon-edit-outline" @click="showScriptEditor('dataSourceCustomScript')" style="width: 5%"></i>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item :label="$t('report.description')" class="padding0InlineLabel" prop="description">
                <el-input
                  type="textarea"
                  :rows="2"
                  :placeholder="$t('placeholder.description')"
                  v-model="params.description"
                  size="small">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-scrollbar>
    <div v-show="activeName=='content'" class="height100">
      <iframe
      id="reportIframe"
      ref="reportDetail"
      :src="src"
      width="100%"
      :height="iframeHeight"
      frameborder="0"
      :style="iframeStyle"
    ></iframe>
    </div>
    <div>
      <el-dialog width="80%" :title="$t('report.datasourcename')" :visible.sync="outerVisible" top='8vh' :destroy-on-close='true' :append-to-body="true">
        <DataSourceList :nowDataSourceName="params.dataSourceName" :type='datasourceType' @checkDataSourceOk='onRowClick' @closeDatasource="closeDatasource" ></DataSourceList>
      </el-dialog>
    </div>
    <ChooseDomain :visible.sync="domainVisible" v-if="domainVisible" @checkDomainOk='checkDomainOk'></ChooseDomain>
    <!-- 脚本选择器弹窗 -->
    <!-- scriptEditorVisible:弹窗显示 
      showScritptEditorCode：将文本框的值传给编译器 
      handleScriptEditor：将编译器的值传给textarea-->
    <ScriptEditorSelect
      v-if="scriptEditorVisible"
      :scriptEditorVisible="scriptEditorVisible"
      :editorCode="showScritptEditorCode"
      @closeScriptEditorDialog="scriptEditorVisible = false"
      @saveScriptEditor="handleScriptEditor"
    />
  </div>
</template>

<script>
import { getContextPath} from "@/service/ModulesApi.js";
import { getModuleViewList } from "@/service/ViewApi.js";
import { getModuleFormList } from "@/service/FormApi.js";
import { getQueryColumnInfos,updateReport,previewReport,createReports, getReportDetail} from "@/service/ReportApi.js";
import ChooseDomain from "@/components/Modules/ChooseDomain.vue";
import DataSourceList from "@/components/AdvancedTool/DataSourceList.vue";
import ScriptEditorSelect from "@/components/Common/scriptEditor";
import { nameCheck,descCheck } from "@/utils/utils.js";

export default {
  name: 'reports',
  components:{
    ChooseDomain,
    DataSourceList,
    ScriptEditorSelect
  },
  data(){
    return{
      data: [],
      activeName: 'basic',
      params: {
        appId: "",
        moduleId: "",
        id: "",                                     //报表id
        uri: "",
        isPrint: 0,
        name: "",                                   //报表名称
        description: "",                            //描述
        scriptTemplate: "",                         //模板脚本
        xmlTemplate: "",                            //模板xml
        dataSourceType: "DATASOURCE_TYPE_VIEW",     //数据源类型
        dataSourceSearchForm: "",                   //数据源查询表单
        dataSourceView: null,
        dataSourceSqlConnectDs: null,
        dataSourceSqlScript: "",                    //数据源sql脚本
        dataSourceCustomScript: "",                 //自定义数据源脚本
        jrxmlFilePath: "",                          //jrxml文件路径地址
        dataSourceName: "",                         //数据源名称
        isDefaultStyle: "",                         //默认样例
        reportColumnInfos: null,
        jrxmlString: null,
        viewId: "",                                 //关联视图id
        domainId: null,
        reportExampleName: "",                      //样例名称
        procedureScript: "",                        //存储过程数据源脚本
        reportSql: null,
        subReportId: "",
        formId: "",
        templateType: "JRXML",                           //模板类型
        drdataSource: null
      },
      relatedforms: [],                             //相关表单
      viewData: [],                                 //数据视图
      formData: [],                                 //数据源查询表单
      rules: {
        name: [
          { required: true, message: this.$t('placeholder.name'), trigger: 'blur' },
          { validator: nameCheck, trigger: "blur" },
        ],
        dataSourceName: [
          { required: true, message: this.$t('msg.select_dbSource'), trigger: 'blur' },
        ],
        // dataSourceSearchForm: [
        //   { required: true, message: '请选择数据源查询表单', trigger: 'change' },
        // ],
        dataSourceSqlScript: [
          { required: true, message: this.$t('msg.write_sql'), trigger: 'blur' },
        ],
        viewId:[
          { required: true, message: this.$t('msg.select_dataview'), trigger: 'blur' },
        ],
        description:[
          { validator: descCheck, trigger: "blur" },
        ],
        dataSourceCustomScript: [
          { required: true, message: this.$t('msg.write_datasource'), trigger: 'blur' }
        ]
      },
      isPrintVisible: false,          //是否作为打印模板
      viewVisible: true,             //视图数据源
      sqlVisible: false,              //SQL数据源
      procedureVisible: false,        //存储过程数据源
      customVisible: false,           //自定义数据源
      tableHeight: 400,
      outerVisible: false,
      innerVisible: false,
      multipleSelectionId: [],
      multipleSelectionArray: [],
      jndiVisible: false,
      iframeHeight:400,
      contextPath:getContextPath(),
      src:`./reportHtml/reportHtmlTem.html?contextPath=${getContextPath()}`,
      domainVisible:false,
      datasourceType:'dialog',

      scriptEditorVisible: false, // 脚本编辑器弹窗
      currentScriptEditor: "", // 当前选中的脚本编辑器
      spanClick: 'handleSpanClick',
      iframeStyle:'',//iframe全屏样式
      iframeHeightBefore:100,
      test:'222',
      basicRef: '',
      loading: true,
      btnLoading: false, // 按钮的加载图标
    }
  },
  async mounted(){
    let appId = sessionStorage.getItem("appId");
    let moduleId = this.$route.query.moduleId;
    if(this.$route.query.edit){
      const result = await getReportDetail(this.$route.query.reportId)
      let data = result.data.data
      if(data.isPrint == 0){
        this.onDataSourceType(data.dataSourceType);
      }else{
        this.onDataSourceType(data.isPrint);
      }
      this.params = {
        ...data,
        appId: appId,
        moduleId: moduleId,
        parentId:moduleId,
      };
      this.src += `&subReportId=${this.params.subReportId}&moduleId=${this.params.moduleId}&applicationid=${this.params.appId}&reportId=${this.params.id}&dateSourceType=${this.params.dataSourceType}`;

    }else{
      let params = {
        ...this.params,
        appId: appId,
        moduleId: moduleId,
        parentId:moduleId,
      }
      this.params = params;
    }
    this.getScollerHeight();
    this.getRelatedFromList();
    this.getViewList();
    this.getFromList();
    const mapFrame = this.$refs.reportDetail
    if (mapFrame.attachEvent) { // 兼容浏览器判断
      mapFrame.attachEvent('onload', ()=>{
        const iframeWin = mapFrame.contentWindow
        iframeWin.postMessage(this.params, '*')
        // data传递的参数   *写成子页面的域名或者是ip
      })
    } else {
      mapFrame.onload = ()=> {
        const iframeWin = mapFrame.contentWindow
        iframeWin.postMessage(this.params, '*')
      }
    }

    this.basicRef = this.$refs.params
  },
  created(){
    //操作iframe的全屏事件
    window[this.spanClick]=(isScresn)=>{
      this.allScrean(isScresn);
    }
  },
  methods:{
    //vue中的全屏按钮点击事件
    openAllScren(){
      this.$refs.reportDetail.contentWindow.document.getElementById("handleTest").click();
    },
    //全屏事件
    allScrean(isScresn){
      if(isScresn){
        this.iframeStyle='position:absolute;top:0;left:0;right:0;bottom:0;z-index:10';
        this.iframeHeight='100%';
        let timer = setTimeout(()=>{
          this.$refs["reportDetail"].contentWindow.caclcuHeight(true);
          clearTimeout(timer)
        },100)
      }else{
        this.iframeStyle='';
        this.iframeHeight=this.iframeHeightBefore;
        let timer = setTimeout(()=>{
          this.$refs["reportDetail"].contentWindow.caclcuHeight(false);
          clearTimeout(timer)
        },100)
      }
    },
    //关闭数据源弹窗
    closeDatasource(){
      this.outerVisible=false;
    },
    async checkDomainOk(checkDomainId){
      if(checkDomainId!=""){
          const response = await previewReport({reportId:this.params.id,checkDomainId:checkDomainId})
          if (response.data.errcode == 0) {
            window.open(this.contextPath.replace(/\/api/,"")+response.data.data)
          }else{
            this.$message({
              message: response.data && response.data.errmsg ? `预览失败!错误信息：${response.data.errmsg}` : '预览失败!',
              type: 'error'
            });
          }
        }
    },
    async preview(){
      if(this.params.dataSourceType=='DATASOURCE_TYPE_VIEW'){
        this.domainVisible=true;
      }else{
        const response = await previewReport({reportId:this.params.id})
        if (response.data.errcode == 0) {
          window.open(this.contextPath.replace(/\/api/,"")+response.data.data)
        }else{
          this.$message({
            message: response.data && response.data.errmsg ? `预览失败!错误信息：${response.data.errmsg}` : '预览失败!',
            type: 'error'
          });
        }
      }
      
    },
    /**
     * 查看源代码
     */
    showCode(){
      this.$refs.reportDetail.contentWindow.document.getElementById("showCode").click();
      
    },
    /**
     * 动态计算页面table高度
     */
    getScollerHeight() {
      setTimeout(() => {
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //60 头部， 32 面包屑， 41 第一层页签， 40 第二层页签， 50 列表标题， 71 查询， 20 父组件外边距, 40分页
        this.tableHeight = clientHeight - 60 - 32 - 41 - 50 - 20;
        this.iframeHeight = clientHeight - 60 - 32 - 41 - 50 - 8 ; // 8: 删除画布内容会错位
        this.iframeHeightBefore = clientHeight - 60 - 32 - 41 - 50 - 8; // 8: 删除画布内容会错位
        console.log('iframeHeight',this.iframeHeight)
      }, 100)
    },

    /**
     * 获取视图列表
     */
    getViewList(){
      let params = this.params;
      let searchParams = {
        appId: params.appId,
        moduleId: params.moduleId,
        searchword: "",
        pageNo: 1,
        linesPerPage: 10000
      }
      getModuleViewList(searchParams, {
        onSucess: response => {
          if (response.data.errcode == 0) {
            this.viewData = response.data.data.datas;
          }
        }
      })
    },

    /**
     * 获取数据源查询表单
     */
    getFromList(){
      this.loading = true
      let searchParams = {
        appId: sessionStorage.getItem('appId'),
        moduleId: this.$route.query.moduleId,
        name: "",
        description:'',
        type: "256",
        pageNo: 1,
        linesPerPage: 10000
      }
      getModuleFormList(searchParams, {
        onSucess: response => {
          if (response.data.errcode == 0) {
            this.loading = false;
            this.formData = response.data.data ? response.data.data : [];
            // 遍历看是否存在该值
            // if(this.formData && this.formData.length > 0){
              let have = false;
              this.formData.some(item => {
                if(item.id == this.params.dataSourceSearchForm){
                  have = true
                }
              })
              if(!have){
                this.params.dataSourceSearchForm = ""
              }
            // }
          }
        }
      })
    },

    /**
     * 获取相关表单
     */
    getRelatedFromList(){
      let params = this.params;
      let searchParams = {
        appId: params.appId,
        moduleId: params.moduleId,
        name: "",
        description: "",
        type: "1",
        pageNo: 1,
        linesPerPage: 10000
      }
      getModuleFormList(searchParams, {
        onSucess: response => {
          if (response.data.errcode == 0) {
            this.relatedforms = response.data.data;
          }
        }
      })
    },
    
    /**
     * 切换页签
     */
    handleClick(activeName) {
      let id = this.params.id;
      if(id == "" && activeName == "content"){
        this.$message({
          type: 'info',
          message: this.$t('msg.write_info_save')
        }); 
        return false;
      }else if(id!="" && activeName == 'content'){
        let params={
          appId:sessionStorage.getItem('appId'),
          reportId:id,
          dataSourceName:this.params.dataSourceName,
          type:this.params.dataSourceType,
          isForm: this.params.viewId ? false : true,
          viewId:this.params.viewId ? this.params.viewId: this.params.formId
        }
        // 判断是哪一种模式就传哪种值
        if(this.params.dataSourceType == 'DATASOURCE_TYPE_VIEW'){
          params.data={
            scriptString: ""
          }
        }else if(this.params.dataSourceType == 'DATASOURCE_TYPE_SQL'){
          params.data={
            scriptString: this.params.dataSourceSqlScript?this.params.dataSourceSqlScript:''
          }
        }else if(this.params.dataSourceType == 'DATASOURCE_TYPE_PROCEDURE'){
          params.data={
            scriptString: this.params.procedureScript?this.params.procedureScript:''
          }
        }else if(this.params.dataSourceType == 'DATASOURCE_TYPE_CUSTOM'){
          params.data={
            scriptString: this.params.dataSourceCustomScript?this.params.dataSourceCustomScript:''
          }
        }
        getQueryColumnInfos(params, {
          onSucess: response => {
            if (response.data.errcode == 0) {
              let data={...this.params}
              data.fields = response.data.data;
              this.$refs.reportDetail.contentWindow.postMessage(data, '*')
            }
          }
        })
        // window.frames['reportDetail'].reportDat=params;
      }
    },

    /**
     * 退出
     */
    goback(){
      this.$store.dispatch("rightHelpPageParams", { title: this.$t('msg.print_list'), url: "application/application_module_print_list_help.html" });
      this.$router.push({path: '/home/softwaresdetails/reportslist', query:{edit: true, moduleId: this.$route.query.moduleId}});
    },

    /**
     * 切换是否作为打印模板
     */
    onPrintChange(val){
      if(val == 1){
        this.isPrintVisible = true;
        this.viewVisible = false;
      }else{
        this.isPrintVisible = false;
        this.viewVisible = true;
      }
    },

    /**
     * 切换数据源
     */
    onDataSourceType(val){
      let isPrintVisible = false;
      let viewVisible = false;
      let sqlVisible = false;
      let procedureVisible = false;
      let customVisible = false;
      switch(val){
        case 1:
          isPrintVisible = true;
          break;
        case "DATASOURCE_TYPE_VIEW":
          viewVisible = true;
          break;
        case "DATASOURCE_TYPE_SQL":
          sqlVisible = true;
          break;
        case "DATASOURCE_TYPE_PROCEDURE":
          procedureVisible = true;
          break;
        case "DATASOURCE_TYPE_CUSTOM":
          customVisible = true;
          break;
      }
      this.isPrintVisible = isPrintVisible;
      this.viewVisible = viewVisible;
      this.sqlVisible = sqlVisible;
      this.procedureVisible = procedureVisible;
      this.customVisible = customVisible;
    },
    saveBasic(type,formName){
      let params = {
        ...this.params,
        ...this.$refs.reportDetail.contentWindow.params,
        name: this.params.name
      };
      if(params.result=='chartNoData'){
        this.$message({
          message: this.$t('msg.point_data'),
          type: 'error'
        });
        return false;
      }else if(params.result=='haveNoChunkElement'){
        this.$message({
          message: this.$t('msg.replace'),
          type: 'error'
        });
        return false;
      }else if(params.result=='haveGroupNoName'){
        this.$message({
          message: this.$t('msg.set_name'),
          type: 'error'
        });
        return false;
      }else if(params.result && type=='content'){
        if(!params.parentId)params.parentId=params.moduleId
        if(params.name){
          this.basicRef.validate(async (valid) => {
            if (valid) {
              const response = await updateReport(params);
              if (response.data.errcode == 0) {
                this.$message.success(this.$t('msg.update_ss'));
              }
            }
          });
        }
      }else if(type=='basic'){
        if(params.name){
          this.$refs[formName].validate(async (valid) => {
            if (valid) {
              const response = await updateReport(params);
              if (response.data.errcode == 0) {
                this.$message.success(this.$t('msg.update_ss'));
              }
            }
          });
        }
      }
    },
    /**
     * 保存报表
     */
    saveReports(params){
      if(this.params.id){
        if(this.activeName=="basic"){
          this.$refs.reportDetail.contentWindow.document.getElementById("save_btn").click();
          this.saveBasic('basic',params);
          
        }else if(this.activeName=="content"){
          this.$refs.reportDetail.contentWindow.document.getElementById("save_btn").click();
          this.saveBasic('content',params);
        }
        
      }else{
        this.$refs[params].validate(async (valid) => {
          if (valid) {
            const response = await createReports(this.params);
            if (response.data.errcode == 0) {
              let params = {
                ...this.params,
                id: response.data.data.id,
                jrxmlFilePath:response.data.data.jrxmlFilePath
              }
              this.params = params;
              this.$message({
                message: this.$t('msg.created_ss'),
                type: 'success'
              });
              this.$refs.reportDetail.contentWindow.postMessage(this.params, '*')
            }
          } else {
            return false;
          }
        });
      }
    },
    /**
     * 打开数据源列表对话框
     */
    openDataSourceDialog(){
      this.outerVisible = true;
    },

    /**
     * 选中数据源回显
     */
    onRowClick(row){
      let params = {
        ...this.params,
        dataSourceName: row.name
      }
      this.params = params;
      this.outerVisible = false;
    },
    /**
     * 数据源SQL 测试
     */
    testDataSource(){
      let params={
          appId:sessionStorage.getItem('appId'),
          dataSourceName:this.params.dataSourceName,
          type:this.params.dataSourceType,
          viewId:this.params.viewId,
        }
        params.data={
          scriptString: this.params.dataSourceSqlScript?this.params.dataSourceSqlScript:''
        }
      getQueryColumnInfos(params,{
        onSucess: response => {
          if (response.data.errcode == 0) {
            this.$message.success(this.$t('msg.test_ss'))
          }else{
            this.$message.error(this.$t('msg.test_err'))
          }
        }
      })
    },

    /**
     * 显示脚本编辑器弹框
     */
    showScriptEditor(val) {
      this.scriptEditorVisible = true;
      this.currentScriptEditor = val;
    },

    /**
     * 将脚本编辑器的值写入到textarea中
     */
    handleScriptEditor(val) {
      if (this.currentScriptEditor === "dataSourceSqlScript") {
        // 数据源SQL
        this.params.dataSourceSqlScript = val;
      } else if (this.currentScriptEditor === "procedureScript") {
        // 存储过程数据源
        this.params.procedureScript = val;
      } else if (this.currentScriptEditor === "dataSourceCustomScript") {
        // 自定义数据源
        this.params.dataSourceCustomScript = val;
      }
    },
  },
  computed: {
    /**
     * 脚本编辑器的值
     */
    showScritptEditorCode() {
      let code;
      if (this.currentScriptEditor === "dataSourceSqlScript") {
        // 数据源SQL
        code = this.params.dataSourceSqlScript;
      } else if (this.currentScriptEditor === "procedureScript") {
        // 存储过程数据源
        code = this.params.procedureScript;
      } else if (this.currentScriptEditor === "dataSourceCustomScript") {
        // 自定义数据源
        code = this.params.dataSourceCustomScript;
      }
      return code;
    },
  },
  watch: {
    "$store.state.rightHelpPageParams": {
      handler() {
        if (this.$store.state.rightHelpFrame) {
          this.$store.state.rightHelpFrame.contentWindow.showHelpContentHtml(this.$store.state.rightHelpPageParams.title, this.$store.state.rightHelpPageParams.url);
        }
      },
      deep: true,
    },
  },
}
</script>