<template>
  <div>
    <span class='action ant-dropdown-link user-dropdown-menu'>
      <i style="font-size:20px" class="iconfont iconwenhao help-icon" @click="openHelpDoc" />
    </span>

    <!-- width不设置情况下是256  closable右上角关闭按钮'X'是否显示-->
    <a-drawer :title="$t('帮助中心')" placement="right" :closable="true" :visible="visible" @close="onClose" width="768"
      ref="helpDoc">
      <vue-office-docx :src="docx" class="word-style" @rendered="$t('header.operation-succeeded')"
        @error="$t('header.operation-failed')" />
    </a-drawer>
  </div>
</template>

<script>

//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx';
//引入相关样式
import '@vue-office/docx/lib/index.css';
import axios from "axios";
import {getCookie} from "../providers/http";

export default {
  components: {
    VueOfficeDocx
  },
  data() {
    return {
      visible: false,
      // word文档
      docx: undefined
    };
  },
  created() {
    this.setApiUrl();
  },
  methods: {
    getCookie(cookie_name) {
      var allcookies = document.cookie;
      //索引长度，开始索引的位置
      var cookie_pos = allcookies.indexOf(cookie_name);

      // 如果找到了索引，就代表cookie存在,否则不存在
      if (cookie_pos != -1) {
        // 把cookie_pos放在值的开始，只要给值加1即可
        //计算取cookie值得开始索引，加的1为“=”
        cookie_pos = cookie_pos + cookie_name.length + 1;
        //计算取cookie值得结束索引
        var cookie_end = allcookies.indexOf(";", cookie_pos);

        if (cookie_end == -1) {
          cookie_end = allcookies.length;
        }
        //得到想要的cookie的值
        var value = unescape(allcookies.substring(cookie_pos, cookie_end));
      }
      return value;
    },
    setCookie(name, value) {
      if (value) {
        var days = 1; //定义一天
        var exp = new Date();
        exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
        // 写入Cookie, toGMTString将时间转换成字符串
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString;
      }
    },
    setApiUrl() {
      this.setCookie("dev", -1);
      var apiUrl = this.getCookie("apiUrl");
      if (!apiUrl) {
        this.setCookie("apiUrl", this.$api.baseUrl);
      }
    },
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    extractSubstring(str) {
      // 找到 '#' 和 '/' 后面的第一个字符的位置
      var start = str.indexOf("#/") + 2; // +2 是为了跳过 '#/' 本身
      // 找到 '?' 的位置
      var end = str.indexOf("?");
      // 如果 '?' 存在，则截取中间的字符串；否则，截取从 '#' 开始到字符串结束的部分
      if (end === -1) {
        return str.slice(start);
      } else {
        return str.slice(start, end);
      }
    },
    openHelpDoc() {
      let path = window.location.href.toString();
      let currentPath = this.extractSubstring(path);
      let url = this.$api.baseUrl + '/DFMEA/file/helpDoc.do?fmeaFlag=1&currentPath=' + currentPath;
      fetch(url, {
        method: 'get',
        credentials: "include",
      }).then( res => {
        //读取文件的arrayBuffer
        res.arrayBuffer().then( res => {
          this.docx = res;
        });
        this.showDrawer();
      });
    },
  }
};
</script>
<style lang="less" scoped>
.word-style {
  height: 100vh;
  width: calc(100% - 10px);
}
</style>
