<template>
  <div class="detail-wrap">
    <el-form ref="editForm" :model="requestAccess">
      <div class="d-header clearfix">
        <div class="fl">
          <i class="el-icon-info"/>
          {{ dataId ? $t1('查看请求访问') : $t1('新增请求访问') }}
        </div>
        <div class="fr">
          <el-button type="primary" plain class="button-sty" @click="$baseReload()" icon="el-icon-refresh-right">
            {{ $t1('重置') }}
          </el-button>
          <el-button type="primary" class="button-sty" icon="el-icon-check" @click="saveData">{{$t1('保存')}}</el-button>
        </div>
      </div>
      <div class="d-cont" style="height: calc(100vh - 190px) ;">
        <div class="d-item">
          <div class="title first"><b>{{ $t1('基本信息') }}</b></div>
          <table class="table-detail">
            <tbody>
            <tr>
              <th>
                <em class="f-red">*</em>
                请求访问名称
              </th>
              <td>
                <el-form-item prop="accessName" :rules="[{ required: true, trigger: 'blur' }]">
                  <el-input type="text" autocomplete="off" v-model="requestAccess.accessName" clearable/>
                </el-form-item>
              </td>
              <th>请求访问编码</th>
              <td>{{ requestAccess.accessCode }}</td>
              <th>
                <em class="f-red">*</em>
                模板编码
              </th>
              <td>{{ requestAccess.reportCode }}</td>
            </tr>
            <tr>
              <th>
                <em class="f-red">*</em>
                返回类型
              </th>
              <td colspan="3">
                <el-form-item prop="returnType" :rules="[{ required: true, trigger: 'blur' }]">
                  <el-radio-group v-model="requestAccess.returnType">
                    <el-radio :label="0">集合List</el-radio>
                    <el-radio :label="1">分页集合数据</el-radio>
                    <el-radio :label="2">单条数据</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
              <th>是否启用</th>
              <td>
                <el-form-item prop="enabled" :rules="[{ required: false, trigger: 'blur' }]">
                  <el-radio-group v-model="requestAccess.enabled">
                    <el-radio :label="true">启用</el-radio>
                    <el-radio :label="false">禁用</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th>
                <em class="f-red">*</em>
                脚本
              </th>
              <td colspan="7">
                <el-form-item prop="script" :rules="[{ required: true, trigger: 'blur' }]">
                  <code-editor mode="java" :readonly="!1" v-model="requestAccess.script"
                               v-if="showCodeEditor"></code-editor>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th>{{ $t1('创建人') }}</th>
              <td>{{ requestAccess.createBy }}</td>
              <th>{{ $t1('创建时间') }}</th>
              <td>{{ requestAccess.createDate }}</td>
              <th>{{ $t1('更新人') }}</th>
              <td>{{ requestAccess.modifyBy }}</td>
              <th>{{ $t1('更新时间') }}</th>
              <td>{{ requestAccess.modifyDate }}</td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="d-item" v-if="false">
          <div class="title"><b>请求设置</b></div>
          <table class="table-detail">
            <tbody>
            <tr>
              <th>
                <em class="f-red">*</em>
                唯一名称
              </th>
              <td>
                <el-form-item prop="dsModel.uniqueName" :rules="[{ required: true, trigger: 'blur' }]" label-width="0">
                  <el-input v-model="requestAccess.dsModel.uniqueName" clearable></el-input>
                </el-form-item>
              </td>
              <th>
                <em class="f-red">*</em>
                请求URL类型
              </th>
              <td>
                <el-form-item prop="dsModel.requestURLType" :rules="[{ required: true, trigger: 'blur' }]"
                              label-width="0">
                  <el-select v-model="requestAccess.dsModel.requestURLType" placeholder="请求URL类型"
                             @change="changeRequestURLType">
                    <el-option label="固定字符串" :value="'String'"></el-option>
                    <el-option label="变量或表达式" :value="'Variable'"></el-option>
                    <el-option label="SQL查询" :value="'SQL'"></el-option>
                  </el-select>
                </el-form-item>
              </td>
              <th>
                <em class="f-red">*</em>
                请求方法
              </th>
              <td colspan="3">
                <el-radio-group v-model="requestAccess.dsModel.requestMethod" size="small">
                  <el-radio-button :label="'get'"></el-radio-button>
                  <el-radio-button :label="'post'"></el-radio-button>
                  <el-radio-button :label="'put'"></el-radio-button>
                  <el-radio-button :label="'delete'"></el-radio-button>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <th>
                <em class="f-red">*</em>
                请求地址
              </th>
              <td colspan="3">
                <el-form-item prop="dsModel.requestURL" :rules="[{ required: true, trigger: 'blur' }]" label-width="0">
                  <el-input v-model="requestAccess.dsModel.requestURL" clearable
                            :disabled="requestAccess.dsModel.requestURLType == 'SQL'"></el-input>
                </el-form-item>
              </td>
              <th>描述信息</th>
              <td colspan="3">
                <el-input type="textarea" :row="2" v-model="requestAccess.dsModel.description"></el-input>
              </td>
            </tr>
            <tr>
              <th class="text-top">请求头(headers)</th>
              <td colspan="7">
                <el-row :span="6">
                  <el-button type="primary" plain icon="el-icon-plus" @click="addRequestHeader" class="button-sty">
                    新增请求头
                  </el-button>
                </el-row>
                <el-row v-for="(t, n) in requestAccess.dsModel.headers" :key="n" class="rh-row" :gutter="8">
                  <el-col :span="5">
                    <el-form-item :prop="'dsModel.headers.' + n + '.name'"
                                  :rules="[{ required: true, trigger: ['blur', 'change'] }]" label-width="0">
                      <el-input placeholder="名称" v-model="t.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item :prop="'dsModel.headers.' + n + '.type'" label-width="0">
                      <el-select placeholder="类型" v-model="t.type">
                        <el-option label="字符串类型" :value="'String'"></el-option>
                        <el-option label="数值类型" :value="'Number'"></el-option>
                        <el-option label="布尔类型" :value="'Boolean'"></el-option>
                        <el-option label="变量或表达式" :value="'Variable'"></el-option>
                        <el-option label="表单数据" :value="'FormData'"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item :prop="'dsModel.headers.' + n + '.value'"
                                  :rules="[{ required: true, trigger: ['blur', 'change'] }]" label-width="0">
                      <el-input placeholder="值" v-model="t.value"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <el-button icon="el-icon-delete" plain="" circle="" @click="deleteRequestHeader(n)"
                               size="mini"></el-button>
                  </el-col>
                </el-row>
              </td>
            </tr>
            <tr>
              <th class="text-top">参数(params)</th>
              <td colspan="7">
                <el-row :span="6">
                  <el-button type="primary" plain icon="el-icon-plus" @click="addRequestParam" class="button-sty">
                    新增请求参数
                  </el-button>
                </el-row>

                <el-row v-for="(t, n) in requestAccess.dsModel.params" :key="n" class="rh-row" :gutter="8">
                  <el-col :span="5">
                    <el-form-item :prop="'dsModel.params.' + n + '.name'"
                                  :rules="[{ required: true, trigger: ['blur', 'change'] }]" label-width="0">
                      <el-input placeholder="名称" v-model="t.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item :prop="'dsModel.params.' + n + '.type'" label-width="0">
                      <el-select placeholder="类型" v-model="t.type">
                        <el-option label="字符串类型" :value="'String'"></el-option>
                        <el-option label="数值类型" :value="'Number'"></el-option>
                        <el-option label="布尔类型" :value="'Boolean'"></el-option>
                        <el-option label="变量或表达式" :value="'Variable'"></el-option>
                        <el-option label="表单数据" :value="'FormData'"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item :prop="'dsModel.params.' + n + '.value'"
                                  :rules="[{ required: true, trigger: ['blur', 'change'] }]" label-width="0">
                      <el-input placeholder="值" v-model="t.value"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <el-button icon="el-icon-delete" plain="" circle="" @click="deleteRequestParam(n)"
                               size="mini"></el-button>
                  </el-col>
                </el-row>
              </td>
            </tr>
            <tr>
              <th class="text-top">发送数据(data)</th>
              <td colspan="7">
                <el-row :span="6">
                  <el-button type="primary" plain icon="el-icon-plus" @click="addRequestData" class="button-sty">
                    新增发送数据
                  </el-button>
                </el-row>
                <el-row v-for="(t, n) in requestAccess.dsModel.data" :key="n" class="rh-row" :gutter="8">
                  <el-col :span="5">
                    <el-form-item :prop="'dsModel.data.' + n + '.name'"
                                  :rules="[{ required: true, trigger: ['blur', 'change'] }]" label-width="0">
                      <el-input placeholder="名称" v-model="t.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item :prop="'dsModel.data.' + n + '.type'" label-width="0">
                      <el-select placeholder="类型" v-model="t.type">
                        <el-option label="字符串类型" :value="'String'"></el-option>
                        <el-option label="数值类型" :value="'Number'"></el-option>
                        <el-option label="布尔类型" :value="'Boolean'"></el-option>
                        <el-option label="变量或表达式" :value="'Variable'"></el-option>
                        <el-option label="表单数据" :value="'FormData'"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item :prop="'dsModel.data.' + n + '.value'"
                                  :rules="[{ required: true, trigger: ['blur', 'change'] }]" label-width="0">
                      <el-input placeholder="值" v-model="t.value"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <el-button icon="el-icon-delete" plain="" circle="" @click="deleteRequestData(n)"
                               size="mini"></el-button>
                  </el-col>
                </el-row>
              </td>
            </tr>
            <tr>
              <th class="text-top">请求配置</th>
              <td colspan="3">
                <el-alert type="info" :closable="!1" title="(config, isSandbox, DSV, VFR) => {"></el-alert>
                <code-editor ref="chEditor" mode="javascript" :readonly="!1"
                             v-model="requestAccess.dsModel.configHandlerCode" v-if="showCodeEditor"></code-editor>
                <el-alert type="info" :closable="!1" title="}"></el-alert>
              </td>
              <th class="text-top">数据处理</th>
              <td colspan="3">
                <el-alert type="info" :closable="!1" title="(result, isSandbox, DSV, VFR) => {"></el-alert>
                <code-editor ref="dhEditor" mode="javascript" :readonly="!1"
                             v-model="requestAccess.dsModel.dataHandlerCode" v-if="showCodeEditor"></code-editor>
                <el-alert type="info" :closable="!1" title="}"></el-alert>
              </td>
            </tr>
            <tr>
              <th class="text-top">错误处理</th>
              <td colspan="3">
                <el-alert type="info" :closable="!1" title="(error, isSandbox, DSV, $message, VFR) => {"></el-alert>
                <code-editor ref="ehEditor" mode="javascript" :readonly="!1"
                             v-model="requestAccess.dsModel.errorHandlerCode" v-if="showCodeEditor"></code-editor>
                <el-alert type="info" :closable="!1" title="}"></el-alert>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </el-form>
    <!-- <datasourceDialog v-if="showDataSourceDialog" :visiable.sync="showDataSourceDialog" @confirm="confirmInsertDataSource" multi="false" /> -->
  </div>
</template>

<script>
export default {
  name: 'report_requestaccessEdit',
  props: {
    _dataId: [String, Number],
    reportCode: [String]
  },
  components: {},
  data() {
    return {
      isEdit: false,
      activeName: 'first',
      dataId: '',
      requestAccess: {
        enabled: null,
        accessType: null,
        returnType: null,
        accessUrl: null,
        // dataSetDTOs: [],
        dsModel: {
          headers: [],
          params: [],
          data: [],
          dataHandlerCode: '',
          configHandlerCode: '',
          errorHandlerCode: '',
          requestMethod: null,
          requestURLType: null,
          requestURL: null
        }
      },
      dataSetIndex: null,
      showDataSourceDialog: false,
      showCodeEditor: false
    };
  },
  computed: {},
  created() {
    if (this._dataId && !isNaN(this._dataId)) this.dataId = this._dataId;
  },
  mounted() {
    this.getData();
  },
  methods: {
    addRequestHeader: function () {
      this.requestAccess.dsModel.headers.push({
        name: '',
        type: 'String',
        value: ''
      });
    },
    deleteRequestHeader: function (e) {
      this.requestAccess.dsModel.headers.splice(e, 1);
    },
    addRequestParam: function () {
      this.requestAccess.dsModel.params.push({
        name: '',
        type: 'String',
        value: ''
      });
    },
    deleteRequestParam: function (e) {
      this.requestAccess.dsModel.params.splice(e, 1);
    },
    addRequestData: function () {
      this.requestAccess.dsModel.data.push({
        name: '',
        type: 'String',
        value: ''
      });
    },
    deleteRequestData: function (e) {
      this.requestAccess.dsModel.data.splice(e, 1);
    },
    /* addDataSet: function(e) {
      this.requestAccess.dataSetDTOs.push({
        type: 1,
        enabled: true
      });
    },
    delDataSet: function(dataSetIndex) {
      this.requestAccess.dataSetDTOs.splice(dataSetIndex, 1);
    }, */
    getData() {
      if (this.dataId && !isNaN(this.dataId)) {
        this.isEdit = true;
        this.$commonHttp({
          url: SUPPORT_PREFIX + `/report_requestaccess/get`,
          method: `post`,
          data: {
            id: this.dataId
          },
          isLoading: true,
          modalStrictly: true,
          success: res => {
            let requestAccess = res.objx || {};

            let dsModel = {};
            if (requestAccess.accessViewContent) {
              dsModel = JSON.parse(requestAccess.accessViewContent);
            }
            if (!dsModel.headers) dsModel.headers = [];
            if (!dsModel.params) dsModel.params = [];
            if (!dsModel.data) dsModel.data = [];
            if (dsModel.dataHandlerCode == null) dsModel.dataHandlerCode = '';
            if (dsModel.configHandlerCode == null) dsModel.configHandlerCode = '';
            if (dsModel.errorHandlerCode == null) dsModel.errorHandlerCode = '';

            requestAccess.dsModel = dsModel;
            this.requestAccess = requestAccess;
            this.showCodeEditor = true;
            // this.getDataSets();
          }
        });
      } else {
        this.requestAccess.enabled = true;
        this.requestAccess.reportCode = this.reportCode;
        this.requestAccess.accessType = 0;
        this.requestAccess.returnType = 0;

        this.requestAccess.dsModel.requestURLType = 'SQL';
        this.requestAccess.dsModel.requestMethod = 'post';
        this.requestAccess.dsModel.dataHandlerCode = '  return result.objx;';
        this.requestAccess.dsModel.configHandlerCode = '  return config';
        this.showCodeEditor = true;

        this.changeAccessType(this.requestAccess.accessType);
        this.changeRequestURLType(this.requestAccess.dsModel.requestURLType);
      }
    },
    /* getDataSets() {
      this.$http({
        url: SUPPORT_PREFIX + `/report_requestaccess/getDataSets`,
        method: `post`,
        data: {
          id: this.dataId
        },
        isLoading: true,
        modalStrictly: true,
        success: res => {
          this.requestAccess.dataSetDTOs = res.objx || [];
        }
      });
    }, */
    saveData() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$baseConfirm(this.$t1('您确定要保存吗？')).then(() => {
            /* this.requestAccess.dsModel = {
              headers: [],
              params: [],
              data: [],
              dataHandlerCode: '  return result.data.data;',
              configHandlerCode: '  return config',
              errorHandlerCode: ''
            } */
            let accessViewContent = JSON.stringify(this.requestAccess.dsModel);
            let formData = JSON.parse(JSON.stringify(this.requestAccess));
            formData.accessViewContent = accessViewContent;
            delete formData.dsModel;

            var url = SUPPORT_PREFIX + (this.isEdit ? `/report_requestaccess/update` : `/report_requestaccess/save`);
            this.$http({
              url: url,
              method: `post`,
              data: formData,
              isLoading: true,
              success: res => {
                this.$message({
                  message: res.content,
                  type: 'success',
                  duration: 500,
                  onClose: t => {
                    if (this.isEdit) {
                      this.$baseReload();
                    } else {
                      this.$baseReload({
                        updateParam: {
                          _dataId: res.objx
                        }
                      });
                    }
                  }
                });
              }
            });
          });
        }
      });
    },
    /* openDataSourceDialog(dataSetIndex) {
      this.dataSetIndex = dataSetIndex;
      this.showDataSourceDialog = true;
    },
    confirmInsertDataSource(rows) {
      if (rows.length) {
        let row = rows[0];
        let dataSetDTO = this.requestAccess.dataSetDTOs[this.dataSetIndex];
        dataSetDTO.dsCode = row.dsCode;
        dataSetDTO.dsName = row.dsName;
      }
    }, */
    changeRequestURLType(val) {
      if (val == 'SQL') {
        this.requestAccess.dsModel.requestURL = SUPPORT_PREFIX + '/report_ins/getData';
      } else {
        this.requestAccess.dsModel.requestURL = '';
      }
    },
    changeAccessType(val) {
      if (val === 0) {
        this.requestAccess.accessUrl = SUPPORT_PREFIX + '/report_ins/getData';
      }
    }
  }
};
</script>
