{% extends "apidoc/base.html" %}

{% block title %}Api Doc{% endblock %}

{% block content %}
<div id="app">
  <el-card class="box-card">
    <el-container>
      <el-header>
        <el-menu :default-active="headerIndex" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1" style="font-size:25px">Api Doc</el-menu-item>
          <el-button class="download" type="text" icon="el-icon-download" @click="download"></el-button>
        </el-menu>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="8">
            <el-input placeholder="Filter keyword" v-model="treeFilterText" style="padding-bottom:10px">
            </el-input>
            <div style="overflow-y:auto;max-height:670px;">
              <el-tree class="filter-tree" :data="treeDataNew" :props="treeDefaultProps" :filter-node-method="treeFilterNode"
                ref="apiTree" @node-click="treeNodeClick">
              </el-tree>
            </div>
          </el-col>
          <el-col :span="16" style="padding-left:20px">
            <div id="md"></div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-card>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
  new Vue({
    delimiters: ['{[', ']}'],
    el: '#app',
    data: {
      headerIndex: '1',
      treeFilterText: '',
      treeData: JSON.parse({{ data|tojson|safe }}).data,
      treeDefaultProps: {
        label: 'full_name',
        children: 'children'
      }
    },
    methods: {
      treeFilterNode(value, data) {
        if (!value) return true
        let srcStr = data.full_name.toLowerCase()
        let desStr = value.toLowerCase()
        return srcStr.indexOf(desStr) !== -1
      },
      treeNodeClick(data) {
        if(data.router != null) {
          let md = ''
          this.treeData[data.router]['children'].forEach((con, index) => {
            if(con.name == data.name) {
              md += '# ' + data.full_name + '\n\n'
              md += '#### url' + '\n'
              md += '- ' + con.url + '\n\n'
              if(con.api_type === 'api') {
                md += '#### method' + '\n'
                md += '- ' + con.method + '\n\n'
              }
              if(con.doc == 'No doc found for this Api' && con.doc_md != '') {
              }
              else {
                md += '#### doc' + '\n'
                md += '```\n' + con.doc + '\n```\n\n'
              }
              md += con.doc_md
            }
          })
          document.getElementById('md').innerHTML = marked(md)
        }
      },
      download() {
        let md = ''
        this.treeDataNew.forEach((t, index) => {
          md += '# ' + t.full_name + '\n\n'
          this.treeData[t.full_name]['children'].forEach((con, index) => {
            if(con.name_extra == '') {
              md += '## ' + con.name + '\n\n'
            }
            else {
              md += '## ' + con.name + '(' + con.name_extra + ')' + '\n\n'
            }
            md += '#### url' + '\n'
            md += '- ' + con.url + '\n\n'
            if(con.api_type === 'api') {
              md += '#### method' + '\n'
              md += '- ' + con.method + '\n\n'
            }
            if(con.doc == 'No doc found for this Api' && con.doc_md != '') {
            }
            else {
              md += '#### doc' + '\n'
              md += '```\n' + con.doc + '\n```\n\n'
            }
            md += con.doc_md + '\n'
          })
          md += '\n'
        })
        saveAs(new Blob([md], { type: 'text/markdown;charset=utf-8' }), 'ApiDoc.md')
      }
    },
    computed: {
      treeDataNew() {
        let treeDataNew = new Array()
        for (key in this.treeData) {
          let childrenData = new Array()
          this.treeData[key]['children'].forEach((con, index) => {
            if(con.name_extra == '') {
              childrenData.push({'full_name': con.name, 'name': con.name, 'router': con.router})
            }
            else {
              childrenData.push({'full_name': con.name + '(' + con.name_extra + ')', 'name': con.name, 'router': con.router})
            }
          })
          treeDataNew.push({'full_name': key, 'children': childrenData})
        }
        return treeDataNew
      }
    },
    watch: {
      treeFilterText(val) {
        this.$refs.apiTree.filter(val)
      }
    }
  })
</script>
<script>
  document.getElementById('md').innerHTML = marked('# Api Doc \n ## App Code: {{app_code}}')
</script>
{% endblock %}

{% block styles %}
{{ super() }}
<style>
  .download {
    padding-top: 25px;
    padding-right: 20px;
    font-size: 20px;
    float: right;
  }
</style>
{% endblock %}