<template>
  <div class="document-right">
    <div class="document-right-body border-box">
      <!-- 内容 -->
      <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>
    <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 } 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 {};
      }
    }
  },
  components: {
    openDocFooter,
    errorCodeTable,
    apiDetail,
    markdownContent
  },
  data() {
    return {
      menuDetailData: {}, // 菜单数据
      formData: {}, // 内容
      errorCodeData: [], // 错误码
      apiData: {} // api
    };
  },
  methods: {
    /**
     * 获取错误码数据
     */
    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.handleMenuData();
      });
    }
  },
  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;);
  }
}
</style>
