<template>
  <div class="form-single-fragment third-party-dlg" style="position: relative;">
    <el-form ref="form" class="full-width-input form-box"
      :model="formData" :rules="rules"
      style="width: 100%;" label-width="80px"
      :size="defaultFormItemSize"
      label-position="left"
      @submit.native.prevent
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="脚本类型" prop="eventType">
            <el-select v-model="formData.eventType"
              :clearable="true" placeholder="脚本类型" style="width: 200px;"
              @change="onEventTypeChange"
            >
              <el-option v-for="item in dialogParams.eventList" :key="item.id"
                :label="item.name" :value="item.id" :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item>
            <el-row class="no-scroll flex-box" type="flex" justify="end">
              <el-button type="primary" :size="defaultFormItemSize"
                @click="onSubmit()">
                保存
              </el-button>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="11" style="height: 640px; margin-right: 15px;">
          <el-row>
            <ScriptEditor :value="formScriptString" title="表单数据"
              :options="{readOnly: true}"
              style="height: 640px; width: 100%; border: 1px solid #DCDCDC;"
            />
          </el-row>
        </el-col>
        <el-col :span="13" style="height: 640px;">
          <el-row>
            <ScriptEditor v-model="formData.scriptString"
              style="height: 640px; width: 100%; border: 1px solid #DCDCDC;"
              :title="currentEvent ? currentEvent.functionName : '事件脚本'"
            />
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { findItemFromList } from '@/utils';
import OnlineFormEventList from '@/online/event/index.js';
import onlineFormDataTemplate from './onlineFormDataTemplate.js';
import ScriptEditor from '@/components/ScriptEditor/index.vue';
import ejs from 'ejs';
import thirdPartyMixin from '@/views/thirdParty/thirdPartyMixin.js';

export default {
  name: 'editCustomEvent',
  props: {
    rowData: {
      type: Object
    },
    eventList: {
      type: Array
    },
    formConfig: {
      type: Object
    }
  },
  components: {
    ScriptEditor
  },
  mixins: [thirdPartyMixin],
  data () {
    return {
      formData: {
        eventType: undefined,
        scriptString: undefined
      },
      formScriptString: undefined,
      rules: {
        eventType: { required: true, message: '请选择脚本类型', trigger: 'blur' }
      }
    }
  },
  methods: {
    onEventTypeChange (val) {
      this.formData.scriptString = this.currentEvent ? this.currentEvent.comment.trim() : '';
    },
    onCancel (isSuccess = false) {
      let formData = {
        ...this.formData,
        showName: this.OnlineFormEventType.getValue(this.formData.eventType)
      }
      if (this.observer != null) {
        this.observer.cancel(isSuccess, formData);
      } else {
        this.onCloseThirdDialog(isSuccess, this.thirdParams.path, this.dialogParams.rowData, formData);
      }
    },
    onSubmit () {
      this.$refs.form.validate(valid => {
        if (!valid) return;
        this.onCancel(true);
      });
    }
  },
  computed: {
    dialogParams () {
      return {
        rowData: this.rowData || this.thirdParams.rowData,
        eventList: this.eventList || this.thirdParams.eventList,
        formConfig: this.formConfig || this.thirdParams.formConfig
      }
    },
    currentEvent () {
      return findItemFromList(OnlineFormEventList, this.formData.eventType, 'id');
    }
  },
  mounted () {
    let form = {
      tableList: [],
      customFieldList: this.dialogParams.formConfig.form.customFieldList
    };
    if (this.dialogParams.formConfig.getMasterTable) {
      if (this.dialogParams.formConfig.getMasterTable.relationType == null) {
        if (this.dialogParams.formConfig.form.formType === this.SysOnlineFormType.QUERY) {
          // 主表查询页面
          form.tableList = this.dialogParams.formConfig.getAllTableList.map(table => {
            return table.relationType !== this.SysOnlineRelationType.ONE_TO_MANY ? {
              showName: `${table.tag.datasourceName || table.tag.relationName} (${this.SysOnlineRelationType.getValue(table.relationType) || '主表'})`,
              variableName: table.tag.variableName,
              columnList: table.columnList.filter(column => column.filterType !== 0),
              isObject: true
            } : undefined;
          }).filter(item => item != null);
        } else {
          // 主表编辑页面
          form.tableList = this.dialogParams.formConfig.getAllTableList.map(table => {
            return {
              showName: `${table.tag.datasourceName || table.tag.relationName} (${this.SysOnlineRelationType.getValue(table.relationType) || '主表'})`,
              variableName: table.tag.variableName,
              columnList: table.columnList,
              isObject: table.relationType !== this.SysOnlineRelationType.ONE_TO_MANY
            }
          }).filter(item => item != null);
        }
      } else {
        let table = this.formConfig.getMasterTable;
        form.tableList = [
          {
            showName: `${table.tag.datasourceName || table.tag.relationName} (${this.SysOnlineRelationType.getValue(table.relationType) || '主表'})`,
            variableName: table.tag.variableName,
            columnList: this.formConfig.form.formType === this.SysOnlineFormType.QUERY ? table.columnList.filter(column => column.filterType !== 0) : table.columnList,
            isObject: true
          }
        ];
      }
    }
    
    this.formScriptString = ejs.render(onlineFormDataTemplate.queryFrom.trim(), {
      form: form
    });
    if (this.dialogParams.rowData) {
      this.formData = {
        ...this.dialogParams.rowData
      }
    }
  }
}
</script>

<style>
</style>
