<template>
  <div class="from-clues">
    <div class="invalid-title">
        <i class="el-icon-question invalid-icon"></i>
        <div class="invalid-body">您是否确定终止该业务办理？</div>
    </div>
    <div class="invalid-reson">终止原因：</div>
    <el-input v-model="stopMessage" placeholder="请输入终止原因" type="textarea" :rows="4"></el-input>
    <el-button style="float:right">取消</el-button>          
    <el-button type="primary" @click="onSubmit" style="float:right">退件</el-button>
  </div>
</template>

<script>
import { stopTask } from "@/api/fqsq.js"
export default {
  props: {
    formData: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      stopMessage: ''
    }
  },
  methods: {
    onSubmit () {
      stopTask({
          bsmSlsq: this.formData.bsmSlsq,
          bestepid: this.formData.bestepid,
          stopMessage: this.stopMessage
      }).then(res => {
          this.$message.success('终止成功')
          setTimeout(() => {
            window.opener.location.reload(); //刷新父窗口
            window.close();
            this.$emit('input', false)
          }, 1000);
      })
    },
  }
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.invalid-title {
    display: flex;
    align-content: center;

    .invalid-icon {
        color: rgb(254, 148, 0);
        font-size: 34px;
        margin-right: 10px;
    }

    .invalid-body {
        line-height: 40px;
        margin-bottom: 10px;
    }
}

.invalid-reson {
    margin-bottom: 10px;
}

.dialog-footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

</style>