<template>
  <div class="button-bar">
    <el-button class="add-perate-button" type="text" icon="el-icon-circle-plus-outline" size="medium" @click.stop="addOperate10($event, '1')">添加操作</el-button>
<!--    <operate-panel @confirm="handleOperate10" />-->
  </div>
</template>

<script>
// import OperatePanel from './OperatePanel'
import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('app')
export default {
  name: 'AddPerateButton',
  components: {
    // OperatePanel
  },
  data() {
    return {
    }
  },
  props: {
    flowId: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default() {
        return []
      }
    },
    index: {
      type: Number,
      default: 0
    }
  },
  methods: {
    ...mapMutations(['setOperatePanelData', 'setCurrenStageList']),
    addOperate10(e, type) {
      this.setOperatePanelData({
        isShow: true,
        coord: {
          left: `${e.layerX + 10}px`,
          top: `${e.layerY + 10}px`
        },
        type: type
      })
      this.setCurrenStageList(this.list)
    },
    handleOperate10(data) {
      const val = data[data.length - 1]
      const item = {}
      this.$set(item, 'type', val)
      this.$set(item, 'flowId', this.flowId)
      this.$set(item, 'subNodes', [
        // {
        //   type: 'LogNodeDTO',
        //   flowId: this.flowId,
        //   subNodes: []
        // }
      ])
      // this.list.push(item)
      // this.$emit('confirm', this.list)
      this.$emit('confirm', item)
    }
  }
}
</script>

<style lang="scss" scoped>
  .button-bar {
    margin-bottom: 10px;
    .add-perate-button {
      line-height: 22px;
      padding: 0;
      cursor: default;
    }
  }
</style>
