<template>
  <div class="wrapper" v-loading="loading">
    <editor-header @config-change="configChange"></editor-header>
    <div class="editor-main">
      <editor-canvas @canvas-initialized="loadData"></editor-canvas>
      <editor-panel></editor-panel>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import header from './header/header.vue'
import canvas from './canvas/canvas.vue'
import panel from './panel/panel.vue'
import util from '@src/common/util.js'

export default {
  data() {
    return {
      copyAdd: 'N'
    }
  },
  computed: mapGetters({
    loading: 'loading'
  }),
  methods: {
    async configChange(config) {
      this.setConnectorStyle(config.connectorStyle)
    },
    // 重绘线条样式
    setConnectorStyle(connectorStyle) {
      let jsPlumb = window.jsPlumb
      jsPlumb.importDefaults({
        Endpoint: ['Dot', { radius: 2 }],
        Connector: connectorStyle || 'Flowchart', //  连接线的样式种类有'Bezier''Flowchart','StateMachine','Straight'
        HoverPaintStyle: { stroke: '#1e8151', strokeWidth: 2 },
        ConnectionsDetachable: false,
        ConnectionOverlays: [
          ['Arrow', { location: 1, id: 'arrow', length: 14, foldback: 0.8 }],
          ['Label', { label: '', id: 'label', cssClass: 'aLabel' }]
        ],
        Container: 'canvas'
      })
    },

    getQueryString(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      var r = window.location.search.substr(1).match(reg)
      if (r !== null) {
        return unescape(r[2])
      }
      return null
    },
    async loadData() {
      try {
        let ID = this.getQueryString('ID')
        this.copyAdd = this.getQueryString('copyAdd')
        await this.$store.dispatch('getWorkflow', ID)
        this.$store.dispatch('loadCompleted')
        this.setConnectorStyle(this.$store.state.workFlow.connectorStyle || 'Flowchart')
      } catch (e) {
        util.showErrorMessage(e.toString())
      }
    }
  },
  async created() { },
  components: {
    'editor-header': header,
    'editor-canvas': canvas,
    'editor-panel': panel
  }
}
</script>

<style>
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #f5f5f5;
    margin-left: 4px
  }

  ::-webkit-scrollbar-track {
    background-color: #f5f5f5
  }

  ::-webkit-scrollbar-thumb,
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    border-radius: 4px
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .45)
  }

  .wrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #f6f6f6
  }

  .header-wrapper {
    height: 50px;
    padding: 0 16px;
    border-bottom: 1px solid #eee;
    line-height: 50px;
    overflow: hidden
  }

  .editor-main {
    width: 100%;
    height: calc(100vh - 51px)
  }

  .panel-wrapper {
    width: 300px;
    height: calc(100vh - 71px);
    margin: 10px 10px 10px 0;
    float: left;
    overflow-y: auto
  }

  .panel-card {
    margin-bottom: 10px
  }

  .panel-card:last-child {
    margin-bottom: 0
  }

  .canvas-wrapper {
    width: calc(100vw - 310px);
    height: calc(100vh - 71px);
    padding: 10px;
    float: left
  }

  .canvas-container {
    height: calc(100vh - 73px);
    border: 1px solid #eee;
    background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJCNDdDMUVGQURBMTExRTdCOUM3RkY1MzIwRENBOUQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJCNDdDMUYwQURBMTExRTdCOUM3RkY1MzIwRENBOUQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkI0N0MxRURBREExMTFFN0I5QzdGRjUzMjBEQ0E5RDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkI0N0MxRUVBREExMTFFN0I5QzdGRjUzMjBEQ0E5RDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wAARCAALAAsDAREAAhEBAxEB/8QAXAAAAwEAAAAAAAAAAAAAAAAAAAUGCgEBAAAAAAAAAAAAAAAAAAAAABAAAQEFCQAAAAAAAAAAAAAAABMSYxRFZoOTJBUlFoamxhEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A38ATsy5F5MA1KoupgJsdHTprOqeVV29cxKNii9A//9k=) repeat #fff
  }

  .flow-canvas {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
    -ms-touch-action: none;
    touch-action: none
  }

  .legend {
    position: absolute;
    z-index: 4;
    /* border: 1px solid #2e6f9a; */
    box-shadow: 2px 2px 19px #e0e0e0;
    opacity: .9;
    cursor: move;
    background-color: #fff;
    font-size: 14px;
    transition: background-color .25s ease-in
  }

  .legend .legend-ep {
    display: none;
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: orange;
    cursor: pointer;
    box-shadow: 0 0 2px #000;
    transition: box-shadow .25s ease-in
  }

  .legend .legend-ep.up-ep {
    top: -5px;
    right: 50%;
    margin-right: -5px
  }

  .legend .legend-ep.down-ep {
    bottom: -5px;
    right: 50%;
    margin-right: -5px
  }

  .legend .legend-ep.left-ep {
    left: -5px;
    top: 50%;
    margin-top: -5px
  }

  .legend .legend-ep.right-ep {
    right: -5px;
    top: 50%;
    margin-top: -5px
  }

  .legend .legend-ep:hover {
    box-shadow: 0 0 6px #000
  }

  .legend.active-node {
    background-color: orange;
    color: #fff
  }

  .legend.active-node .legend-ep {
    display: inline-block
  }

  .legend.active-node:hover {
    background-color: orange
  }

  .legend:hover {
    background-color: #5c96bc;
    color: #fff
  }

  .legend.end-legend,
  .legend.start-legend {
    width: 92px;
    height: 38px;
    line-height: 30px;
    text-align: center;
    padding: 2px 10px;
    border-radius: 20px;
    background-color: #F56C6C;
    color: #fff;
  }

  .legend.node-legend {
    padding: 2px 10px;
    border-radius: 5px;
    background-color: #409EFF;
    color: #fff;
  }

  .legend.action-legend {
    padding: 2px 10px;
    border-radius: 5px;
    background-color: #67C23A;
    color: #fff;
  }

  .legend.node-legend .legend-text,
  .legend.action-legend .legend-ep,
  .legend.action-legend .legend-text {
    line-height: 32px
  }

  .legend.action-legend .legend-ep.up-ep {
    margin-right: -10px
  }

  .legend.action-legend .legend-ep.down-ep {
    margin-right: 0
  }

  .legend.action-legend .legend-text {
    display: inline-block;
    line-height: 32px
  }

  .aLabel {
    transition: background-color .25s ease-in;
    background-color: #fff;
    opacity: .8;
    padding: .3em;
    border-radius: .5em;
    border: 1px solid #346789;
    cursor: pointer;
    font-size: 14px
  }

  .aLabel.jtk-hover,
  .jtk-source-hover,
  .jtk-target-hover {
    background-color: #1e8151;
    color: #fff
  }

  .aLabel.active-line {
    background-color: orange;
    color: #fff;
    z-index: 1
  }

  .jtk-connector.active-line path:nth-child(2) {
    stroke: orange
  }

  .jtk-connector.active-line path:last-child {
    fill: orange;
    stroke: orange
  }

  .flow-canvas .jtk-endpoint {
    z-index: 3
  }

  .dragHover {
    border: 2px solid orange
  }

  .jtk-endpoint,
  path {
    cursor: pointer
  }
</style>
