<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-08-06 09:51:52
 * @LastEditors: 无尘
 * @LastEditTime: 2019-10-28 16:41:34
 -->
<!--
<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"></div>
                    </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 :itemData="apiInfoData.endParams"></back-table-tr>
              </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"></div>
                    </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 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 :interfaceType="apiInfoData.interfaceType" :itemData="apiInfoData.endParams"></back-table-right>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="常量参数:">
        <back-const-table :itemData="apiInfoData.endParams" :interfaceType="apiInfoData.interfaceType"></back-const-table>
      </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: 'backend-info-show',
  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: []
        }
      }
    };
  },

  watch: {
    apiData: function(newData, oldData) {
      const that = this;
      that.apiInfoData = newData;
    }
  },
  mounted() {
    const that = this;
    that.apiInfoData = that.apiData;
  }
};
</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>
