<template>
  <aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
    <div class="aui-sidebar__inner">
      <el-menu
        :collapse="$store.state.sidebarFold"
        :unique-opened="true"
        :collapse-transition="false"
        class="aui-sidebar__menu"
        active-text-color="#fff"
        :default-active="defauleActiveIndex"
      >
        <sub-menu v-for="menu in $store.state.sidebarMenuList" :key="menu.id" :menu="menu" />
      </el-menu>
    </div>
    <el-tooltip class="item" effect="dark" content="可点击下载操作手册" placement="top">
      <div v-if="!$store.state.sidebarFold" class="sidebar-operation-manual" style="width:30px" @click="exportclick(wordData)">
        <i class="el-icon-question" />
      </div>
      <div v-else class="sidebar-operation-manual" style="width:40px" @click="exportclick(wordData)">
        <i class="el-icon-question" style="font-size:18px;" />
      </div>
    </el-tooltip>
  </aside>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu'
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
export default {
  components: {
    SubMenu
  },
  data() {
    return {
      fileHref: '',
      wordData: {
        user_name: 'XXX',
        remark: ''
      }
    }
  },
  computed: {
    defauleActiveIndex: {
      get() {
        return this.$store.getters.defauleActiveIndex
      },
      set(val) {

      }
    }
  },
  created() {
    const defauleActiveIndex = window.localStorage.getItem('defauleActiveIndex')
      ? window.localStorage.getItem('defauleActiveIndex') : window.SITE_CONFIG.menuList[0].children[0].id
    setTimeout(() => {
      this.$store.state.sidebarMenuList = window.SITE_CONFIG.menuList
    }, 200)
    this.$store.commit('activeIndexFun', defauleActiveIndex)
  },
  mounted() {

  },
  methods: {
    exportclick(e) {
      this.$message('暂时没有操作手册可下载')
      return
      const docxsrc = '../../../static/word/operation-manual-YSG.docx' // 模板文件的位置
      const docxname = '眼科电子病历操作手册'// 导出文件的名字
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent(docxsrc, function(error, content) {
        // docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
        if (error) {
          throw error
        }

        // 创建一个PizZip实例，内容为模板的内容
        const zip = new PizZip(content)
        // 创建并加载docx templater实例对象
        const doc = new docxtemplater().loadZip(zip)
        // 设置模板变量的值
        doc.setData({
          ...e// e中的数据可以再模板中直接使用
        })

        try {
          // 用模板变量的值替换所有模板变量
          doc.render()
        } catch (error) {
          // 抛出异常
          const e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties
          }
          console.log(JSON.stringify({
            error: e
          }))
          throw error
        }

        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        const out = doc.getZip().generate({
          type: 'blob',
          mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        })
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, docxname)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .sidebar-operation-manual {
    font-size: 14px;
    color: #fff;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #3c4658;
    border-radius: 4px;
    position: absolute;
    right: 10px;
    bottom: 6px;
    cursor: pointer;
    z-index: 1;
    .title {
      display: inline-block;
      padding-left: 10px;
    }
}
</style>
<style lang="scss">
.aui-sidebar{
  width: 160px !important;
}
.aui-sidebar__menu{
  width: 160px;
}
.aui-sidebar__inner {
  .el-menu-item:hover {
  background: #545c64 !important;
}
}
</style>
