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

{% block title %}{{ title }} ({{ version }}){% 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">{{ title }} ({{ version }})</i></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">
            <article class="markdown-body"><div id="md"></div></article>
          </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'
      },
      title: '{{ title }}',
      version: '{{ version }}',
      noDocText: '{{ noDocText }}'
    },
    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'
              var urls= new Array()
              urls = con.url.split(" ")
              for (i=0; i<urls.length; i++)
              {
                md += '- ' + urls[i] + '\n\n'
              }
              if(con.api_type === 'api') {
                md += '### method' + '\n'
                md += '- ' + con.method + '\n\n'
              }
              if(con.doc == this.noDocText && con.doc_md != '') {
              }
              else {
                md += '### doc' + '\n'
                md += '```doc\n' + con.doc + '\n```\n\n'
              }
              md += con.doc_md
            }
          })
          document.getElementById('md').innerHTML = marked(md)
          document.querySelectorAll('pre code').forEach((block) => {
            hljs.highlightBlock(block)
          })
        }
      },
      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'
            var urls= new Array()
            urls = con.url.split(" ")
            for (i=0; i<urls.length; i++)
            {
              md += '- ' + urls[i] + '\n\n'
            }
            if(con.api_type === 'api') {
              md += '### method' + '\n'
              md += '- ' + con.method + '\n\n'
            }
            if(con.doc == this.noDocText && con.doc_md != '') {
            }
            else {
              md += '### doc' + '\n'
              md += '```doc\n' + con.doc + '\n```\n\n'
            }
            md += con.doc_md + '\n'
          })
          md += '\n'
        })
        saveAs(new Blob([md], { type: 'text/markdown;charset=utf-8' }), this.title + ' (' + this.version + ')' + '.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('# {{ title }} ({{ version }})')
</script>
{% endblock %}

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