<template>
  <div id="app">
    <FlowChart
      ref="flowChart"
      :data="data"
      :height="height"
      :width="width"
      :closeSideBarClickMask="false"
      :maskColor="maskColor"
      :statusColor ="statusColor"
      addFlowNodeText="流程节点"
      addSwitchNodeText="条件节点"
      :showDelBtn="show"
      :showAddBtn="show"
      :showBackBtn="show"
      :showViewBtn="show"
      :addShowSwitchNode="true"
      @node-selected="nodeSelecSted"
      @node-add="nodeAdd"
      @node-delete="nodeDel"
    >
    <!-- 插槽 -->
      <template v-slot:sideBar>
        <div class="rightMsg">
          <div v-if="selectedNodes.type === 'flowNode'">
            <div class="title">流程节点</div>
            <input type="text" v-model="selectedNodes.label" placeholder="请输入标题">
            <input type="text" v-model="selectedNodes.propertyOne" placeholder="节点属性">
            <input type="text" v-model="selectedNodes.propertyTwo" placeholder="节点属性">
            <input type="text" v-model="selectedNodes.propertyThree" placeholder="节点属性">
            <input type="text" v-model="selectedNodes.state" placeholder="状态">
            <input type="text" v-model="type" placeholder="各个项目中所存储的参数(类型)">
            <input type="text" v-model="tell" placeholder="各个项目中所存储的参数(方式)">
            <input type="text" v-model="people" placeholder="各个项目中所存储的参数(对象)">
            <Button @click="saveNodeData">保存节点数据</Button>
            <Button @click="closeSidebar">取消</Button>
          </div>
          <div v-if="selectedNodes.type === 'switchNode'">
            <div class="title">条件节点</div>
            <input type="text" v-model="type" placeholder="各个项目中所存储的参数(类型)">
            <input type="text" v-model="tell" placeholder="各个项目中所存储的参数(方式)">
            <input type="text" v-model="people" placeholder="各个项目中所存储的参数(对象)">
            <Button @click="saveNodeData">保存节点数据</Button>
            <Button @click="closeSidebar">取消</Button>
          </div>
          <div v-if="selectedNodes.type === 'controlNode'">
            <div class="title">控制节点</div>
            <input type="text" v-model="type" placeholder="各个项目中所存储的参数(类型)">
            <input type="text" v-model="tell" placeholder="各个项目中所存储的参数(方式)">
            <input type="text" v-model="people" placeholder="各个项目中所存储的参数(对象)">
            <Button @click="saveNodeData">保存节点数据</Button>
            <Button @click="closeSidebar">取消</Button>
          </div>
        </div>
      </template>
    </FlowChart>
    <button @click="getData">保存流程图数据</button>
    <button @click="delNode">删除节点</button>
    <button @click="preNode">前置节点</button>
    <button @click="fitView">适应视口</button>
    <button @click="changeEdit">更改编辑</button>
  </div>
</template>

<script>
import FlowChart from './components/FlowChart.vue' // 引入组件
// import FlowChart from 'jkstack-flow-chart' // 引入组件
// import 'jkstack-flow-chart/dist/flow-chart.css' // 引入组件

export default {
  name: 'App',
  components: {
    FlowChart
  },
  data () {
    return {
      selectedNodes: {},
      statusColor: { // 状态颜色得配置
        success: { color: '#67C23A' }, // 成功
        error: { color: '#F56C6C' }, // 失败
        normal: { color: '#409EFF' }, // 正常
        start: { color: '#909399' }, // 开始
        end: { color: '#909399' } // 结束
      },
      width: 1500, // 宽度
      height: 600, // 高度
      maskColor: 'rgba(255, 255, 255, 0.7)', // mask颜色
      data: {}, // 流程图数据
      type: '', // 各个项目中所需存储得字段
      tell: '', // 各个项目中所需存储得字段
      people: '', // 各个项目中所需存储得字段
      show: true
    }
  },
  methods: {
    // 选择节点事件
    nodeSelecSted (node) {
      this.selectedNodes = node // 拿到当前点击得节点数据
    },
    // 新增节点事件
    nodeAdd (node) {
      this.$refs.flowChart.toggleSidebar() // 调用更改抽屉状态的方法
      console.log('新增', node)
      this.selectedNodes = node
    },
    // 删除节点事件
    nodeDel (node) {
      console.log('删除', node)
    },
    // 保存节点数据
    saveNodeData () {
      if (this.selectedNodes) {
        this.selectedNodes.task = { // *各个项目需求中所存储得内容请放进task对象
          type: this.type,
          tell: this.tell,
          people: this.people
        }
        this.$refs.flowChart.updateItem(this.selectedNodes) // 更新图表节点方法调用，传入更改后得节点信息
        this.$refs.flowChart.toggleSidebar() // 调用更改抽屉状态的方法
      }
    },
    delNode () {
      this.$refs.flowChart.deleteItem(this.selectedNodes.id)
    },
    preNode () {
      console.log('节点', this.selectedNodes.id)
      const aa = this.$refs.flowChart.getAllPreNodeList(this.selectedNodes.id)
      console.log(aa)
    },
    // 更改抽屉关闭/打开状态
    closeSidebar () {
      // this.$refs.flowChart.deleteItem(this.selectedNodes.id)
      this.$refs.flowChart.toggleSidebar()
    },
    // 获取流程图数据保存
    getData () {
      console.log(this.$refs.flowChart.getData()) // 获取流程图中数据调用getData()方法
    },
    fitView () {
      this.$refs.flowChart.fitView([1, 10, 100, 10])
    },
    changeEdit () {
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
#app{
  width: 1500px;
  border:1px solid #fff;
  border-radius: 5px;
  margin: 20px auto;
}
.rightMsg{
  padding: 20px;
  box-sizing: border-box;
}
.title{
  font-size: 15px;
  margin-bottom: 10px;
  color: #666;
}
input{
  width: 100%;
  border: 1px solid #efefef;
  line-height: 35px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}
textarea{
  width: 100%;
  border: 1px solid #efefef;
  line-height: 35px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 8px;
  font-family: '微软雅黑';
  font-size: 14px;
  outline: none;
}
button{
  width: 120px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background: #3388FF;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  margin: 10px 20px;
}
</style>
