<template>
  <div>
    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top">请求访问设置</el-divider>
    </el-form-item>
<!--    <el-form-item label="启用脚本">
      <el-switch v-model="optionModel.scriptEnabled" @change="changeScriptEnabled"></el-switch>
    </el-form-item>-->

    <el-form-item label="请求访问类型">
      <el-select v-model="optionModel.accessType">
        <el-option value="1" label="脚本"></el-option>
        <el-option value="2" label="自定义"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="请求地址">
      <el-input type="text" v-model="optionModel.accessUrl"></el-input>
    </el-form-item>
    <el-form-item label="数据返回类型">
      <el-select v-model="optionModel.accessReturnType">
        <el-option value="1" label="集合List"></el-option>
        <el-option value="2" label="分页集合数据"></el-option>
        <el-option :value="3" label="单条数据"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="请求访问加载数据">
      <el-switch v-model="optionModel.isLoadDataByAccess"></el-switch>
    </el-form-item>
<!--    <el-form-item label="自动执行脚本">
      <el-switch v-model="optionModel.accessAutoExc" @change="changeScriptEnabled"></el-switch>
    </el-form-item>-->
    <el-form-item label="数据返回类型">
      <el-select v-model="optionModel.accessReturnType">
        <el-option :value="0" label="集合List"></el-option>
        <el-option :value="1" label="分页集合数据"></el-option>
        <el-option :value="2" label="单条数据"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="请求访问参数">
      <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler(1)">
        {{ i18nt('designer.setting.addEventHandler') }}
      </el-button>
    </el-form-item>
    <el-form-item label="请求访问回调">
      <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler(1)">
        {{ i18nt('designer.setting.addEventHandler') }}
      </el-button>
    </el-form-item>
    <el-form-item label="脚本">
      <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler(1)">
        {{ i18nt('designer.setting.addEventHandler') }}
      </el-button>
    </el-form-item>
<!--    <el-form-item label="前置脚本编码">
      {{ scriptUuid }}
    </el-form-item>
    <el-form-item label="后置脚本">
      <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler(2)">
        {{ i18nt('designer.setting.addEventHandler') }}
      </el-button>
    </el-form-item>
    <el-form-item label="后缀脚本编码">
      {{ scriptUuid2 }}
    </el-form-item>-->
<!--    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top"></el-divider>
    </el-form-item>-->
    <el-dialog
      :title="scriptTypeTitle"
      :visible.sync="showWidgetEventDialogFlag"
      v-if="showWidgetEventDialogFlag"
      :show-close="true"
      custom-class="dialog-style list-dialog"
      v-dialog-drag
      append-to-body=""
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      @close="showWidgetEventDialogFlag=false"
      v-el-dialog-center
    >
      <div class="cont" style="height:calc(100vh - 110px);padding-bottom: 8px;">
        <el-form v-model="scriptOption">
          <el-form-item label="脚本编码">
            {{ showCurrentScriptUuid }}
          </el-form-item>
          <el-form-item label-width="0">
            <el-divider class="custom-divider-margin-top">脚本</el-divider>
          </el-form-item>
          <code-editor :mode="'java'" :readonly="false" v-model="scriptOption.script" ref="ecEditor"></code-editor>
          <el-form-item label-width="0">
            <el-divider class="custom-divider-margin-top">查询参数维护</el-divider>
          </el-form-item>
          <el-alert type="info" :closable="false" title="scriptParams(formCode){"></el-alert>
          <code-editor :mode="'javascript'" :readonly="false" v-model="scriptOption.scriptParams"></code-editor>
          <el-alert type="info" :closable="false" title="}"></el-alert>

          <el-form-item label-width="0">
            <el-divider class="custom-divider-margin-top">脚本执行回调</el-divider>
          </el-form-item>
          <el-alert type="info" :closable="false" title="onScriptSuccess(ressultMsg){"></el-alert>
          <code-editor :mode="'javascript'" :readonly="false" v-model="scriptOption.onScriptSuccess"></code-editor>
          <el-alert type="info" :closable="false" title="}"></el-alert>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showWidgetEventDialogFlag = false" class="button-sty" icon="el-icon-close">
          {{ i18nt('designer.hint.cancel') }}
        </el-button>
        <el-button type="primary" @click="saveEventHandler" class="button-sty" icon="el-icon-check">
          {{ i18nt('designer.hint.confirm') }}
        </el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import i18n from "../../../../../../components/xform/utils/i18n"

export default {
  name: "script-editor",
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
    scriptConfig: Object
  },
  data() {
    return {
      showWidgetEventDialogFlag: false,
      scriptOption: null,
      scriptType: 1,
      showCurrentScriptUuid: null
    }
  },
  computed: {
    showLoadDataByScript() {
      return ['select'].includes(this.selectedWidget.type);
    },
    scriptTypeTitle() {
      let scriptType = this.scriptType;
      if (scriptType == 1) {
        return '前置脚本'
      } else if (scriptType == 2) {
        return '后置脚本'
      }
      return "脚本";
    },
    currentScriptUuid() {
      let scriptType = this.scriptType;
      if (scriptType == 1) {
        return this.optionModel.scriptUuid;
      } else if (scriptType == 2) {
        return this.optionModel.scriptUuid2;
      }
      return this.optionModel.scriptUuid;
    },
    currentScriptField() {
      let scriptType = this.scriptType;
      if (scriptType == 1) {
        return 'scriptUuid';
      } else if (scriptType == 2) {
        return 'scriptUuid2';
      }
      return "scriptUuid";
    },
    scriptUuid() {
      return this.hasScript() ? this.optionModel.scriptUuid : null;
    },
    scriptUuid2() {
      return this.hasScript() ? this.optionModel.scriptUuid2 : null;
    }
  },
  methods: {
    hasScript() {
      let scriptObj = this.getScriptObj(this.optionModel.scriptUuid);
      return !!scriptObj && !!scriptObj.script
    },
    hasScript2() {
      let scriptObj = this.getScriptObj(this.optionModel.scriptUuid2);
      return !!scriptObj && !!scriptObj.script
    },
    getScriptObj(uuid) {
      let scriptObj = null;
      if (uuid) {
        let scripts = this.designer.formConfig.scriptList || [];
        scriptObj = scripts.find(item => {
          return item.uuid == uuid
        });
      }
      return scriptObj;
    },
    guid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (Math.random() * 16) | 0,
          v = c == 'x' ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      });
    },
    editEventHandler(scriptType) {
      this.scriptType = scriptType;
      let currentScript = this.getCurrentScript();
      this.showCurrentScriptUuid = currentScript && currentScript.uuid && currentScript.script ? currentScript.uuid : null;
      this.scriptOption = this.$baseLodash.cloneDeep(this.scriptConfig || this.getCurrentScript());
      this.showWidgetEventDialogFlag = true;
    },
    saveEventHandler() {
      this.saveScript();
      this.showWidgetEventDialogFlag = false;
    },
    getCurrentScript() {
      let scriptUuid = this.currentScriptUuid;
      let data = this.getScriptObj(scriptUuid)
      if (!data) {
        data = {
          uuid: null,
          script: null,
          scriptParams: null,
          onScriptSuccess: null
        }
      }
      return data;
    },
    saveScript(flag) {
      let scriptConfig = this.scriptConfig;
      if (this.scriptConfig) {
        if (flag !== 1) {
          this.$emit("update:scriptConfig", this.$baseLodash.cloneDeep(this.scriptOption));
          return;
        }
      }
      let data = this.$baseLodash.cloneDeep(scriptConfig || this.scriptOption);
      let scriptUuid = this.currentScriptUuid;
      let currentScriptField = this.currentScriptField;
      if (!scriptUuid) {
        scriptUuid = 'script' + this.guid();
        this.optionModel[currentScriptField] = scriptUuid;
      }

      let scripts = this.designer.formConfig.scriptList || [];
      scripts.forEach(item => {
        item.enabled = true;
      });
      let scriptObj = this.getScriptObj(scriptUuid)
      if (scriptObj) {
        Object.assign(scriptObj, {
          script: data.script,
          scriptParams: data.scriptParams,
          onScriptSuccess: data.onScriptSuccess,
          enabled: true
        })
      } else {
        scripts.push({
          uuid: scriptUuid,
          script: data.script,
          scriptParams: data.scriptParams,
          onScriptSuccess: data.onScriptSuccess,
          enabled: true
        })
      }

      this.designer.formConfig.scriptList = scripts.filter(item => {
        return !!item.script || !!item.scriptParams || !!item.onScriptSuccess;
      });
    },
    changeScriptEnabled(val) {
      let scripts = this.designer.formConfig.scriptList || [];
      let scriptUuid = this.optionModel.scriptUuid;
      let scriptUuid2 = this.optionModel.scriptUuid2;
      scripts.forEach(item => {
        if (item.uuid === scriptUuid || item.uuid === scriptUuid2) {
          item.enabled = val;
        }
      });
    }
  }

}
</script>

<style scoped>

</style>
