<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-08-06 09:51:52
 * @LastEditors: 无尘
 * @LastEditTime: 2020-10-16 17:11:46
 -->
<!--
<backend-info-show :apiData=""></backend-info-show>

import backendInfoShow from '@/components/api/backend-info-show.vue';
-->
<template>
  <div class="backend-info-show border-box">
    <el-form
      label-width="120px"
      :model="apiInfoData">
      <el-form-item label="后端服务:">
        {{ apiInfoData.interfaceType == 0 ? 'http' : 'dubbo' }}
      </el-form-item>
      <el-form-item label="环境:">
        {{ apiInfoData.protocol }}
      </el-form-item>
      <el-form-item label="API版本号:">
        {{ apiInfoData.version }}
      </el-form-item>
      <el-form-item
        v-if="apiInfoData.interfaceType == 0"
        label="请求路径:">
        {{ apiInfoData.backendHttpPath }}
      </el-form-item>
      <el-form-item
        v-if="apiInfoData.interfaceType == 1"
        label="dubbo接口名称:">
        {{ apiInfoData.dubboInterface }}
      </el-form-item>
      <el-form-item
        v-if="apiInfoData.interfaceType == 1"
        label="dubbo请求方法:">
        {{ apiInfoData.dubboMethod }}
      </el-form-item>
      <el-form-item
        v-if="apiInfoData.interfaceType == 1"
        label="注册中心地址:">
        {{ apiInfoData.proxyName }}
      </el-form-item>
      <el-form-item
        v-if="apiInfoData.interfaceType == 1"
        label="请求版本号:">
        {{ apiInfoData.dubboVersion }}
      </el-form-item>
      <el-form-item label="超时时长:">
        {{ apiInfoData.timeout }}
      </el-form-item>
      <el-form-item label="参数映射:">
        <div class="table-wrap-body 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">
              <div class="table-content">
                <back-table-tr :item-data="apiInfoData.endParams" />
              </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
                      v-if="apiInfoData.interfaceType == 0"
                      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
                      v-if="apiInfoData.interfaceType == 1"
                      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>
                  </tr>
                </thead>
              </table>
            </div>
            <div class="el-table__body-wrapper is-scrolling-none">
              <div class="table-content">
                <back-table-right
                  :interface-type="apiInfoData.interfaceType"
                  :item-data="apiInfoData.endParams" />
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="常量参数:">
        <back-const-table
          :item-data="apiInfoData.endParams"
          :interface-type="apiInfoData.interfaceType" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import backTableTr from '@/components/api/back-table-tr.vue';
import backTableRight from '@/components/api/back-table-right.vue';
import backConstTable from '@/components/api/back-const-table.vue';
export default {
  name: 'BackendInfoShow',
  components: {
    backTableTr,
    backTableRight,
    backConstTable
  },
  props: {
    apiData: {
      type: [ Object, Array ],
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      apiInfoData: {
        protocol: 'http',
        interfaceUrl: '/',
        requestType: 'post',
        endParams: {
          type: 'object', // object，array,string,number,boolean,
          properties: {
            name: {
              backendOriginType: 'query', // 来源类型 query,body,header
              type: 'object',
              isBackendField: 0, // 是否后端字段
              defaultVal: 'val', // 默认值
              isRootKey: 0, // 是否是后端参数字段
              rootKey: '', // 后端参数字段
              objectClass: '', // 如果是object 并且是dubbo
              description: '描述',
              check: true,
              required: [],
              properties: {
                nameId: {
                  backendOriginType: 'query', // 来源类型 query,body,header
                  type: 'object',
                  isBackendField: 0, // 是否后端字段
                  defaultVal: 'val', // 默认值
                  isRootKey: 0, // 是否是后端参数字段
                  rootKey: '', // 后端参数字段
                  objectClass: '', // 如果是object 并且是dubbo
                  description: '描述',
                  check: true,
                  properties: {
                    age: {
                      backendOriginType: 'query', // 来源类型 query,body,header
                      type: 'string',
                      isBackendField: 0, // 是否后端字段
                      defaultVal: 'val', // 默认值
                      isRootKey: 0, // 是否是后端参数字段
                      rootKey: '', // 后端参数字段
                      objectClass: '', // 如果是object 并且是dubbo
                      description: '描述',
                      check: true
                    }
                  }
                }
              }
            }
          },
          required: []
        }
      }
    };
  },
  mounted() {
    const that = this;
    that.apiInfoData = that.apiData;
  },

  watch: {
    apiData: function(newData, oldData) {
      const that = this;
      that.apiInfoData = newData;
    }
  }
};
</script>
<style lang="less" scoped>
.w-320 {
  width: 320px;
}
.m-t-14 {
  margin-top: 14px;
}
.vertical-top {
  vertical-align: top;
}
.table-wrap-body .el-table th {
  width: 100%;
  padding: 7px 0;
}
.table-content {
  font-size: 14px;
}
</style>
