<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-08-06 09:52:10
 * @LastEditors: 无尘
 * @LastEditTime: 2019-08-06 09:52:10
 -->
<!--
<back-info-show></back-info-show>

import backInfoShow from '@/components/api/back-info-show.vue';
-->
<template>
  <div class="back-info-show border-box">
    <div v-if="apiType==2">
      <el-form
        label-width="120px"
        :model="apiInfoData">
        <el-form-item label="协议:">
          {{ apiInfoData.protocol }}
        </el-form-item>
        <el-form-item label="API版本号:">
          {{ apiInfoData.version }}
        </el-form-item>
        <el-form-item>
          <div
            class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition"
            style="width: 100%; table-layout: fixed;">
            <div class="el-table__header-wrapper">
              <table
                cellspacing="0"
                cellpadding="0"
                border="0"
                class="el-table__header"
                style="width: 100%;">
                <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_4 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-info-table
                  :item-data="apiInfoData.resultParams"
                  is-des="true" />
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>
      <el-form
        label-width="120px"
        :model="apiInfoData">
        <el-form-item label="返回参数:">
          <div
            class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition"
            style="width: 100%; table-layout: fixed;">
            <div class="el-table__header-wrapper">
              <table
                cellspacing="0"
                cellpadding="0"
                border="0"
                class="el-table__header"
                style="width: 100%;">
                <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_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-info-table :item-data="apiInfoData.resultParams" />
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="错误码:">
          <el-table
            :data="apiInfoData.errCode"
            style="width: 100%">
            <el-table-column
              prop="orig_error_code"
              label="原始错误码" />
            <el-table-column
              prop="error_code"
              label="映射错误码" />
            <el-table-column
              prop="error_info"
              label="错误信息"
              show-overflow-tooltip />
          </el-table>
        </el-form-item>
        <el-form-item label="成功返回示例:">
          <div class="common-back-pre">
            <pre>
            {{ apiInfoData.sucReturn }}
          </pre>
          </div>
        </el-form-item>
        <el-form-item label="失败返回示例:">
          <div class="common-back-pre">
            <pre>
            {{ apiInfoData.errReturn }}
          </pre>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import backInfoTable from '@/components/api/back-info-table.vue';
export default {
  name: 'BackInfoShow',
  components: {
    backInfoTable
  },
  props: {
    apiData: {
      type: [ Object, Array ],
      default() {
        return {
          interfaceName: '1',
          interfaceType: 'http',
          requestType: 'GET',
          interfaceDescribe: 'test',
          errCode: [
            {
              errorCode: '1',
              errorInfo: '添加成功'
            }
          ]
        };
      }
    },
    apiType: {
      type: Number,
      default(){
        return 0;
      }
    }
  },
  data() {
    return {
      apiInfoData: {
        interfaceName: '1',
        interfaceType: 'http',
        requestType: 'GET',
        interfaceDescribe: 'test',
        errCode: [
          {
            errorCode: '1',
            errorInfo: '添加成功'
          }
        ],
        resultParams: {
          type: 'object', // object，array,string,number,boolean,
          properties: {
            name: {
              originType: 'query', // 来源类型 query,body,header
              type: 'object',
              isBackendField: 0, // 是否后端字段
              defaultVal: 'val', // 默认值
              isRootKey: 0, // 是否是后端参数字段
              rootKey: '', // 后端参数字段
              objectClass: '', // 如果是object 并且是dubbo
              description: '描述',
              check: true,
              required: [],
              properties: {
                nameId: {
                  originType: 'query', // 来源类型 query,body,header
                  type: 'object',
                  isBackendField: 0, // 是否后端字段
                  defaultVal: 'val', // 默认值
                  isRootKey: 0, // 是否是后端参数字段
                  rootKey: '', // 后端参数字段
                  objectClass: '', // 如果是object 并且是dubbo
                  description: '描述',
                  check: true,
                  properties: {
                    age: {
                      originType: 'query', // 来源类型 query,body,header
                      type: 'string',
                      isBackendField: 0, // 是否后端字段
                      defaultVal: 'val', // 默认值
                      isRootKey: 0, // 是否是后端参数字段
                      rootKey: '', // 后端参数字段
                      objectClass: '', // 如果是object 并且是dubbo
                      description: '描述',
                      check: true
                    },
                    email: {
                      originType: 'query', // 来源类型 query,body,header
                      type: 'string',
                      isBackendField: 0, // 是否后端字段
                      defaultVal: 'val', // 默认值
                      isRootKey: 0, // 是否是后端参数字段
                      rootKey: '', // 后端参数字段
                      objectClass: '', // 如果是object 并且是dubbo
                      description: '描述',
                      check: true
                    }
                  }
                }
              }
            },
            id: {
              originType: '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;
}
.el-form {
  /deep/ .el-form-item__label {
    color: #606266;
  }
  /deep/ .el-form-item__content {
    color: #303133;
  }
}

.el-table {
  /deep/ th {
    padding: 7px 0;
  }
}
.common-back-pre {
  width: 500px;
  height: 94px;
  overflow-y: auto;
  border-radius: 4px;
  border: 1px solid rgba(196, 198, 207, 1);
}
</style>
