<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-09-11 16:21:11
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-24 15:59:55
 -->
<template>
  <div class="document-center">
    <open-doc-header
      :current-tab="currentTab"
      @changeTab="changeTab"
      @searchMenu="searchMenu" />
    <div class="document-center-body">
      <div class="document-center-body_wrap flex">
        <div class="document-center-left border-box">
          <open-doc-left
            :current-tab="currentTab"
            @changeDoc="changeDoc" />
        </div>
        <div class="document-center-right">
          <open-doc-right
            ref="docContent"
            :current-doc="currentDoc"
            :current-tab="currentTab"
            :search-data="searchData" />
        </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: '' // 搜索数据
    };
  },
  mounted() {
    const that = this;
    that.currentTab = that.$route.query.currentTab || '2';
  },
  methods: {
    /**
     * @description: 头部 tab 切换
     * @param {String} tab
     * @author: 无尘
     */
    changeTab(tab) {
      const that = this;
      that.currentTab = tab;
      that.$router.replace({ path: `/document?currentTab=${tab}` });
    },
    /**
     * @description: 搜索文档
     * @param {String} data
     * @param {String} type
     * @author: 无尘
     */
    searchMenu(data, type) {
      const that = this;
      that.searchData = data;
      that.$refs.docContent.formData = {};
      that.$refs.docContent.apiData = {};
      that.$refs.docContent.errorCodeData = [];
    },
    /**
     * @description: 文档菜单切换
     * @param {Object} menuObj
     * @author: 无尘
     */
    changeDoc(menuObj) {
      const that = this;
      that.currentDoc = JSON.parse(JSON.stringify(menuObj));
      that.$refs.docContent.searchList = [];
    }
  },
};
</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>
