<template>
  <div class="deviceQuery">
    <h3>{{ devCenter[activeNav].title }}</h3>
    <el-divider></el-divider>
    <div class="title">
      请求方式：
      <span class="request">{{ devCenter[activeNav].method }}</span>
    </div>
    <div class="title">
      URL：
      <span>{{ devCenter[activeNav].url }}</span>
    </div>
    <h4>请求参数：</h4>
    <el-table :data="devCenter[activeNav].tableData" style="width: 100%">
      <el-table-column prop="name" label="参数名称"> </el-table-column>
      <el-table-column prop="format" label="格式"> </el-table-column>
      <el-table-column prop="required" label="是否必传"> </el-table-column>
      <el-table-column prop="explain" label="说明"> </el-table-column>
    </el-table>
    <h4>返回参数：</h4>
    <p v-html="devCenter[activeNav].response" v-highlight></p>
  </div>
</template>

<script>
export default {
  props: {
    activeId: {
      type: String,
      required: true,
    },
    devCenter: {
      type: Array,
      required: true,
    },
  },
  name: "deviceQuery",
  data() {
    return {};
  },
  computed: {
    activeNav() {
      return this.activeId * 1;
    },
  },
};
</script>

<style lang='scss' scoped>
::v-deep.deviceQuery {
  padding: 30px;
  text-align: left;

  h3 {
    font-size: 25px;
  }

  h4 {
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .title {
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 18px;

    span {
      font-size: 18px;
    }

    .request {
      color: #45a52f;
    }
  }

  .el-table {
    margin-bottom: 30px;

    .is-leaf {
      background: #fafafa;
    }
  }
}
</style>