<!--
 * @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">
    <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>
</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: '添加成功'
            }
          ]
        };
      }
    }
  },
  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>
