<template>
  <div class="flow">
    <div class="content">
      <!--左侧工具栏-->
      <div id="stencil" />
      <div class="panel">
        <!--流程图工具栏-->
        <div class="toolbar">
          <tool-bar v-if="isReady" />
        </div>
        <!--流程图画板-->
        <div id="container" />
      </div>
      <!--右侧工具栏-->
      <div class="config">
        <config-panel v-if="isReady" />
      </div>
    </div>
    <!-- <el-drawer
      ref="drawer"
      title="我是标题"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <span>我来啦!</span>
    </el-drawer> -->
  </div>
</template>
<script>
import "./index.css";
import FlowGraph from "./graph";
import ToolBar from "./components/ToolBar/index.vue";
import ConfigPanel from "./components/ConfigPanel/index.vue";
import { $, getContainerSize } from "../../../../utils";
export default {
  data() {
    return {
      isReady: false,
      destroyFn: null,
      drawer: false,
      direction: 'rtl',
    };
  },
  components: { ToolBar, ConfigPanel },

  mounted() {
    this.destroyFn = this.initGraph();
  },
  destroyed() {
    // this.destroyFn();
  },
  methods: {
    // handleClose(done) {
    //     this.$confirm('确认关闭？')
    //       .then(_ => {
    //         done();
    //       })
    //       .catch(_ => {});
    //   },
      // closeDrawer() {
      //   this.$refs.drawer.close();
      // },
    initGraph() {
      const graph = FlowGraph.init(
        $("#container"),
        $("#container").getBoundingClientRect().width,
        $("#container").getBoundingClientRect().height
      );
      const graphJson = JSON.parse(window.localStorage.getItem('graphJson'))
      if(graphJson){
        graph.fromJSON(graphJson)
      }
      this.isReady = true;
      const resizeFn = () => {
        const { width, height } = getContainerSize($(".panel"));
        graph.resize(width, height - 38);
      };
      resizeFn();
      window.addEventListener("resize", resizeFn);
      return () => {
        window.removeEventListener("resize", resizeFn);
        graph.dispose();
      };
   

    },
    


  },
}

</script>
<style lang="scss" >
.x6-widget-snapline-vertical {
  border-right-color: #ff4e50 !important;
}
.x6-widget-snapline-horizontal {
  border-bottom-color: #ff4e50 !important;
}
.x6-widget-selection-box {
  border: 1px dashed #5f95ff;
  margin-top: -3px;
  margin-left: -3px;
}
.x6-widget-selection-inner {
  border: 1px dashed #5f95ff;
}
.x6-graph-svg-viewport {
  padding: 0;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}
.animate-text1,
.animate-text2,
.animate-text3,
.animate-text4 {
  font-weight: bold;
  fill: none;
  stroke-width: 2px;
  stroke-dasharray: 90 310;
  animation: stroke 3s infinite linear;
}
.animate-text1 {
  stroke: #873bf4;
  text-shadow: 0 0 2px #873bf4;
  animation-delay: -1.5s;
}
.animate-text2 {
  stroke: #ff6e06;
  text-shadow: 0 0 2px #ff6e06;
  animation-delay: -3s;
}

 .x6-widget-stencil {
   color: rgba(34, 38, 83, 1);
   background: #fff;
 }  
 .x6-widget-stencil-title {  
  background: rgba(7, 68, 138, 1);
  color: #fff;
}
.x6-widget-stencil-search-text {
   color: #fff;
   background: rgba(7, 68, 138, 1);
 }
 .x6-widget-stencil-group > .x6-widget-stencil-group-title {
   /* background: #7daee3; */
   color: #000;
   height: 40px;
   font-size: 18px;
   line-height: 40px;
   font-weight: normal;

 }


 .x6-widget-stencil.collapsable > .x6-widget-stencil-title::before, .x6-widget-stencil-group.collapsable > .x6-widget-stencil-group-title::before {
    background-image: url('');
    opacity: 0.4;
    transition: all 0.3s;
}
.x6-widget-stencil-title{
  visibility: hidden;
}
.x6-widget-stencil-search{
  visibility: hidden;
}
.x6-widget-stencil {
    position: absolute;
    top: -80px;
    right: 0;
    bottom: 0;
    left: 0;
}

.config{
  width: 20%;
  padding: 0 0;
}
#stencil{
  width: 10%;
}
.el-tabs__header {
  background: rgba(229, 229, 229);
   /* height: 40px; */
}
.el-tabs__item {
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-weight: normal;
    /* color: #fff; */
    position: relative;
    margin-left: 10px !important;
}
/* .el-tabs__item:hover {
    color: #fff;
    cursor: pointer;
} */
/* .el-tabs__item.is-active {
    color: #fff;
} */
.el-tab-pane{
  margin-left: 10px !important;
}
.x6-graph-svg-stag{
  margin-left: -10px;
}
.x6-graph{
  height: 800px !important;
}
.bar{
  z-index: 1 !important;
}
</style>
