<template>
  <div class="approval-button-item termination-button">
    <el-button
      plain
      class="plain-danger-btn"
      :size="btnSize"
      :disabled="disabled"
      @click="handleTermination"
    >
      {{ name }}
    </el-button>
    <approval-dialog
      ref="approvalDialog"
      :dialog-title="$t('task.ProcessTermination')"
      :opinion-label="$t('task.TerminationReason')"
      :dialog-before-click="dialogBeforeClick"
      :alias="alias"
      @submit-form="handleSubmitForm"
    ></approval-dialog>
  </div>
</template>

<script>
  import { mapActions, mapState } from 'vuex'
  import ApprovalDialog from './ApprovalDialog'

  import approvalButton from '@/mixins/approvalButton'
  import { savaTermination } from '@/api/process'
  import { resultJudge } from '@/utils/event.js'
  export default {
    name: 'TerminationButton',
    components: {
      ApprovalDialog,
    },
    mixins: [approvalButton],

    computed: {
      ...mapState('user', ['account', 'username', 'userId', 'accessToken']),
    },
    methods: {
      ...mapActions('user', ['authentication']),
      async handleTermination() {
        let res = true
        if (this.beforeClick) {
          res = await resultJudge(this.beforeClick(this.alias))
        }
        if (!res) return
        this.$refs.approvalDialog.openDialog()
      },

      handleSubmitForm(dialogFormData, cb) {
        //获取执行前置脚本返回结果
        const preScriptResult = this.handlePreScript('endProcess')
        //前置脚本结果为false直接return
        if (!preScriptResult) return
        //执行前置脚本返回的接口时先执行前置事件接口
        if (
          preScriptResult.then &&
          typeof preScriptResult.then === 'function'
        ) {
          preScriptResult.then(
            () => {
              this.onSubmit(dialogFormData, cb)
            },
            (fail) => {
              //接口返回失败则终止按钮操作，并输出错误信息
              return this.$message.warning(fail)
            }
          )
        } else {
          //执行前置脚本返回true时继续提交
          this.onSubmit(dialogFormData, cb)
        }
      },
      onSubmit(dialogFormData, cb) {
        this.authentication({
          username: this.username,
          userId: this.userId,
          token: this.accessToken,
        }).then(() => {
          const params = {
            taskId: this.taskId,
            messageType: 'inner',
            files: dialogFormData.files,
            endReason: dialogFormData.opinion,
            busDataObjectNode: {},
          }
          savaTermination(params)
            .then((res) => {
              if (!res.state) return this.$message.warning(res.message)
              this.filterHasHandleTask()
              this.isDialog
                ? this.$emit('close-dialog')
                : this.$router.push('/matter/myTask?tabActiveName=todo')
              this.dialogAfterClick(this.alias)
            })
            .finally(() => {
              cb()
            })
        })
      },
    },
  }
</script>

<style lang="scss" scoped></style>