<template>
  <el-dialog title="异常消息流Stage" :visible.sync="dialogVisible" width="900px" top="4vh" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" append-to-body>
    <div class="dialog-content">
      <el-form ref="formData" :model="formData" label-width="84px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="重试次数：">
              <el-input-number v-model="formData.retryInterval" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="重试间隔：">
              <el-input-number v-model="formData.retryTimes" :min="0" :controls="false"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="异常处理结束后是否恢复运行：" label-width="200px">
              <el-radio-group v-model="formData.continued">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="flow-stage-box">
        <flow-stage ref="flowStage" :list="flowStageList" />
        <operate-panel @confirm="handleOperate" />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button  @click="closeDialog">取消</el-button></el-button>
      <el-button type="primary" @click="submit">确 定</el-button>

    </span>
  </el-dialog>
</template>

<script>
import FlowStage from './FlowStage'
import OperatePanel from './OperatePanel'
import FlowStageDialogMixins from '@/mixins/flow_stage_dialog_mixins'
export default {
  mixins: [FlowStageDialogMixins],
  name: 'FlowStageErrorDialog',
  components: {
    FlowStage,
    OperatePanel
  },
  data() {
    return {
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    errorHandler: {
      type: Object,
      default() {
        return {
        }
      }
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
      if (val) {
        this.formData = this.errorHandler
        this.flowStageList = this.errorHandler.subNodes || []
      } else {
        this.haveLog = false
        this.formData.continued = false
      }
    }
  },
  methods: {
    submit() {
      this.flag = true
      this.verifyRequired(this.flowStageList)
      if (!this.flag) {
        return this.flag
      }
      const data = {
        ...this.formData,
        subNodes: this.flowStageList
      }
      this.$emit('confirm', data)
      this.dialogVisible = false
    },
    closeDialog() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-input-number {
    width: 100%;
    /deep/ input {
      text-align: left;
    }
  }
  .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 {
    position: absolute;
    right: 10px;
    font-size: 24px;
  }
</style>
