<template>
  <div class="process-design">
    <!-- 缩放操作 -->
    <div class="scale">
      <a-button
        shape="circle"
        size="small"
        :disabled="scale >= 150"
        @click="scale += 10"
      >
        <a-icon type="plus" />
      </a-button>
      <span>{{ scale }}%</span>
      <a-button
        shape="circle"
        size="small"
        :disabled="scale <= 30"
        @click="scale -= 10"
      >
        <a-icon type="minus" />
      </a-button>
    </div>

    <!-- 流程图主视图 -->
    <div class="design">
      <ProcessTree
        ref="processTreeRef"
        :style="{ transform: 'scale(' + scale / 100 + ')' }"
        @selectedNode="nodeSelected"
      />
    </div>

    <!-- 配置抽屉 -->
    <a-drawer
      :visible.sync="configShow"
      :width="500"
      placement="right"
      :closable="true"
      @close="configShow = false"
    >
      <template slot="title">
        <div v-if="inputShow">
          <a-input
            v-model="workflowStore.selectedNode.nodeName"
            style="width: 300px"
            size="middle"
            @blur="inputShow = false"
          />
        </div>
        <div v-else @click="inputShow = true" style="cursor: pointer;">
          <a-icon type="edit" style="margin-right: 10px" />
          {{ workflowStore.selectedNode.nodeName }}
        </div>
      </template>

      <div class="node_config_content">
        <NodeConfig />
      </div>
    </a-drawer>
  </div>
</template>

<script>
// import ProcessTree from '@/views/workFlow/designer/components/process/ProcessTree.vue';
import ProcessTree from '@/views/workFlow/designer/components/process/ProcessTreeNode.vue';
import NodeConfig from '@/views/workFlow/designer/common/process/config/NodeConfig.vue';
import { mapState } from 'vuex';

export default {
  name: 'ProcessDesign',
  components: {
    ProcessTree,
    NodeConfig
  },
  data() {
    return {
      scale: 100,
      inputShow: false,
      configShow: false
    };
  },
  computed: {
    ...mapState({
      workflowStore: state => state.workflow
    })
  },
  methods: {
    nodeSelected(node) {
      console.log('配置节点', node);
      this.configShow = true;
    },
    validate() {
      return this.$refs.processTreeRef.validateProcess();
    }
  }
};
</script>

<style scoped lang="less">
.process-design {
  width: 100%;
  height: calc(100vh - 220px);
  .design {
    box-sizing: content-box;
    height: calc(100vh - 320px);
    padding-top: 100px;
    overflow: hidden;
    overflow-y: auto;
    background-color: #f5f6f6;
  }

  .scale {
    z-index: 999;
    position: fixed;
    top: 205px;
    right: 85px;

    span {
      margin: 0 10px;
      font-size: 15px;
      color: #7a7a7a;
      width: 50px;
      vertical-align: top;
    }
  }
}
</style>
