<template>
  <el-dialog
    title="消息流Stage"
    :visible.sync="dialogVisible"
    width="900px"
    top="4vh"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
    append-to-body
  >
    <div class="dialog-content" v-loading="dialogLoading">
      <div class="flow-stage-box">
        <el-tooltip
          class="item"
          effect="dark"
          content="异常消息流"
          placement="top"
        >
          <span class="warningFlowButton" @click="errorDialogVisible = true">
            <svg
              t="1650249043704"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3900"
              width="30"
              height="30"
            >
              <path
                d="M571.134931 546.559428a59.134803 59.134803 0 1 1-118.269605 0V270.853011a59.134803 59.134803 0 1 1 118.269605 0z m-59.134803 255.994816a58.878808 58.878808 0 1 1 41.727155-17.151652 57.086844 57.086844 0 0 1-41.727155 17.151652zM512.000128 0.010496a501.74984 501.74984 0 0 0-199.419962 39.935191A509.685679 509.685679 0 0 0 39.945687 312.580166 501.74984 501.74984 0 0 0 0.010496 512.000128a501.74984 501.74984 0 0 0 39.935191 199.419962 509.685679 509.685679 0 0 0 272.634479 272.634479A501.74984 501.74984 0 0 0 512.000128 1023.98976a501.74984 501.74984 0 0 0 199.419962-39.935191 509.685679 509.685679 0 0 0 272.634479-272.634479A501.74984 501.74984 0 0 0 1023.98976 512.000128a501.74984 501.74984 0 0 0-39.935191-199.419962A509.685679 509.685679 0 0 0 711.42009 39.945687 501.74984 501.74984 0 0 0 512.000128 0.010496z"
                fill="#d81e06"
                p-id="3901"
                data-spm-anchor-id="a313x.7781069.0.i13"
                class="selected"
              ></path>
            </svg>
          </span>
        </el-tooltip>
        <flow-stage ref="flowStage" :flowId="flowId" :list="flowStageList" />
        <operate-panel @confirm="handleOperate" />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button
        type="primary"
        :disabled="dialogLoading"
        @click="submit"
        >确 定</el-button
      >
    </span>
    <flow-stage-error-dialog
      v-model="errorDialogVisible"
      :errorHandler="errorHandler"
      @close="cancelError"
      @confirm="handleFlowStageError"
    />
  </el-dialog>
</template>

<script>
import FlowStage from './FlowStage'
import OperatePanel from './OperatePanel'
import FlowStageErrorDialog from './FlowStageErrorDialog'
import {
  saveNodeListForFlow,
  getNodeListForFlow,
  listAvailableNodes
} from '@/api/esb_service'
import FlowStageDialogMixins from '@/mixins/flow_stage_dialog_mixins' // FlowStageDialog FlowStageErrorDialog 公用js
import { createNamespacedHelpers } from 'vuex'

const { mapMutations } = createNamespacedHelpers('app')
export default {
  mixins: [FlowStageDialogMixins],
  name: 'FlowStageDialog',
  components: {
    FlowStage,
    OperatePanel,
    FlowStageErrorDialog
  },
  data() {
    return {
      errorDialogVisible: false,
      errorHandler: {}
    }
  },
  props: {
    flowId: {
      type: String,
      default: ''
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
      if (val) {
        this.errorHandler = {
          name: 'errorHandler',
          flowId: this.flowId,
          type: 'ErrorHandlerDTO'
        }
        this.getNodeListForFlow()
        this.listAvailableNodes()
      } else {
        this.$emit('confirm')
        this.flowStageList = []
        this.haveLog = false
        this.setLogLevelList([])
      }
    }
  },
  methods: {
    ...mapMutations(['setOperateNode']),
    listAvailableNodes() {
      this.$nextTick(() => {
        listAvailableNodes()
          .then((rt) => {
            if (rt.status === '200' && rt.data) {
              this.setOperateNode(rt.data)
            }
          })
          .catch(() => {})
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    getNodeListForFlow() {
      if (this.flowId) {
        this.dialogLoading = true
        getNodeListForFlow(this.flowId)
          .then((rt) => {
            if (rt.status === '200' && rt.data) {
              this.flowStageList = rt.data.nodes || []
              this.errorHandler = rt.data.errorHandleNode || {
                name: 'errorHandler',
                flowId: this.flowId,
                type: 'ErrorHandlerDTO'
              }
              if (this.flowStageList.length > 0) {
                this.flowStageList = this.flowStageList.map(res => {
                  if (res.type === 'ConditionalBranchNodeDTO') {
                    res.contentExpr.valueExpr = res.contentExpr.valueExpr.split(res.contentExpr.logicalExpr)[0]
                    res.subNodes = res.elseIfNodes.map(item => {
                      console.log(item.contentExpr.valueExpr.split(item.contentExpr.logicalExpr), 'kankan')
                      item.contentExpr.valueExpr = item.contentExpr.valueExpr.split(item.contentExpr.logicalExpr).length > 1 ? item.contentExpr.valueExpr.split(item.contentExpr.logicalExpr)[1] : item.contentExpr.valueExpr.split(item.contentExpr.logicalExpr)[0]
                      return item
                    })
                  }
                  return res
                })
              }
            }
            this.dialogLoading = false
          })
          .catch(() => {
            this.dialogLoading = false
          })
      }
    },
    handleFlowStageError(data) {
      this.errorHandler = data
    },
    submit() {
      // if (this.flowStageList.length === 0) {
      //   this.$message({
      //     message: '请先添加操作再提交！',
      //     type: 'error'
      //   })
      //   return
      // }
      // return false;
      // console.log(this.flowStageList)
      // return
      this.flag = true
      this.verifyRequired(this.flowStageList)
      if (!this.flag) {
        return this.flag
      }
      // 检验状态码是否填写
      var reportFlag = true
      var that = this
      this.flowStageList.map(item => {
        if (item.type === 'ReportNodeDTO') {
          item.statusCodeTable.map(dItem => {
            if (dItem.contentExpr.valueExpr === '') {
              that.$message({
                message: '审计日志：条件不能为空',
                type: 'error'
              })
              reportFlag = false
              return false
            }
            if (dItem.code === '请选择' || dItem.code === '') {
              that.$message({
                message: '审计日志：状态码不能为空',
                type: 'error'
              })
              reportFlag = false
              return false
            }
          })
        }
        if (item.type === 'TransmissionHeaderNodeDTO') {
          item.headerInfos.map(dItem => {
            if (!dItem.headerName) {
              that.$message({
                message: '传输标头：名称不能为空',
                type: 'error'
              })
              reportFlag = false
              return false
            }
          })
        }
      })

      if (!reportFlag) {
        return false
      }
      this.$confirm('确定提交？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.dialogLoading = true
          console.log('flowStageList', this.flowStageList)
          console.log('errorHandler', this.errorHandler)
          console.log(
            'item.type',
            this.flowStageList.map((item) => item.type)
          )
          // this.dialogLoading = false
          // return
          if (this.flowStageList.length > 0) {
            this.flowStageList = this.flowStageList.map((res) => {
              if (res.type === 'ConditionalBranchNodeDTO') {
                const obj = JSON.parse(JSON.stringify(res.subNodes))
                obj.map(item => {
                  item.contentExpr.valueExprs = item.contentExpr.valueExpr
                  item.contentExpr.valueExpr = res.contentExpr.valueExpr + item.contentExpr.logicalExpr + item.contentExpr.valueExprs
                })
                // obj[0].contentExpr.valueExprs = obj[0].contentExpr.valueExpr
                // obj[0].contentExpr.valueExpr = res.contentExpr.valueExpr + obj[0].contentExpr.logicalExpr + obj[0].contentExpr.valueExprs
                res.elseIfNodes = obj
                res.subNodes = obj[0].subNodes
                res.contentExpr.valueExprs = res.contentExpr.valueExpr
                res.contentExpr.logicalExpr = obj[0].contentExpr.logicalExpr
                res.contentExpr.valueExpr = obj[0].contentExpr.valueExpr
              }
              return res
            })
          }
          saveNodeListForFlow(
            {
              common: this.flowStageList,
              errorHandler: this.errorHandler
            },
            this.flowId
          )
            .then((rt) => {
              if (rt.status === '200') {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.dialogVisible = false
                this.$emit('confirm')
              }
              this.dialogLoading = false
            })
            .catch(() => {
              try {
                if (this.flowStageList.length > 0) {
                  this.flowStageList = this.flowStageList.map((res) => {
                    if (res.type === 'ConditionalBranchNodeDTO') {
                      res.subNodes = res.elseIfNodes.map(item => {
                        item.valueExpr = item.valueExprs
                      })
                      res.contentExpr.valueExpr = res.contentExpr.valueExprs
                    }
                    return res
                  })
                }
              } catch (error) {
              }
              this.dialogLoading = false
            })
        })
        .catch(() => {})
    },
    cancel() {
      this.dialogVisible = false
    },
    cancelError() {
      this.errorDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  /deep/ .el-dialog {
    .el-dialog__body {
      padding: 0;

      .dialog-content {
        padding: 20px 30px;
        height: 65vh;
        overflow: auto;
      }
    }
  }
}

.flow-stage-box {
  position: relative;
  min-height: 100%;
}

.warningFlowButton {
  &:hover {
    cursor: pointer;
  }
  position: absolute;
  right: 10px;
  font-size: 30px;
  padding: 0;
}
</style>
