<!--
<open-doc-right ref="docContent" :currentDoc="currentDoc" :currentTab="currentTab" :searchData="searchData"></open-doc-right>
import openDocRight from '@/components/open-doc-right.vue';
-->

<template>
  <div class="document-right">
    <div class="document-right-body border-box">
      <!-- 搜索结果 -->
      <div class="search-contain" v-if="searchFlag">
        <h2>搜索结果({{ totalCount }})</h2>
        <div class="search-list" v-if="searchList.length">
          <ul>
            <li class="search-list-cell border-box" v-for="(item, index) in searchList" :key="index + 'search'" @click="toDocMenuDetail(item)">
              {{ item.menuName }}
            </li>
          </ul>
          <div v-if="totalCount > searchList.length" class="load-more-data" @click="loadMoreData">加载更多</div>
        </div>
        <div v-if="!searchList.length" class="no-search-data">
          什么都没找到。
        </div>
      </div>
      <div v-if="!searchFlag">
        <!-- 内容 -->
        <div class="article-contain" v-if="formData.content">
          <!-- <div class="markdown-content" v-html="formData.content"></div> -->
          <markdown-content :markdownData="formData"></markdown-content>
        </div>
        <!-- api -->
        <api-detail v-if="Object.keys(apiData).length" :apiData="apiData"></api-detail>
        <!-- 错误码 -->
        <error-code-table v-if="errorCodeData.length" :errorCodeData="errorCodeData"></error-code-table>
      </div>
    </div>
    <open-doc-footer></open-doc-footer>
  </div>
</template>
<script>
import openDocFooter from '@/components/open-doc-footer.vue';
import errorCodeTable from '@/components/error-code-table.vue';
import apiDetail from '@/components/api-detail.vue';
import markdownContent from '@/components/markdown-content.vue';
import { getArtical, getApi, getErrorCode, getSearchDoc } from '@/api/document';
import errMsg from '@/assets/js/error';
import { processObject } from '@/assets/js/public';
import marked from 'marked';
export default {
  props: {
    currentDoc: {
      type: [Object, Array],
      default() {
        return {};
      }
    },
    currentTab: {
      type: [String, Number],
      default() {
        return '2';
      }
    },
    searchData: {
      type: String,
      default() {
        return '';
      }
    }
  },
  components: {
    openDocFooter,
    errorCodeTable,
    apiDetail,
    markdownContent
  },
  data() {
    return {
      menuDetailData: {}, // 菜单数据
      formData: {}, // 内容
      errorCodeData: [], // 错误码
      apiData: {}, // api
      searchList: [], // 搜索结果
      searchFlag: false,
      pageNumber: 1,
      pageSize: 20,
      totalCount: 0
    };
  },
  methods: {
    /**
     * 跳转
     */
    toDocMenuDetail(item) {
      const that = this;
      window.open(`#/document?currentTab=${that.currentTab}&menuId=${item.menuId}`);
    },
    /**
     * 加载更多
     */
    loadMoreData() {
      const that = this;
      if (that.searchList.length == that.totalCount) {
        return false;
      }
      that.pageNumber++;
      that.getSearchData();
    },
    /**
     * 获取搜索数据
     */
    getSearchData() {
      const that = this;
      let para = {
        parentId: that.currentTab,
        search: that.searchData,
        pageNumber: that.pageNumber,
        pageSize: that.pageSize
      };
      getSearchDoc(para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            if (!!resData.result.result && resData.result.result.length) {
              resData.result.result.forEach(ele => {
                that.searchList.push(ele);
              });
            }
            that.totalCount = resData.result.totalCount;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取错误码数据
     */
    getErrorCodeData() {
      const that = this;
      let para = {};
      getErrorCode(para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            that.errorCodeData = resData.result;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取api详情
     */
    getApiDetailData(interfaceId) {
      const that = this;
      let para = {
        interfaceId: interfaceId
      };
      getApi(para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            let data = resData.result;
            data.frontParams = JSON.parse(data.frontParams);
            data.frontParams = processObject(data.frontParams);
            data.resultParams = JSON.parse(data.resultParams);
            data.resultParams = processObject(data.resultParams);
            that.formData.memo = data.interfaceDescribe;
            that.apiData = JSON.parse(JSON.stringify(data));
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     *  获取内容详情
     */
    getData(articleId) {
      const that = this;
      let para = {
        articleId: articleId
      };
      getArtical(para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            resData.result.content = marked(resData.result.content);
            that.formData = resData.result || {};
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 处理菜单数据，根据关联类型判断调用哪些接口
     */
    handleMenuData() {
      const that = this;
      const type = that.menuDetailData.relationType;
      const subType = that.menuDetailData.subType;
      if (!Object.keys(that.menuDetailData).length) {
        that.formData = {};
        that.apiData = {};
        that.errorCodeData = [];
      } else if (type == 0) {
        that.formData = {};
        that.apiData = {};
        that.errorCodeData = [];
      } else if (type == 1) {
        window.open(that.menuDetailData.relationData);
      } else if (type == 2) {
        that.apiData = {};
        that.errorCodeData = [];
        that.getData(JSON.parse(that.menuDetailData.relationData)[1]);
      } else if (type == 3 && subType == '0') {
        that.apiData = {};
        that.formData = {};
        that.errorCodeData = JSON.parse(that.menuDetailData.relationData);
      } else if (type == 3 && subType == '1') {
        that.formData = {};
        that.errorCodeData = [];
        that.getApiDetailData(JSON.parse(that.menuDetailData.relationData)[2]);
      }
    }
  },
  watch: {
    currentDoc(newData, oldData) {
      const that = this;
      that.menuDetailData = newData;
      that.$nextTick(() => {
        that.searchFlag = false;
        that.handleMenuData();
      });
    },
    searchData(newData, oldData) {
      const that = this;
      that.searchFlag = true;
      if (!newData) {
        that.searchList = [];
        that.totalCount = 0;
        return false;
      }
      that.getSearchData();
    }
  },
  mounted() {
    const that = this;
    that.menuDetailData = that.currentDoc;
    that.$nextTick(() => {
      that.handleMenuData();
    });
  }
};
</script>
<style lang="less" scoped>
.document-right {
  position: relative;
  .document-right-body {
    width: 900px;
    margin: 0 auto;
    padding: 45px 0 147px 0;
    min-height: calc(100vh - 118px;);
    .search-contain {
      h2 {
        font-size: 26px;
        color: #34495e;
        padding: 30px 0 26px 0;
        border-bottom: 1px solid #eee;
      }
      .no-search-data {
        margin-top: 45px;
        font-size: 15px;
        color: #34495e;
      }
      .search-list {
        margin-top: 28px;
        .load-more-data {
          width: 500px;
          margin: 20px auto 60px auto;
          height: 46px;
          line-height: 46px;
          text-align: center;
          font-size: 14px;
          color: #4c70e8;
          border: 1px solid rgba(225, 230, 240, 1);
          cursor: pointer;
          &:hover {
            border-color: #4c70e8;
          }
        }
        ul {
          overflow: hidden;
        }
        .search-list-cell {
          float: left;
          width: 422px;
          height: 60px;
          line-height: 60px;
          font-size: 16px;
          color: #142655;
          font-weight: 700;
          border-bottom: 1px dotted #eee;
          overflow: hidden;
          cursor: pointer;
          &:hover {
            color: #4c70e8;
          }
          &:nth-child(2n) {
            margin-left: 56px;
          }
        }
      }
    }
  }
}
</style>
