<template>
  <div class="flow-stage-wrap">
    <div class="button-bar">
      <el-button
        class="add-perate-button"
        type="text"
        icon="el-icon-circle-plus-outline"
        size="medium"
        @click.stop="addOperate($event, '1', null)"
        >添加操作
      </el-button>
    </div>

    <div class="flow-stage-content">
      <ul>
        <li v-for="(item, index) in itemlist" :key="index">
          <!--路由选项-->
          <RouterOption
            v-if="item.type === 'RouteOptionNodeDto'"
            :stageData="item"
            :list="itemlist"
            :index="index"
            @confirm="addOperate"
          />
          <!--          <report v-if="item.type === 'reportitem'" :stageData="item" :index="index" @confirm="addOperate" />-->
          <log
            v-if="item.type === 'LogNodeDTO'"
            :stageData="item"
            :list="itemlist"
            :index="index"
            @confirm="addOperate"
          />
          <!--审计日志-->
          <audit-report
            v-if="item.type === 'ReportNodeDTO'"
            :stageData="item"
            :list="itemlist"
            :index="index"
            @confirm="addOperate"
          />
          <!--          <warning v-if="item.type === 'warning'" :stageData="item" :index="index" @confirm="addOperate" />-->
          <for-each
            v-if="item.type === 'LoopNodeDTO'"
            :stageData="item"
            :list="itemlist"
            :index="index"
            @confirm="addOperate"
          />

          <if-then
            v-if="item.type === 'ChoiceNodeDTO'"
            :stageData="item"
            :index="index"
            :list="itemlist"
            @confirm="addOperate"
          />
          <Branch
            v-if="item.type === 'ConditionalBranchNodeDTO'"
            :stageData="item"
            :index="index"
            :list="itemlist"
            @confirm="addOperate"
            @removelist="removelist"
          />
          <if-thens
            v-if="item.type === 'ChoiceNodeDTOs'"
            :stageData="item"
            :index="index"
            :list="itemlist"
            @confirm="addOperate"
          />

          <!--分配-->
          <allocation
            v-if="item.type === 'AssignNodeDTO'"
            :stageData="item"
            :index="index"
            @confirm="addOperate"
          />
          <!--删除-->
          <delete
            v-if="item.type === 'DeleteNodeDTO'"
            :stageData="item"
            :index="index"
            @confirm="addOperate"
          />
          <!--插入-->
          <insert
            v-if="item.type === 'InsertNodeDTO'"
            :stageData="item"
            :index="index"
            @confirm="addOperate"
          />
          <!--替换-->
          <replace
            v-if="item.type === 'ReplaceNodeDTO'"
            :stageData="item"
            :index="index"
            @confirm="addOperate"
          />
          <!--转换-->
          <Transform
            v-if="item.type === 'ConvertNodeDTO'"
            :stageData="item"
            :index="index"
            @confirm="addOperate"
          />
          <!--函数-->
          <FunctionNode
            v-if="item.type === 'FunctionNodeDTO'"
            :stageData="item"
            :index="index"
            @confirm="addOperate"
          />
          <!--服务标注-->
          <service-mark
            v-if="item.type === 'RouteNodeDTO'"
            :flowId="flowId"
            :stageData="item"
            :index="index"
            @confirm="addOperate"
          />
          <!--广播式路由-->
          <ServiceMarkbr
            v-if="item.type === 'BroadcastRoutingNodeDto'"
            :flowId="flowId"
            :stageData="item"
            :index="index"
            @confirm="addOperate"
          />
          <!--发布-->
          <publish-node
            v-if="item.type === 'PublishNodeDTO'"
            :flowId="flowId"
            :stageData="item"
            :index="index"
            @confirm="addOperate"
          />
          <!-- SAP适配器 -->
          <SapAdapter
            v-if="item.type === 'SapNodeDTO'"
            :flowId="flowId"
            :stageData="item"
            :index="index"
            @confirm="addOperate"
          ></SapAdapter>
          <!--传输头-->
          <TransmissionHeader
            v-if="item.type === 'TransmissionHeaderNodeDTO'"
            :stageData="item"
            :index="index"
            @confirm="addOperate"
          />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import Report from './report/Report'
import Log from './report/Log'
import AuditReport from './report/AuditReport'
// import Warning from './report/Warning'
// import ForEach from './flow_control/ForEach'
import IfThen from './flow_control/IfThen'
import IfThens from './flow_control/copyThen'
import Allocation from './message_handling/Allocation'
import Delete from './message_handling/Delete'
import Insert from './message_handling/Insert'
import Replace from './message_handling/Replace'
import Transform from './message_handling/Transform'
import FunctionNode from './message_handling/FunctionNode'
import publishNode from './communication/publishNode'
import ServiceMark from './communication/ServiceMark'
import SapAdapter from './communication/SapAdapter'
import TransmissionHeader from './communication/TransmissionHeader'
import RouterOption from './communication/RouterOption'
import ServiceMarkbr from './communication/ServiceMarkbr'
import Branch from './flow_control/Branch'
import { createNamespacedHelpers } from 'vuex'
// import IfThen from './flow_control/IfThen.vue'

const { mapMutations } = createNamespacedHelpers('app')
export default {
  name: 'FlowStage',
  components: {
    // Report,
    Log, // 日志
    AuditReport,
    // Warning,
    ForEach: () => import('./flow_control/ForEach'), // For Each
    IfThen, // If Then
    IfThens,
    Allocation, // 分配
    Delete, // 删除
    Insert, // 插入
    Replace, // 替换
    Transform, // 转换
    ServiceMark, // 服务标注
    RouterOption, // 路由选项
    TransmissionHeader, // 传输标头
    SapAdapter, // SAP适配器
    publishNode,
    FunctionNode,
    ServiceMarkbr,
    Branch
  },
  data() {
    return {
      itemlist: [],
      checkedIndex: 0
    }
  },
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    flowId: {
      type: String,
      default() {
        return ''
      }
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
    },
    list: {
      handler: function(val) {
        console.log(val)
        this.itemlist = val
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {
    ...mapMutations([
      'setOperatePanelData',
      'setCurrenStageIndex',
      'setCurrenStageList'
    ]),
    addOperate(e, type, index) {
      console.log('添加ifthen', type, index, e)
      this.setOperatePanelData({
        isShow: true,
        coord: {
          left: `${e.layerX + 10}px`,
          top: `${e.layerY + 10}px`
        },
        type: type
      })
      console.log('index', index)
      console.log('itemlist', this.itemlist)
      this.checkedIndex = index
      this.setCurrenStageIndex(index)
      this.setCurrenStageList(this.itemlist)
    },
    removelist(n) {
      this.itemlist.splice(n, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.button-bar {
  margin-bottom: 10px;

  .add-perate-button {
    line-height: 22px;
    padding: 0;
    cursor: default;
  }
}
</style>
<style lang="scss">
.flow-stage-wrap {
  .module-cont {
    margin-bottom: 20px;

    &:after {
      content: '';
      clear: both;
      display: block;
    }

    .add-perate-icon {
      float: left;
      width: 30px;
      height: 30px;
      // position: relative;
      img {
        width: 100%;
      }

      .perate-enable {
        position: relative;
        width: 60%;
        height: auto;
        // right: 0;
        // bottom: 0;
        top: -25px;
        right: -10px;
      }
    }

    .row-content {
      float: right;
      width: calc(100% - 50px);
      font-size: 12px;
      color: #333333;

      .el-row {
        position: inherit;
      }

      .el-select {
        width: 60px;

        .el-input {
          width: 100%;
          margin: 0;

          .el-input__inner {
            color: $active-color;
            padding: 0 10px;
            border: none;
          }

          .el-input__icon {
            width: 16px;
            color: $active-color;
          }
        }
      }

      .el-input {
        width: 200px;
        margin: 0 5px;
      }
    }
  }

  .el-table {
    font-size: 12px;

    .el-table__empty-block {
      display: none;
    }

    .el-table__append-wrapper {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;

      .el-link {
        line-height: 18px;
        font-size: 12px;
      }
    }
  }
}
</style>
