<!--
<frontend-info-show></frontend-info-show>

import frontInfoShow from '@/components/api/frontend-info-show.vue';
-->
<template>
  <div class="frontend-info-show border-box">
    <el-form label-width="120px" :model="apiInfoData">
      <el-form-item label="协议:">
        {{ apiInfoData.protocol }}
      </el-form-item>
      <el-form-item label="请求路径:">
        {{ apiInfoData.interfaceUrl }}
      </el-form-item>
      <el-form-item label="请求方法:">
        {{ apiInfoData.requestType }}
      </el-form-item>
      <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"></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_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>
                  <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_5 is-leaf">
                    <div class="cell">描述</div>
                  </th>
                </tr>
              </thead>
            </table>
          </div>
          <div class="el-table__body-wrapper is-scrolling-none">
            <div class="table-content">
              <table-tr :itemData="apiInfoData.frontParams.properties"></table-tr>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import tableTr from '@/components/api/table-tr.vue';
export default {
  name: 'frontend-info-show',
  components: {
    tableTr
  },
  props: {
    apiData: {
      type: [Object, Array],
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      apiInfoData: {
        protocol: 'http',
        interfaceUrl: '/',
        requestType: 'post',
        frontParams: {
          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: {}
            }
          },
          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;
}
.el-table th {
  padding: 7px 0;
}
</style>
