<!--
公共api详情
<api-detail :apiData="apiData" v-model=""></api-detail>
import apiDetail from '@/components/openPlatform/api-detail.vue'

components: {
  apiDetail
},

-->
<template>
  <div class="api-detail-wrap">
    <div class="api-detail-h2">
      {{ menuItemData.interfaceName }}（v{{ menuItemData.version }}）
    </div>
    <div class="api-detail-descripe">
      <el-input
        v-model="menuItemData.interfaceDescribe"
        :rows="3"
        disabled
        type="textarea"
        resize="none"
        placeholder="请输入内容"
        @blur="changeValue" />
    </div>
    <div class="api-url m-t-16">
      <div class="api-detail-p">
        请求地址：{{ menuItemData.interfaceUrl }}
      </div>
    </div>
    <div class="api-method m-b-10 m-t-10">
      <div class="api-detail-p">
        请求方法：{{ menuItemData.requestType }}
      </div>
    </div>
    <div class="api-request-param m-t-10">
      <div class="api-detail-h3 m-b-10">
        请求参数：
      </div>
      <div>
        <el-table
          :data="menuItemData.frontParams"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          row-key="currentKey"
          style="width: 100%;margin-bottom: 20px;"
          border
          default-expand-all>
          <el-table-column
            prop="currentKey"
            label="名称" />
          <el-table-column
            prop="type"
            label="类型" />
          <el-table-column
            prop="example"
            label="示例值" />
          <el-table-column
            prop="description"
            label="描述" />
        </el-table>
      </div>
    </div>
    <div class="api-response-param">
      <div class="api-detail-h3 m-b-10 m-t-27">
        响应参数：
      </div>
      <div>
        <el-table
          :data="menuItemData.resultParams"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          row-key="currentKey"
          style="width: 100%;margin-bottom: 20px;"
          border
          default-expand-all>
          <el-table-column
            prop="currentKey"
            label="名称" />
          <el-table-column
            prop="type"
            label="类型" />
          <el-table-column
            prop="example"
            label="示例值" />
          <el-table-column
            prop="description"
            label="描述" />
        </el-table>
      </div>
    </div>
    <div
      v-if="false"
      class="api-request-demo">
      <div class="api-detail-h3 m-b-10 m-t-27">
        请求示例：
      </div>
      <div class="api-demo-text">
        <pre>{{ menuItemData }}</pre>
      </div>
    </div>
    <div class="api-response-success">
      <div class="api-detail-h3 m-b-10 m-t-27">
        成功响应示例：
      </div>
      <div class="api-demo-text">
        <pre>{{ menuItemData.sucReturn }}</pre>
      </div>
    </div>
    <div class="api-response-error">
      <div class="api-detail-h3 m-b-10 m-t-27">
        失败响应示例：
      </div>
      <div class="api-demo-text">
        <pre>{{ menuItemData.errReturn }}</pre>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default() {
        return '';
      }
    },
    apiData: {
      type: [ Object, Array ],
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      menuItemData: this.apiData,
      describeValue: this.value
    };
  },
  mounted() {
    const that = this;
    that.$nextTick(() => {
      that.menuItemData = that.apiData;
      that.describeValue = that.value;
    });
  },
  methods: {
    changeValue(e) {
      const that = this;
      that.$emit('input', that.describeValue);
    }
  },
  watch: {
    value(newData, oldDate) {
      this.describeValue = newData;
    },
    apiData(newData, oldDate) {
      this.menuItemData = newData;
    }
  }
};
</script>
<style lang="less" scoped>
.m-t-27 {
  margin-top: 27px;
}
.m-t-16 {
  margin-top: 16px;
}
.api-detail-wrap {
  .api-detail-h2 {
    height: 55px;
    line-height: 55px;
    font-size: 16px;
    color: #303133;
    font-weight: 600;
  }
  .api-detail-p {
    font-size: 14px;
    line-height: 14px;
    color: #606266;
  }
  .api-detail-h3 {
    font-size: 14px;
    line-height: 14px;
    color: #303133;
    font-weight: 600;
  }
  .api-demo-text {
    height: 142px;
    padding: 10px 12px;
    overflow-y: auto;
    font-size: 14px;
    color: #606266;
    border: 1px solid #dcdfe6;
    pre {
      line-height: 1;
    }
  }
}
</style>
