<template>
  <div style="text-align: right;width: 100%;height: 100%;position: relative;">
<!--    <fishbone-com ref="fish" :data-source="dataSource" :is-show="showButton" />-->
    <a-dropdown style="position: absolute;top: 10px;left: 10px;z-index: 999;">
      <a-menu slot="overlay">
        <a-menu-item key="1" @click="exportPng"><a-icon type="plus" />导出PNG格式</a-menu-item>
        <a-menu-item key="2" @click="exportSvg"><a-icon type="plus" />导出SVG格式</a-menu-item>
      </a-menu>
      <a-button type="primary" icon="plus">导出<a-icon type="down" /></a-button>
    </a-dropdown>
    <singlefishbone ref="fish" :data-source="dataSource" :is-show="showButton" v-if="showFish"  />
    <a-button @click="saveFish" v-show="showButton" type="primary" style="position: absolute;bottom: 0;right: 0;z-index: 999;">保存</a-button>
  </div>
</template>

<script>

// import FishboneCom from "@/views/components/FishBoneCom/fish.vue";
import Singlefishbone from "../../packages/components/fishbone/fishBone.vue";

export default {
  name: "KFishbone",
  components: {Singlefishbone},
  props: {
    itemRow: {
      default: () => {},
      type: Object
    },
    itemDetail: {
      default: () => {},
      type: Object
    },
    // 所有配置数据
    recordConfig: {
      type: Object,
      default: () => {
      }
    },
  },
  data() {
    return {
      dataSource: {},
      buttonDatas: {
        editableList: []
      },
      isDisabledDetail: false,
      showFish: false
    }
  },
  computed: {
    //控制上传按钮显隐
    showButton(){
      // 脚本控制可编辑 优先级最高
      if (this.itemRow && this.itemRow.isShowEdit) {
        return true;
      }
      /*
      * 这一步用来判断是否从台账点开或者是否开启流程（disabledDetail为true）。
      * 然后判断是待办还是已办
      */
      if (this.isDisabledDetail || !this.buttonDatas || !this.buttonDatas.currentTaskInstanceVo) {
        // 在子表
        if (this.itemDetail) {
          return !this.itemDetail.disabled
        }else{
          //在表单
          return !this.recordConfig.options.disabled
        }
      }
      const currentTaskInstanceVo = this.buttonDatas.currentTaskInstanceVo;
      const identityString =  currentTaskInstanceVo && currentTaskInstanceVo.identityString;
      // 当已办的时候
      if (identityString && identityString.indexOf('已办') !== -1) {
        return false
      }
      // 当待办的时候，走过的节点统一禁用
      const currentFormCode = this.buttonDatas.formCode;
      const stepFormCode = sessionStorage.getItem('stepFormCode');
      if (stepFormCode == currentFormCode || !stepFormCode){
        return true
      }else{
        return false
      }
    },
  },
  methods: {
    exportPng() {
      let minder = window.minder;
      let _this = this;
      minder.exportData("png").then(function(content) {
        var eleLink = document.createElement("a");
        eleLink.download = "鱼骨图.png";
        eleLink.style.display = "none";

        var blob = _this.getBlob(content);
        // downLoad.setAttribute('href',URL.createObjectURL(blob));
        eleLink.href = URL.createObjectURL(blob);

        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
      });
    },
    exportSvg() {
      let minder = window.minder;
      minder.exportData("svg").then(function(content) {
        // 创建隐藏的可下载链接
        var eleLink = document.createElement("a");
        eleLink.download = "鱼骨图.svg";
        eleLink.style.display = "none";

        let blob = new Blob([content]);
        eleLink.href = URL.createObjectURL(blob);

        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
      });
    },
    getBlob(base64) {
      //转图片下载
      return this.b64toBlob(this.getData(base64), this.getContentType(base64));
    },
    getContentType(base64) {
      return /data:([^;]*);/i.exec(base64)[1];
    },
    getData(base64) {
      return base64.substr(base64.indexOf("base64,") + 7, base64.length);
    },
    b64toBlob(b64Data, contentType, sliceSize) {
      contentType = contentType || "";
      sliceSize = sliceSize || 512;

      var byteCharacters = atob(b64Data);
      var byteArrays = [];

      for (
        var offset = 0;
        offset < byteCharacters.length;
        offset += sliceSize
      ) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
      }

      var blob = new Blob(byteArrays, { type: contentType });
      return blob;
    },
    saveFish(){
      this.getMindValue(JSON.stringify(window.km.exportJson()))
      this.$message.success('保存成功!');
    },
    getMindValue(mindValue){
      this.$emit('change',mindValue);
      this.itemDetail && this.$emit('setFieldValue',this.itemDetail.key,mindValue,this.itemRow ? this.itemRow : this.recordConfig);
    },
  },
  created() {
    if (sessionStorage.getItem('buttonDatas')) {
      this.buttonDatas = JSON.parse(sessionStorage.getItem('buttonDatas'));
    }
    console.log(this.recordConfig,'this.recordConfig')

    this.isDisabledDetail = JSON.parse(sessionStorage.getItem('disabledDetail'));
    if (this.itemDetail && this.itemDetail.key) {
      this.dataSource = JSON.parse(this.itemRow[this.itemDetail.key]) || {};
      return;
    }
    if (this.$attrs.value) {
      this.dataSource = JSON.parse(JSON.parse(this.$attrs.value));
      console.log(this.dataSource,'dataSource')
    }
    setTimeout(() => {
      this.showFish = true
    },500)
  }
}
</script>

<style scoped>

</style>
