<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-08-07 18:01:05
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-24 09:17:29
 -->
<!--
<create-backend></create-backend>

import createBackend from '@/components/api/create-backend.vue';
-->
<template>
  <div class="back-info-show border-box">
    <el-form
      ref="backForm"
      label-width="129px"
      :model="apiInfoData"
      :rules="rules">
      <el-form-item
        label="后端服务:"
        prop="interfaceType">
        <el-radio-group
          v-model="apiInfoData.interfaceType"
          @change="changeType">
          <el-radio label="0">
            http
          </el-radio>
          <el-radio label="1">
            dubbo
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="apiInfoData.interfaceType == 0"
        label="请求类型:"
        prop="backendRequestType">
        <el-select
          v-model="apiInfoData.backendRequestType"
          placeholder="请选择">
          <el-option
            label="GET"
            value="GET" />
          <el-option
            label="POST"
            value="POST" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="API版本号"
        prop="version">
        <limit-input
          :input-width="329"
          :input-value.sync="apiInfoData.version"
          :holder="'请输入API版本号'"
          :get-by-type="'word'"
          :max-length="20" />
      </el-form-item>
      <el-form-item
        v-if="apiInfoData.interfaceType == 1"
        label="dubbo接口名称:"
        prop="dubboInterface">
        <limit-input
          :input-width="329"
          :input-value.sync="apiInfoData.dubboInterface"
          :holder="'请输入dubbo接口名称'"
          :get-by-type="'word'"
          :max-length="100" />
      </el-form-item>
      <el-form-item
        v-if="apiInfoData.interfaceType == 1"
        label="dubbo请求方法:"
        prop="dubboMethod">
        <limit-input
          :input-width="329"
          :input-value.sync="apiInfoData.dubboMethod"
          :holder="'请输入dubbo请求方法'"
          :get-by-type="'word'"
          :max-length="20" />
      </el-form-item>
      <el-form-item
        v-if="apiInfoData.interfaceType == 0"
        label="请求路径:"
        prop="backendHttpPath">
        <el-input
          v-model="apiInfoData.backendHttpPath"
          class="w-329" />
      </el-form-item>
      <el-form-item
        :label="apiInfoData.interfaceType == 1 ? '注册中心地址:' : '配置code'"
        prop="proxyCode">
        <el-select
          v-model="apiInfoData.proxyCode"
          placeholder="请选择">
          <el-option
            v-for="item in envSetOptions"
            :key="item.proxyCode"
            :label="item.proxyName"
            :value="item.proxyCode" />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="apiInfoData.interfaceType == 1"
        label="请求版本号"
        prop="dubboVersion">
        <limit-input
          :input-width="329"
          :input-value.sync="apiInfoData.dubboVersion"
          :holder="'请输入请求版本号'"
          :get-by-type="'word'"
          :max-length="20" />
      </el-form-item>
      <el-form-item
        label="超时时长:"
        prop="timeout">
        <el-input-number
          v-model="apiInfoData.timeout"
          controls-position="right"
          :min="1"
          :max="1000000000" />
      </el-form-item>
      <el-form-item
        label="参数配置"
        class="color-303133 font-w-700">
        <div class="back-data-wrap font-0">
          <div
            class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition inline-block vertical-top"
            style="width:30%; table-layout: fixed;">
            <div class="el-table__header-wrapper">
              <table
                cellspacing="0"
                cellpadding="0"
                border="0"
                class="el-table__header"
                style="width: 100%; table-layout: fixed;">
                <thead class="has-gutter">
                  <tr class="">
                    <th
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_1 is-leaf"
                      style="width: 36px;">
                      <div class="cell" />
                    </th>
                    <th
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_1 is-leaf">
                      <div class="cell">
                        参数名
                      </div>
                    </th>
                    <th
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_2 is-leaf">
                      <div class="cell">
                        参数位置
                      </div>
                    </th>
                    <th
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_3 is-leaf">
                      <div class="cell">
                        参数类型
                      </div>
                    </th>
                  </tr>
                </thead>
              </table>
            </div>
            <div class="el-table__body-wrapper is-scrolling-none back-table-left">
              <div class="table-content">
                <back-table-left
                  v-if="backHeaderData.properties && Object.keys(backHeaderData.properties).length"
                  :item-data="frontHeaderData" />
                <back-table-left
                  v-if="backQueryData.properties && Object.keys(backQueryData.properties).length"
                  :item-data="frontQueryData" />
                <back-table-left
                  v-if="backBodyJsonData.properties && Object.keys(backBodyJsonData.properties).length"
                  :item-data="frontBodyJsonData" />
                <back-table-left
                  v-if="backBodyFormData.properties && Object.keys(backBodyFormData.properties).length"
                  :item-data="frontBodyFormData" />
              </div>
            </div>
          </div>
          <div
            class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition inline-block vertical-top"
            style="width: 70%; table-layout: fixed;">
            <div class="el-table__header-wrapper">
              <table
                cellspacing="0"
                cellpadding="0"
                border="0"
                class="el-table__header"
                style="width: 100%; table-layout: fixed;">
                <thead class="has-gutter">
                  <tr class="">
                    <th
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_1 is-leaf"
                      style="width: 36px;">
                      <div class="cell" />
                    </th>
                    <th
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_1 is-leaf">
                      <div class="cell">
                        是否后端参数
                      </div>
                    </th>
                    <th
                      v-if="apiInfoData.interfaceType == '0'"
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_1 is-leaf">
                      <div class="cell">
                        参数名映射
                      </div>
                    </th>
                    <th
                      v-if="apiInfoData.interfaceType == 0"
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_2 is-leaf">
                      <div class="cell">
                        参数位置
                      </div>
                    </th>
                    <th
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_3 is-leaf">
                      <div class="cell">
                        参数类型
                      </div>
                    </th>
                    <th
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_4 is-leaf">
                      <div class="cell">
                        参数值
                      </div>
                    </th>
                    <th
                      v-if="apiInfoData.interfaceType == 1"
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_4 is-leaf">
                      <div class="cell">
                        包路径
                      </div>
                    </th>
                    <th
                      v-if="apiInfoData.interfaceType == 1"
                      colspan="1"
                      rowspan="1"
                      class="el-table_1_column_4 is-leaf">
                      <div class="cell">
                        排序
                      </div>
                    </th>
                  </tr>
                </thead>
              </table>
            </div>
            <div class="el-table__body-wrapper is-scrolling-none">
              <div class="table-content">
                <back-table-right
                  v-if="backHeaderData.properties && Object.keys(backHeaderData.properties).length"
                  :item-data="backHeaderData"
                  :interface-type="apiInfoData.interfaceType" />
                <back-table-right
                  v-if="backQueryData.properties && Object.keys(backQueryData.properties).length"
                  :item-data="backQueryData"
                  :interface-type="apiInfoData.interfaceType" />
                <back-table-right
                  v-if="backBodyJsonData.properties && Object.keys(backBodyJsonData.properties).length"
                  :item-data="backBodyJsonData"
                  :interface-type="apiInfoData.interfaceType"
                  @changeData="changeData" />
                <back-table-right
                  v-if="backBodyFormData.properties && Object.keys(backBodyFormData.properties).length"
                  :item-data="backBodyFormData"
                  :interface-type="apiInfoData.interfaceType" />
              </div>
            </div>
          </div>
        </div>
        <div class="constant-wrap">
          <back-constant
            :item-data="constData"
            :interface-type="apiInfoData.interfaceType" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitback">
          上一步
        </el-button>
        <el-button
          type="primary"
          @click="submitForm('backForm')">
          下一步
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import backTableLeft from '@/components/createApi/back-table-left.vue';
import backTableRight from '@/components/createApi/back-table-right.vue';
import backConstant from '@/components/createApi/back-constant.vue';
// import limitTextarea from '@/components/limit-textarea.vue';
import limitInput from '@/components/limit-input.vue';
import { postRequest } from '@/api/api';
import errMsg from '@/assets/js/error';
import showMsg from '@/assets/js/showmsg';
import { isRepeat } from '@/assets/js/public';
export default {
  name: 'CreateBackend',
  components: {
    // limitTextarea,
    limitInput,
    backTableLeft,
    backConstant,
    backTableRight
  },

  data() {
    let backendPath = (rule, value, callback) => {
      if (value === '' && this.apiInfoData.interfaceType == '0') {
        callback(new Error('请输入请求路径'));
      } else {
        callback();
      }
    };
    let dubboValid = (rule, value, callback) => {
      if (value === '' && this.apiInfoData.interfaceType == '1') {
        callback(new Error('请输入dubbo接口名称'));
      } else {
        callback();
      }
    };
    let dubboValidMethod = (rule, value, callback) => {
      if (value === '' && this.apiInfoData.interfaceType == '1') {
        callback(new Error('请输入dubbo请求方法'));
      } else {
        callback();
      }
    };
    let dubboValidVersion = (rule, value, callback) => {
      if (value === '' && this.apiInfoData.interfaceType == '1') {
        callback(new Error('请输入请求版本号'));
      } else {
        callback();
      }
    };
    let proxyCodeValid = (rule, value, callback) => {
      if (value === '' && this.apiInfoData.interfaceType == '1') {
        callback(new Error('请选择注册中心地址'));
      } else {
        callback();
      }
    };
    return {
      apiInfoData: {
        interfaceType: '0', // 后端服务
        version: '', // api 版本号
        backendRequestType: 'GET',
        backendHttpPath: '', // 请求路径
        dubboInterface: '', // dubbo接口名称
        dubboMethod: '', // dubbo请求方法
        dubboVersion: '', // dubbo 请求版本号
        proxyCode: '', // 注册中心
        timeout: 20000 // 超时
      },
      // 前端 header 对应后端数据
      backHeaderData: {},
      // 前端 query 对应后端数据
      backQueryData: {},
      // 前端 body json 对应后端数据
      backBodyJsonData: {},
      // 前端 body form 对应后端数据
      backBodyFormData: {},
      rules: {
        version: [ { required: true, message: '请输入API版本号', trigger: 'blur' } ],
        backendRequestType: [ { required: true, message: '请选择请求类型', trigger: 'blur' } ],
        backendHttpPath: [ { required: true, validator: backendPath, trigger: 'blur' } ],
        timeout: [ { required: true, message: '请输入超时时长', trigger: 'blur' } ],
        dubboInterface: [ { required: true, validator: dubboValid, trigger: 'blur' } ],
        dubboMethod: [ { required: true, validator: dubboValidMethod, trigger: 'blur' } ],
        dubboVersion: [ { required: true, validator: dubboValidVersion, trigger: 'blur' } ],
        proxyCode: [ { required: true, validator: proxyCodeValid, trigger: 'blur' } ]
      },
      // 环境配置中的
      envSetOptions: [],

      // 常量数据
      constData: {
        type: 'object',
        level: 1,
        properties: {}
      }
    };
  },
  mounted() {
    const that = this;
    that.getEnvSetData();
    that.handleFrontData();
    if (Object.keys(that.$store.state.backInfo).length) {
      that.$nextTick(()=>{
        that.handleStoreData();
      });

    }
  },
  methods: {
    /**
     * @description: 改变 interfaceType
     * @param {String} e
     * @author: 无尘
     */
    changeType(e) {
      const that = this;
      that.copyObj = JSON.parse(JSON.stringify(that.apiInfoData));
      that.getEnvSetData();
      that.$nextTick(() => {
        that.$refs.backForm.resetFields();
        that.apiInfoData = {
          interfaceType: e, // 后端服务
          version: that.copyObj.version, // api 版本号
          backendRequestType: that.copyObj.backendRequestType,
          backendHttpPath: that.copyObj.backendHttpPath, // 请求路径
          dubboInterface: that.copyObj.dubboInterface, // dubbo接口名称
          dubboMethod: that.copyObj.dubboMethod, // dubbo请求方法
          dubboVersion: that.copyObj.dubboVersion, // dubbo 请求版本号
          proxyCode: '', // that.copyObj.proxyCode, // 注册中心
          timeout: that.copyObj.timeout // 超时
        };
      });
    },

    /**
     * @description: 触发父组件
     * @param {Object} data
     * @param {Boolean} isRootKey
     * @author: 无尘
     */
    async changeData(data, isRootKey) {
      const that = this;
      // console.log('顶级父组件:', data, isRootKey);
      // 如果是对象，查看子级有没有选中的字段
      let trueFlag = true;
      if (!isRootKey && data.type == 'object' && Object.keys(data.properties).length) {
        trueFlag = await that.handleDisable(data.properties);
      }
      if (!isRootKey && data.type == 'array' && Object.keys(data.items.properties).length) {
        trueFlag = await that.handleDisable(data.items.properties);
      }
      // console.log('trueFlag:', trueFlag);
      if (trueFlag == false) {
        data.isRootKeyFlag = true;
      } else {
        data.isRootKeyFlag = isRootKey ? true : false;
      }
    },
    async handleDisable(obj) {
      const that = this;
      let tag = true;
      for (let k in obj) {
        if (obj[k].isRootKey) {
          tag = false;
          break;
        }
        if (obj[k].type == 'object' && Object.keys(obj[k].properties).length) {
          tag = await that.handleDisable(obj[k].properties);
          // break;
        }
        if (tag == false) {
          break;
        }
        if (obj[k].type == 'array' && Object.keys(obj[k].items.properties).length) {
          tag = await that.handleDisable(obj[k].items.properties);
        }
        if (tag == false) {
          break;
        }
      }
      // console.log('return:tag:', tag);
      return tag;
    },

    /**
     * @description: 上一步
     * @author: 无尘
     */
    submitback() {
      const that = this;
      that.$emit('submitBack');
    },
    /**
     * @description: 下一步
     * @param {String} formName
     * @author: 无尘
     */
    submitForm(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.handlebackData();
        } else {
          return false;
        }
      });
    },
    async handleChildEmpty(obj) {
      const that = this;
      let tag = true;
      for (let k in obj) {
        if (!obj[k].objectClass) {
          tag = false;
          break;
        }
        if (obj[k].type == 'object' && Object.keys(obj[k].properties).length) {
          tag = await that.handleChildEmpty(obj[k].properties);
        }
        if (tag == false) {
          break;
        }
        if (obj[k].type == 'array' && Object.keys(obj[k].items.properties).length) {
          tag = await that.handleChildEmpty(obj[k].items.properties);
        }
        if (tag == false) {
          break;
        }
      }
      return tag;
    },
    async handleEmpty(obj) {
      const that = this;
      let tag = true;
      /* eslint-disable */
      for (let k in obj) {
        if (obj[k].isRootKey && (!obj[k].objectClass || !(await that.isNumber(obj[k].sort)))) {
          tag = false;
          break;
        }
        // 判断对象一级是否勾选
        if (obj[k].isRootKey && obj[k].type == 'object' && Object.keys(obj[k].properties).length) {
          tag = await that.handleChildEmpty(obj[k].properties);
        }
        if (tag == false) {
          break;
        }
        if (!obj[k].isRootKey && obj[k].type == 'object' && Object.keys(obj[k].properties).length) {
          tag = await that.handleEmpty(obj[k].properties);
        }
        if (tag == false) {
          break;
        }
        // 判断数组一级是否勾选
        if (obj[k].isRootKey && obj[k].type == 'array' && Object.keys(obj[k].items.properties).length) {
          tag = await that.handleChildEmpty(obj[k].items.properties);
        }
        if (tag == false) {
          break;
        }
        if (!obj[k].isRootKey && obj[k].type == 'array' && Object.keys(obj[k].items.properties).length) {
          tag = await that.handleEmpty(obj[k].items.properties);
        }
        if (tag == false) {
          break;
        }
      }
      return tag;
    },
    isNumber(val) {
      const reg = /^\d*$/; // ( '' == 0 )
      return val == '' && val !== 0 ? false : reg.test(val);
    },
    /**
     * @description: 处理保存数据
     * @returns {Boolean}
     * @author: 无尘
     */
    async handlebackData() {
      const that = this;
      const paramKeys = [...Object.keys(that.constData.properties)];
      let returnFlag = await isRepeat(paramKeys);
      if (returnFlag) {
        showMsg.showmsg('参数名重复', 'warning');
        return false;
      }
      /* eslint-disable */
      let flag = true;
      if (that.apiInfoData.interfaceType == 1 && Object.keys(that.backHeaderData).length && Object.keys(that.backHeaderData.properties).length) {
        for (let key in that.backHeaderData.properties) {
          if (that.backHeaderData.properties[key].isRootKey && (!that.backHeaderData.properties[key].objectClass || !(await that.isNumber(that.backHeaderData.properties[key].sort)))) {
            flag = false;
            break;
          }
        }
      }
      if (!flag) {
        showMsg.showmsg('请完善header中的包路径或排序', 'warning');
        return false;
      }
      if (that.apiInfoData.interfaceType == 1 && Object.keys(that.backQueryData).length && Object.keys(that.backQueryData.properties).length) {
        for (let key in that.backQueryData.properties) {
          if (that.backQueryData.properties[key].isRootKey && (!that.backQueryData.properties[key].objectClass || !(await that.isNumber(that.backQueryData.properties[key].sort)))) {
            flag = false;
            break;
          }
          if (that.backQueryData.properties[key].isRootKey && !(/^\d*$/.test(that.backQueryData.properties[key].sort))) {
            flag = false;
            break;
          }
        }
      }
      if (!flag) {
        showMsg.showmsg('请完善query中的包路径或排序', 'warning');
        return false;
      }
      if (that.apiInfoData.interfaceType == 1 && Object.keys(that.backBodyFormData).length && Object.keys(that.backBodyFormData.properties).length) {
        for (let key in that.backBodyFormData.properties) {
          if (that.backBodyFormData.properties[key].isRootKey && (!that.backBodyFormData.properties[key].objectClass || !(await that.isNumber(that.backBodyFormData.properties[key].sort)))) {
            flag = false;
            break;
          }
        }
      }
      if (!flag) {
        showMsg.showmsg('请完善bodyForm中的包路径或排序', 'warning');
        return false;
      }
      if (that.apiInfoData.interfaceType == 1 && Object.keys(that.backBodyJsonData).length && Object.keys(that.backBodyJsonData.properties).length) {
        for (let key in that.backBodyJsonData.properties) {
          // 顶级勾选
          if (that.backBodyJsonData.properties[key].isRootKey && (!that.backBodyJsonData.properties[key].objectClass || !(await that.isNumber(that.backBodyJsonData.properties[key].sort)))) {
            flag = false;
            break;
          }
          if (that.backBodyJsonData.properties[key].isRootKey && Object.keys(that.backBodyJsonData.properties[key].properties).length) {
            // bodyRoot 只有对象出现
            flag = await that.handleChildEmpty(that.backBodyJsonData.properties[key].properties);
          }
          // 判断子级
          if (!that.backBodyJsonData.properties[key].isRootKey && Object.keys(that.backBodyJsonData.properties[key].properties).length) {
            // bodyRoot 只有对象出现
            flag = await that.handleEmpty(that.backBodyJsonData.properties[key].properties);
          }
        }
      }
      if (!flag) {
        showMsg.showmsg('请完善bodyRoot中的包路径或排序', 'warning');
        return false;
      }
      let constTag = true;
      if (that.apiInfoData.interfaceType == 1 && Object.keys(that.constData.properties).length) {
        for (let key in that.constData.properties) {
          const reg = /^\d*$/;
          if (!that.constData.properties[key].objectClass|| !reg.test(that.constData.properties[key].sort) ) {
            constTag = false;
          }
        }
      }
      if (!constTag) {
        showMsg.showmsg('请完善常量参数中的包路径或排序', 'warning');
        return false;
      }
      that.apiInfoData.backHeaderData = that.backHeaderData;
      that.apiInfoData.backQueryData = that.backQueryData;
      that.apiInfoData.backBodyJsonData = that.backBodyJsonData;
      that.apiInfoData.backBodyFormData = that.backBodyFormData;
      that.apiInfoData.constData = that.constData;
      that.$emit('submitNext', that.apiInfoData);
      that.$store.dispatch('saveBackInfo', that.apiInfoData);
      that.$store.dispatch('clearTempBackData');
    },
    /**
     * @description: 获取环境配置
     * @returns {Boolean}
     * @author: 无尘
     */
    getEnvSetData() {
      const that = this;
      let para = {
        search: that.searchValue,
        pageNum: that.currentPage,
        pageSize: 100,
        proxyType: that.apiInfoData.interfaceType || '0'
      };
      postRequest('/gateway-manage/page-proxy', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            that.envSetOptions = resData.result.result || [];
            that.totalCount = resData.result.totalCount;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * @description: 处理前端数据映射后端数据
     * @returns {Boolean}
     * @author: 无尘
     */
    async handleFrontData() {
      const that = this;
      let frontInfo = JSON.parse(JSON.stringify(that.$store.state.frontInfo));
      // 后端请求类型修改20190929，前后端默认对应
      that.apiInfoData.backendRequestType = frontInfo.requestType;
      // console.log('header 数据:', frontInfo);
      // header 数据
      if (Object.keys(frontInfo.headerData).length) {
        for (let key in frontInfo.headerData.properties) {
          frontInfo.headerData.properties[key]['isRootKey'] = frontInfo.headerData.properties[key]['isRootKey'] !== '' ? frontInfo.headerData.properties[key]['isRootKey'] :true; // 是否是后端参数字段
          frontInfo.headerData.properties[key]['rootKey'] = frontInfo.headerData.properties[key]['rootKey'] ? frontInfo.headerData.properties[key]['rootKey'] : key; // 后端参数字段
          frontInfo.headerData.properties[key]['backendOriginType'] = frontInfo.headerData.properties[key]['backendOriginType'];
          frontInfo.headerData.properties[key]['isBackendField'] = 1; // 是否后端字段
          // frontInfo.headerData.properties[key]['objectClass'] = ''; // dubbo 包路径
          // frontInfo.headerData.properties[key]['sort'] = 0;
        }
        that.backHeaderData = JSON.parse(JSON.stringify(frontInfo.headerData));
        that.frontHeaderData = JSON.parse(JSON.stringify(frontInfo.headerData));
      }
      // query 数据
      if (Object.keys(frontInfo.queryData).length) {
        for (let key in frontInfo.queryData.properties) {
          frontInfo.queryData.properties[key]['isRootKey'] = frontInfo.queryData.properties[key]['isRootKey'] !== '' ? frontInfo.queryData.properties[key]['isRootKey'] : true; // 是否是后端参数字段
          frontInfo.queryData.properties[key]['rootKey'] = frontInfo.queryData.properties[key]['rootKey'] ? frontInfo.queryData.properties[key]['rootKey'] : key; // 后端参数字段
          frontInfo.queryData.properties[key]['backendOriginType'] = frontInfo.queryData.properties[key]['backendOriginType'];
          frontInfo.queryData.properties[key]['isBackendField'] = 1; // 是否后端字段
          // frontInfo.queryData.properties[key]['objectClass'] = ''; // dubbo 包路径
          // frontInfo.queryData.properties[key]['sort'] = 0;
        }
        that.backQueryData = JSON.parse(JSON.stringify(frontInfo.queryData));
        that.frontQueryData = JSON.parse(JSON.stringify(frontInfo.queryData));
      }
      // body form 数据
      if (Object.keys(frontInfo.bodyFormData).length) {
        for (let key in frontInfo.bodyFormData.properties) {
          frontInfo.bodyFormData.properties[key]['isRootKey'] = frontInfo.bodyFormData.properties[key]['isRootKey'] !== '' ? frontInfo.bodyFormData.properties[key]['isRootKey'] :  true; // 是否是后端参数字段
          frontInfo.bodyFormData.properties[key]['rootKey'] = frontInfo.bodyFormData.properties[key]['rootKey'] ? frontInfo.bodyFormData.properties[key]['rootKey'] : key; // 后端参数字段
          frontInfo.bodyFormData.properties[key]['backendOriginType'] = frontInfo.bodyFormData.properties[key]['backendOriginType'];
          frontInfo.bodyFormData.properties[key]['isBackendField'] = 1; // 是否后端字段
          // frontInfo.bodyFormData.properties[key]['objectClass'] = ''; // dubbo 包路径
          // frontInfo.bodyFormData.properties[key]['sort'] = 0;
        }
        that.backBodyFormData = JSON.parse(JSON.stringify(frontInfo.bodyFormData));
        that.frontBodyFormData = JSON.parse(JSON.stringify(frontInfo.bodyFormData));
      }
      // body json 数据
      if (Object.keys(frontInfo.bodyJsonData).length) {
        for (let key in frontInfo.bodyJsonData.properties) {
          frontInfo.bodyJsonData.properties[key]['isRootKey'] = frontInfo.bodyJsonData.properties[key]['isRootKey'] !== ''? frontInfo.bodyJsonData.properties[key]['isRootKey'] : true; // 是否是后端参数字段
          frontInfo.bodyJsonData.properties[key]['rootKey'] = frontInfo.bodyJsonData.properties[key]['rootKey'] ? frontInfo.bodyJsonData.properties[key]['rootKey'] : key; // 后端参数字段
          frontInfo.bodyJsonData.properties[key]['backendOriginType'] = frontInfo.bodyJsonData.properties[key]['backendOriginType'];
          frontInfo.bodyJsonData.properties[key]['isBackendField'] = 1; // 是否后端字段
          // frontInfo.bodyJsonData.properties[key]['objectClass'] = ''; // dubbo 包路径
          // frontInfo.bodyJsonData.properties[key]['sort'] = 0;
          // 如果有数组出现
          if(frontInfo.bodyJsonData.properties[key].type == 'array' && Object.keys(frontInfo.bodyJsonData.properties[key].items.properties).length) {
            await that.handleArrObjData(frontInfo.bodyJsonData.properties[key].items.properties)
          }
          // 如果有对象出现
          if(frontInfo.bodyJsonData.properties[key].type == 'object' && Object.keys(frontInfo.bodyJsonData.properties[key].properties).length) {
            await that.handleArrObjData(frontInfo.bodyJsonData.properties[key].properties)
          }
        }
        that.backBodyJsonData = JSON.parse(JSON.stringify(frontInfo.bodyJsonData));
        that.frontBodyJsonData = JSON.parse(JSON.stringify(frontInfo.bodyJsonData));
        // console.log(that.backBodyFormData, that.backBodyJsonData)
      }
      if (that.apiInfoData.interfaceType == 1) {
        that.getEnvSetData();
      }
      // 判断 dubbo 导入，修改请求,修改参数
      if (frontInfo.hasOwnProperty('dubboImport') && frontInfo.dubboImport == 1 ) {
        that.apiInfoData.proxyCode = '';
        that.apiInfoData.interfaceType = '1';
        that.getEnvSetData();
      }
      that.$forceUpdate();
    },
    async handleArrObjData(item) {
      const that = this;
      for (let childKey in item) {
        item[childKey]['isRootKey'] = item[childKey]['isRootKey'] !== ''? item[childKey]['isRootKey'] : true; // 是否是后端参数字段
        item[childKey]['isRootKeyFlag'] = item[childKey]['isRootKeyFlag'] !== '' ? item[childKey]['isRootKeyFlag']:true; // 是否是后端参数字段
        item[childKey]['rootKey'] = item[childKey]['rootKey'] ? item[childKey]['rootKey'] : childKey;
        item[childKey]['isBackendField'] = 1; // 是否后端字段
        if(item[childKey].type == 'array' && Object.keys(item[childKey].items.properties).length){
          item[childKey]['isRootKeyFlag'] = item[childKey]['isRootKeyFlag'] !== '' ? item[childKey]['isRootKeyFlag']:true;
          await that.handleArrObjData(item[childKey].items.properties);
        }
        if(item[childKey].type == 'object' && Object.keys(item[childKey].properties).length) {
          item[childKey]['isRootKeyFlag'] = item[childKey]['isRootKeyFlag'] !== '' ? item[childKey]['isRootKeyFlag']:true;
          await that.handleArrObjData(item[childKey].properties);
        }
      }
      return item;
    },
    handleStoreData() {
      const that = this;
      that.apiInfoData = JSON.parse(JSON.stringify(that.$store.state.backInfo));
      let frontInfo = JSON.parse(JSON.stringify(that.$store.state.frontInfo));
      // 后端请求类型修改20190929，前后端默认对应 20210323疑问
      that.apiInfoData.backendRequestType = frontInfo.requestType;
      that.constData = that.apiInfoData.constData;
      if (!that.apiInfoData.constData) {
        that.constData =  {
          type: 'object',
          level: 1,
          properties: {}
        }
      }
      // console.log(that.apiInfoData.interfaceType)
      // 为了选择 dubbo 重新获取注册中心地址
      if (that.apiInfoData.interfaceType == 1) {
        that.getEnvSetData();
      }
    }
  }
};
</script>
<style lang="less" scoped>
.w-320 {
  width: 320px;
}
.m-t-14 {
  margin-top: 14px;
}
.w-329 {
  width: 329px;
}
.vertical-top {
  vertical-align: top;
}
.back-info-show {
  width: 100%;
  margin-top: 56px;
  .el-form {
    /deep/ .el-form-item__label {
      color: #606266;
    }
    /deep/ .el-form-item__content {
      color: #303133;
    }
  }
  .el-table th {
    padding: 7px 0;
  }
  .constant-wrap {
    margin-top: 30px;
  }
  .back-data-wrap {
    width: 100%;
  }
  .el-table .cell {
    text-overflow: hidden;
  }
}
</style>
