<!--
公共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 disabled type="textarea" resize="none" :rows="3" placeholder="请输入内容" v-model="menuItemData.interfaceDescribe" @blur="changeValue"> </el-input>
    </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" row-key="currentKey" style="width: 100%;margin-bottom: 20px;" border default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
          <el-table-column prop="currentKey" label="名称"> </el-table-column>
          <el-table-column prop="type" label="类型"> </el-table-column>
          <el-table-column prop="example" label="示例值"> </el-table-column>
          <el-table-column prop="description" label="描述"> </el-table-column>
        </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" row-key="currentKey" style="width: 100%;margin-bottom: 20px;" border default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
          <el-table-column prop="currentKey" label="名称"> </el-table-column>
          <el-table-column prop="type" label="类型"> </el-table-column>
          <el-table-column prop="example" label="示例值"> </el-table-column>
          <el-table-column prop="description" label="描述"> </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="api-request-demo" v-if="false">
      <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
    };
  },
  methods: {
    changeValue(e) {
      const that = this;
      that.$emit('input', that.describeValue);
    }
  },
  watch: {
    value(newData, oldDate) {
      this.describeValue = newData;
      /* eslint-disable */
      console.log(this.apiData, this.value, newData);
    },
    apiData(newData, oldDate) {
      this.menuItemData = newData;
      /* eslint-disable */
      console.log(this.apiData, this.menuItemData, newData);
    }
  },
  mounted() {
    const that = this;
    that.$nextTick(() => {
      that.menuItemData = that.apiData;
      that.describeValue = that.value;
      /* eslint-disable */
      console.log(that.apiData, that.value);
    });
  }
};
</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>
