<template>
  <div class="apiDoc">
    <div class="desc-panel font-12 text">
      <p>
        <span>接口地址：</span>
        <span>{{data.URL}}</span>
      </p>
      <p>
        <span>返回格式：</span>
        <span>{{data.format}}</span>
      </p>
      <p>
        <span>请求方式：</span>
        <span>{{data.requestMethod}}</span>
      </p>
      <p>
        <span>请求示例：</span>
        <span style="white-space:pre-line; ">{{data.example}}</span>
      </p>
    </div>
    <div class="param-panel">
      <div class="font-12">请求参数说明：</div>
      <div class="param-table">
        <el-table :data="data.paramsData" border>
          <el-table-column
            v-for="(item,idx) of paramsColumn"
            :prop="item.prop"
            :label="item.label"
            :key="idx"
          ></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="result-panel font-12">
      <p class="pb-10">JSON返回示例：</p>
      <el-input class="texta" type="textarea" v-model="resultData" rows="10" cols="80"></el-input>
    </div>
    <div class="param-panel">
      <div class="font-12">返回结果说明：</div>
      <div class="param-table">
        <el-table :data="data.resultDesc" border>
          <el-table-column
                  v-for="(item,idx) of resultColumn"
                  :prop="item.prop"
                  :label="item.label"
                  :key="idx"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "apiDoc",
  props: {
    //data: {},
    paramsColumn: {
      default() {
        return [
          {
            prop: "name",
            label: "名称",
          },
          {
            prop: "type",
            label: "类型",
          },
          {
            prop: "isRequired",
            label: "必填",
          },
          {
            prop: "desc",
            label: "说明",
          },
        ];
      },
    },
    resultColumn: {
      default() {
        return [
          {
            prop: "name",
            label: "名称",
          },
          {
            prop: "type",
            label: "类型",
          },
          {
            prop: "desc",
            label: "说明",
          },
        ];
      },
    },
  },
  data() {
    return {
      resultData:''
    };
  },
  mounted(){
    this.resultData=JSON.stringify(this.data.resultData,null,4);
  }
};
</script>
<style lang="scss" scoped>
.apiDoc {
  padding: 10px;
  white-space: pre-wrap;
  background: #fff;
  .desc-panel {
  }
  .param-panel {
    padding: 20px;
    .param-table {
      padding: 10px 50px;
    }
  }
  .result-panel {
    padding: 10px;
    .texta {
      padding: 0px 50px;
    }
  }
}
</style>
