<template>
  <div class="document-center">
    <open-doc-header :currentTab="currentTab" @changeTab="changeTab" @searchMenu="searchMenu"></open-doc-header>
    <div class="document-center-body">
      <div class="document-center-body_wrap flex">
        <div class="document-center-left border-box">
          <open-doc-left :currentTab="currentTab" @changeDoc="changeDoc"></open-doc-left>
        </div>
        <div class="document-center-right">
          <open-doc-right ref="docContent" :currentDoc="currentDoc" :currentTab="currentTab" :searchData="searchData"></open-doc-right>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import openDocHeader from '@/components/open-doc-header.vue';
import openDocLeft from '@/components/open-doc-left.vue';
import openDocRight from '@/components/open-doc-right.vue';
export default {
  components: {
    openDocHeader,
    openDocLeft,
    openDocRight
  },
  data() {
    return {
      currentTab: '2',
      currentDoc: '',
      searchData: '' // 搜索数据
    };
  },
  methods: {
    // 头部 tab 切换
    changeTab(tab) {
      const that = this;
      that.currentTab = tab;
    },
    // 搜索文档
    searchMenu(data, type) {
      const that = this;
      that.searchData = data;
      that.$refs.docContent.formData = {};
      that.$refs.docContent.apiData = {};
      that.$refs.docContent.errorCodeData = [];
    },
    // 文档菜单切换
    changeDoc(menuObj) {
      const that = this;
      that.currentDoc = JSON.parse(JSON.stringify(menuObj));
      that.$refs.docContent.searchList = [];
    }
  },
  mounted() {
    const that = this;
    that.currentTab = that.$route.query.currentTab || '2';
  }
};
</script>
<style lang="less" scoped>
.document-center {
  .document-center-body {
    position: relative;
    width: 100%;
    height: calc(100vh - 58px);
    margin-top: 58px;
    .document-center-body_wrap {
      width: 100%;
      height: 100%;
      .document-center-left {
        position: relative;
        width: 300px;
        height: 100%;
        background: #f5f7f9;
        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          width: 0;
          height: 100%;
          border-right: 1px solid #e1e6ef;
        }
      }
      .document-center-right {
        width: calc(100% - 300px);
        height: 100%;
        background: #fff;
        overflow-y: auto;
      }
    }
  }
}
</style>
