<template>
  <ed-dialog ref="BasicDialog" :fullscreen="true" :showOkBtn="false" :title="title"
          :visible.sync="visibleDialog"
          v-if="visibleDialog"
          @close="closeDialog">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>元数据</span>
        <el-button-group style="float: right;">
          <el-button :loading="loading" icon="el-icon-document-add" size="small " type="primary"
                     @click="saveInterfaceMeta">保存
          </el-button>
          <el-button :loading="loading" icon="el-icon-refresh-right" size="small " type="" @click="refresh">
            刷新
          </el-button>
        </el-button-group>
      </div>
      <el-tabs v-model="activeTabName" @tab-click="handleClick">
        <el-tab-pane :label="row.keyInfoObject.is_custom === 'xml'?'请求Head':'请求Header'" name="requestHead">
          <el-tabs style="" tab-position="left">
            <el-tab-pane label="报文">
              <el-button size="small" style="margin-bottom: 10px" type="primary" @click="resolveReqHeadMeta">解析元数据
              </el-button>
              <ed-code-editor
                ref="commonEditor"
                :value="form.xmlReqHeadConstruct"
                language="javascript"
                @input="changeTextareaReqHead"
              ></ed-code-editor>

            </el-tab-pane>
            <el-tab-pane label="元数据">
              <div style="display: flex;justify-content: space-between;">
                <div style="width: 70%">
                  <el-table
                    :data="reqHeadTableDataSource"
                    border
                    style="width: 100%"
                    @row-click="clickRowReqHead">
                    <el-table-column align="center" label="选择" width="55">
                      <template slot-scope="scope">
                        <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
                        <el-radio v-model="selectVal" :label="scope.row.name" class="radio">&nbsp;
                        </el-radio>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="节点"
                      prop="name"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      label="路径"
                      prop="path"
                      width="180">
                    </el-table-column>
                  </el-table>
                </div>
                <div style="width: 130%;margin-left: 10px">
                  <el-form ref="tableInfoForm" :inline="true" :model="tableInfoForm"
                           class="demo-form-inline">
                    <el-table
                      :data="reqHeadFieldDataSource"
                      border
                      style="width: 100%">
                      <el-table-column
                        label="字段名"
                        prop="name"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        label="数据类型"
                        prop="dataType"
                        width="180">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-select v-model="scope.row.dataType">
                              <el-option label="STR" value="STR"></el-option>
                              <el-option label="PROP" value="PROP"></el-option>
                              <el-option label="ARRAY" value="ARRAY"></el-option>
                              <el-option label="OBJECT" value="OBJECT"></el-option>
                            </el-select>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="备注"
                        prop="remark"
                        width="180">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input v-model="scope.row.remark"
                                      placeholder="备注"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="字段映射"
                        prop="fieldMapping"
                        width="180">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input v-model="scope.row.fieldMapping"
                                      placeholder="字段映射"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="接口变量"
                        prop="interfaceVariable"
                        width="180">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input v-model="scope.row.interfaceVariable"
                                      placeholder="字段映射"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="是否必输"
                        prop="isRequired"
                        width="100">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-select v-model="scope.row.isRequired">
                              <el-option :value="true" label="是"></el-option>
                              <el-option :value="false" label="否"></el-option>
                            </el-select>
                          </el-form-item>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane :lazy="true" label="请求Body" name="requestBody">
          <el-tabs style="" tab-position="left">
            <el-tab-pane label="报文">
              <el-button size="small" style="margin-bottom: 10px" type="primary" @click="resolveReqBodyMeta">解析元数据
              </el-button>
              <ed-code-editor ref="commonEditor"
                          :value="form.xmlReqBodyConstruct"
                          language="javascript"
                          @input="changeTextareaReqBody"
              ></ed-code-editor>

            </el-tab-pane>
            <el-tab-pane label="元数据">
              <div style="display: flex;justify-content: space-between;">
                <div style="width: 70%">
                  <el-table
                    :data="reqBodyTableDataSource"
                    border
                    style="width: 100%"
                    @row-click="clickRowReqBody">
                    <el-table-column align="center" label="选择" width="55">
                      <template slot-scope="scope">
                        <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
                        <el-radio v-model="selectVal" :label="scope.row.name" class="radio">&nbsp;
                        </el-radio>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="节点"
                      prop="name"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      label="路径"
                      prop="path"
                      width="180">
                    </el-table-column>
                  </el-table>
                </div>
                <div style="width: 130%;margin-left: 10px">
                  <el-form ref="tableInfoForm" :inline="true"
                           class="demo-form-inline">
                    <el-table
                      :data="reqBodyFieldDataSource"
                      border
                      style="width: 100%">
                      <el-table-column
                        label="字段名"
                        prop="name"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        label="数据类型"
                        prop="dataType"
                        width="180">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-select v-model="scope.row.dataType">
                              <el-option label="STR" value="STR"></el-option>
                              <el-option label="PROP" value="PROP"></el-option>
                              <el-option label="ARRAY" value="ARRAY"></el-option>
                              <el-option label="OBJECT" value="OBJECT"></el-option>
                            </el-select>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="备注"
                        prop="remark"
                        width="180">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input v-model="scope.row.remark"
                                      placeholder="备注"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="字段映射"
                        prop="fieldMapping"
                        width="180">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input v-model="scope.row.fieldMapping"
                                      placeholder="字段映射"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="接口变量"
                        prop="interfaceVariable"
                        width="180">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input v-model="scope.row.interfaceVariable"
                                      placeholder="字段映射"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="是否必输"
                        prop="isRequired"
                        width="100">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-select v-model="scope.row.isRequired">
                              <el-option :value="true" label="是"></el-option>
                              <el-option :value="false" label="否"></el-option>
                            </el-select>
                          </el-form-item>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane v-if="row.keyInfoObject.is_custom === 'xml'" :lazy="true" label="响应Head" name="responseHead">
          <el-tabs style="" tab-position="left">
            <el-tab-pane label="报文">
              <el-button size="small" style="margin-bottom: 10px" type="primary" @click="resolveRespHeadMeta">解析元数据
              </el-button>
              <ed-code-editor
                ref="commonEditor"
                :value="form.xmlRespHeadConstruct"
                language="javascript"
                @input="changeTextareaRespHead"
              ></ed-code-editor>

            </el-tab-pane>
            <el-tab-pane label="元数据">
              <div style="display: flex;justify-content: space-between;">
                <div style="width: 60%">
                  <el-form ref="tableInfoForm" :inline="true"
                           class="demo-form-inline">
                    <el-table
                      :data="respHeadTableDataSource"
                      border
                      style="width: 100%"
                      @row-click="clickRowRespHead">
                      <el-table-column align="center" label="选择" width="55">
                        <template slot-scope="scope">
                          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
                          <el-radio v-model="selectVal" :label="scope.row.name" class="radio">&nbsp;
                          </el-radio>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="节点"
                        prop="name"
                        width="100">
                      </el-table-column>
                      <el-table-column
                        label="路径"
                        prop="path"
                        width="100">
                      </el-table-column>
                      <el-table-column
                        label="数据包装器"
                        prop="dataPackage"
                        width="150">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-select v-model="scope.row.dataPackage">
                              <el-option label="无" value="Null"></el-option>
                              <el-option label="列表" value="Array"></el-option>
                              <el-option label="对象" value="Object"></el-option>
                            </el-select>
                          </el-form-item>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form>
                </div>
                <div style="width: 140%;margin-left: 10px">
                  <el-form ref="tableInfoForm" :inline="true" :model="tableInfoForm"
                           class="demo-form-inline">
                    <el-table
                      :data="respHeadFieldDataSource"
                      border
                      style="width: 100%">
                      <el-table-column
                        label="字段名"
                        prop="name"
                        width="100">
                      </el-table-column>
                      <el-table-column
                        label="数据类型"
                        prop="dataType"
                        width="100">
                      </el-table-column>
                      <el-table-column
                        label="备注"
                        prop="remark"
                        width="120">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input v-model="scope.row.remark"
                                      placeholder="备注"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="字段映射"
                        prop="fieldMapping"
                        width="140">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input v-model="scope.row.fieldMapping"
                                      placeholder="字段映射"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="接口变量"
                        prop="interfaceVariable"
                        width="140">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input v-model="scope.row.interfaceVariable"
                                      placeholder="字段映射"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="值校验(条件)"
                        prop="valueValidateCondition"
                        width="140">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-select v-if="scope.row.dataType === 'STR'" v-model="scope.row.valueValidateCondition">
                              <el-option label="测试" value="test"></el-option>
                            </el-select>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="值校验(值)"
                        prop="valueValidateValue"
                        width="150">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input v-model="scope.row.valueValidateValue"
                                      placeholder=""></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane :lazy="true" label="响应Body" name="responseBody">
          <el-tabs style="" tab-position="left">
            <el-tab-pane label="报文">
              <el-button size="small" style="margin-bottom: 10px" type="primary" @click="resolveRespBodyMeta">解析元数据
              </el-button>
              <ed-code-editor
                ref="commonEditor"
                :value="form.xmlRespBodyConstruct"
                language="javascript"
                @input="changeTextareaRespBody"
              ></ed-code-editor>

            </el-tab-pane>
            <el-tab-pane label="元数据">
              <div style="display: flex;justify-content: space-between;">
                <div style="width: 60%">
                  <el-form ref="tableInfoForm" :inline="true"
                           class="demo-form-inline">
                    <el-table
                      :data="respBodyTableDataSource"
                      border
                      style="width: 100%"
                      @row-click="clickRowRespBody">
                      <el-table-column align="center" label="选择" width="55">
                        <template slot-scope="scope">
                          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
                          <el-radio v-model="selectVal" :label="scope.row.name" class="radio">&nbsp;
                          </el-radio>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="节点"
                        prop="name"
                        width="100">
                      </el-table-column>
                      <el-table-column
                        label="路径"
                        prop="path"
                        width="100">
                      </el-table-column>
                      <el-table-column
                        label="数据包装器"
                        prop="dataPackage"
                        width="150">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-select v-model="scope.row.dataPackage">
                              <el-option label="无" value="Null"></el-option>
                              <el-option label="列表" value="Array"></el-option>
                              <el-option label="对象" value="Object"></el-option>
                            </el-select>
                          </el-form-item>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form>
                </div>
                <div style="width: 140%;margin-left: 10px">
                  <el-form ref="tableInfoForm" :inline="true" :model="tableInfoForm"
                           class="demo-form-inline">
                    <el-table
                      :data="respBodyFieldDataSource"
                      border
                      style="width: 100%">
                      <el-table-column
                        label="字段名"
                        prop="name"
                        width="100">
                      </el-table-column>
                      <el-table-column
                        label="数据类型"
                        prop="dataType"
                        width="100">
                      </el-table-column>
                      <el-table-column
                        label="备注"
                        prop="remark"
                        width="120">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input v-model="scope.row.remark"
                                      placeholder="备注"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="字段映射"
                        prop="fieldMapping"
                        width="140">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input v-model="scope.row.fieldMapping"
                                      placeholder="字段映射"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="接口变量"
                        prop="interfaceVariable"
                        width="140">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input v-model="scope.row.interfaceVariable"
                                      placeholder="字段映射"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="循环节点"
                        prop="repeatValueNode"
                        width="140">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-select v-if="scope.row.dataType === 'ARRAY'" v-model="scope.row.repeatValueNode">
                              <el-option label="测试" value="test"></el-option>
                            </el-select>
                          </el-form-item>
                        </template>
                        <template slot="header" slot-scope="scope">
                          {{ scope.column.label }}
                          <el-tooltip class="item"
                                      content="适用于循环分页接口；只有数据类型为ARRAY时才能操作；响应的每页数据将在选择的节点上进行数据合并"
                                      effect="dark"
                                      placement="top-start">
                            <i class="el-icon-question"></i>
                          </el-tooltip>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="值校验(条件)"
                        prop="valueValidateCondition"
                        width="140">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-select v-if="scope.row.dataType === 'STR'" v-model="scope.row.valueValidateCondition">
                              <el-option label="测试" value="test"></el-option>
                            </el-select>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="值校验(值)"
                        prop="valueValidateValue"
                        width="150">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input v-model="scope.row.valueValidateValue"
                                      placeholder=""></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </ed-dialog>
</template>

<script>
import {resolveMeta, saveMeta, getMeta} from "../../../../api/interface";

export default {
  name: "InterfaceMessage",
  data() {
    return {
      loading: false,
      visibleDialog: false,
      activeTabName: 'requestHead',
      form: {
        xmlReqHeadConstruct: '',
        xmlReqBodyConstruct: '',
        xmlRespHeadConstruct: '',
        xmlRespBodyConstruct: ''
      },
      reqHeadTableDataSource: [],
      reqHeadFieldDataSource: [],

      reqBodyTableDataSource: [],
      reqBodyFieldDataSource: [],

      respHeadTableDataSource: [],
      respHeadFieldDataSource: [],

      respBodyTableDataSource: [],
      respBodyFieldDataSource: [],

      selectVal: '',
      tableInfoForm: {},
      row: {keyInfoObject: {}},
      title: ''
    }
  },

  methods: {
    show(row, title) {
      this.row = row
      this.title = title
      this.visibleDialog = true
      this.getInterfaceMeta()
    },
    refresh() {
      this.reqHeadFieldDataSource = []
      this.reqBodyFieldDataSource = []
      this.respHeadFieldDataSource = []
      this.respBodyFieldDataSource = []
      this.getInterfaceMeta()
    },
    getInterfaceMeta() {
      let params = {
        dataSourceName: 'interface_meta',
        key: {
          interface_id: this.row.id,
          type: 'request'
        }
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
      });
      getMeta(params).then((res) => {
        if (res.success) {
          if (res.data && res.data.dataInfoArray) {
            if (res.data.dataInfoArray[0]) {
              this.form.xmlReqHeadConstruct = res.data.dataInfoArray[0].source
              let metas = res.data.dataInfoArray[0].meta
              metas.forEach(meta => {
                meta.metaType = 'requestHead'
                return meta
              })
              this.reqHeadTableDataSource = metas
            }
            if (res.data.dataInfoArray[1]) {
              this.form.xmlReqBodyConstruct = res.data.dataInfoArray[1].source
              let metas = res.data.dataInfoArray[1].meta
              metas.forEach(meta => {
                meta.metaType = 'requestBody'
                return meta
              })
              this.reqBodyTableDataSource = metas
            }
            if (res.data.dataInfoArray[2]) {
              this.form.xmlRespHeadConstruct = res.data.dataInfoArray[2].source
              let metas = res.data.dataInfoArray[2].meta
              metas.forEach(meta => {
                meta.metaType = 'responseHead'
                return meta
              })
              this.respHeadTableDataSource = metas
            }
            if (res.data.dataInfoArray[3]) {
              this.form.xmlRespBodyConstruct = res.data.dataInfoArray[3].source
              let metas = res.data.dataInfoArray[3].meta
              metas.forEach(meta => {
                meta.metaType = 'responseBody'
                return meta
              })
              this.respBodyTableDataSource = metas
            }
          }
        } else {
          this.$message.error(res.msg)
        }
      }).finally(() => {
        loading.close()
      })
    },
    handleClick() {
    },
    changeTextareaReqHead(val) {
      this.form.xmlReqHeadConstruct = val
    },
    changeTextareaReqBody(val) {
      this.form.xmlReqBodyConstruct = val
    },
    changeTextareaRespHead(val) {
      this.form.xmlRespHeadConstruct = val
    },
    changeTextareaRespBody(val) {
      this.form.xmlRespBodyConstruct = val
    },
    resolveReqHeadMeta() {
      if (this.form.xmlReqHeadConstruct) {
        //验证报文格式
        let headRule = this.validateXml(this.form.xmlReqHeadConstruct)
        if (headRule) {
          this.$message.warning("请求head" + headRule.message)
        } else {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
          });
          resolveMeta({source: this.form.xmlReqHeadConstruct}).then((res) => {
            if (res.success) {
              this.reqHeadTableDataSource = res.data
            } else {
              this.$message.error(res.msg)
            }
          }).finally(() => {
            loading.close()
          })
        }
      } else {
        this.$message.warning('请输入请求head')
      }
    },
    resolveReqBodyMeta() {
      if (this.form.xmlReqBodyConstruct) {
        //验证报文格式
        let headRule = this.validateXml(this.form.xmlReqBodyConstruct)
        if (headRule) {
          this.$message.warning("请求body" + headRule.message)
        } else {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
          });
          resolveMeta({source: this.form.xmlReqBodyConstruct}).then((res) => {
            if (res.success) {
              this.reqBodyTableDataSource = res.data
            } else {
              this.$message.error(res.msg)
            }
          }).finally(() => {
            loading.close()
          })
        }
      } else {
        this.$message.warning('请输入请求body')
      }
    },
    resolveRespHeadMeta() {
      if (this.form.xmlRespHeadConstruct) {
        //验证报文格式
        let headRule = this.validateXml(this.form.xmlRespHeadConstruct)
        if (headRule) {
          this.$message.warning("响应head" + headRule.message)
        } else {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
          });
          resolveMeta({source: this.form.xmlRespHeadConstruct}).then((res) => {
            if (res.success) {
              this.respHeadTableDataSource = res.data
            } else {
              this.$message.error(res.msg)
            }
          }).finally(() => {
            loading.close()
          })
        }
      } else {
        this.$message.warning('请输入响应head')
      }
    },
    resolveRespBodyMeta() {
      if (this.form.xmlRespBodyConstruct) {
        //验证报文格式
        let headRule = this.validateXml(this.form.xmlRespBodyConstruct)
        if (headRule) {
          this.$message.warning("响应body" + headRule.message)
        } else {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
          });
          resolveMeta({source: this.form.xmlRespBodyConstruct}).then((res) => {
            if (res.success) {
              this.respBodyTableDataSource = res.data
            } else {
              this.$message.error(res.msg)
            }
          }).finally(() => {
            loading.close()
          })
        }
      } else {
        this.$message.warn('请输入响应body')
      }
    },
    clickRowReqHead(row) {
      this.selectVal = row.name
      this.reqHeadFieldDataSource = row.fields
    },
    clickRowReqBody(row) {
      this.selectVal = row.name
      this.reqBodyFieldDataSource = row.fields
    },
    clickRowRespHead(row) {
      this.selectVal = row.name
      this.respHeadFieldDataSource = row.fields
    },
    clickRowRespBody(row) {
      this.selectVal = row.name
      this.respBodyFieldDataSource = row.fields
    },
    validateXml(value) {
      try {
        JSON.parse(value)
      } catch (e) {
        let xmlDoc;
        // code for IE
        if (window.ActiveXObject) {
          xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
          xmlDoc.async = "false";
          xmlDoc.loadXML(value);

          if (xmlDoc.parseError.errorCode != 0) {
            return new Error('1格式不正确')
          }
        }
        // code for Mozilla, Firefox, Opera, chrome, safari,etc.
        else if (document.implementation.createDocument) {
          let parser = new DOMParser();
          xmlDoc = parser.parseFromString(value, "text/xml");
          let error = xmlDoc.getElementsByTagName("parsererror");
          if (error.length > 0) {
            return new Error('2格式不正确')
          }
        } else {
          return new Error('3格式不正确')
        }
      }
    },
    saveInterfaceMeta() {
      let paramsRequest = {
        dataSourceName: 'interface_meta',
        data: [
          {
            source: this.form.xmlReqHeadConstruct,
            meta: this.reqHeadTableDataSource
          },
          {
            source: this.form.xmlReqBodyConstruct,
            meta: this.reqBodyTableDataSource
          },
          {
            source: this.form.xmlRespHeadConstruct,
            meta: this.respHeadTableDataSource
          },
          {
            source: this.form.xmlRespBodyConstruct,
            meta: this.respBodyTableDataSource
          }
        ],
        key: {
          interface_id: this.row.id,
          type: 'request'
        }
      }
      this.loading = true
      saveMeta(paramsRequest).then((res) => {
        if (res.success) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    closeDialog() {
      this.visibleDialog = false
    },
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 0px
}

</style>
