<template>
  <el-dialog
    title="流程终止"
    :visible.sync="endProcessDialog"
    :close-on-click-modal="false"
  >
    <table cellspacing="0" cellpadding="0" border="0" class="form-table">
      <tbody>
        <tr>
          <th style="width: 100px;">
            <span class="xh-star">*</span>终止原因：
          </th>
          <td colspan="3">
            <OpinionText ref="opinionText" />
          </td>
        </tr>
        <tr>
          <th style="width: 100px;">附件上传：</th>
          <td colspan="3">
            <FileUpload ref="fileUpload" />
          </td>
        </tr>
      </tbody>
    </table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm" size="small">确 定</el-button>
      <el-button @click="cancel" size="small">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import OpinionText from '@/components/common/opinionText.vue'
import FileUpload from '@/components/common/fileUpload.vue'
import {Message} from 'element-ui'
import utils from '@/utils.js'
import req from '@/request.js'
export default {
  name: 'taskToEndProcess',
  props: ['taskId'],
  components: {OpinionText, FileUpload},
  data() {
    return {
      endProcessDialog: false,
      token: utils.getUrlKey('token'),
      flowThis: '' //flowAction的this
    }
  },
  computed: mapState({
    currentUser: state => state.login.currentUser
  }),
  methods: {
    //鼠标点击页面其他其他位置不关闭弹框
    handleClose(_this) {
      this.flowThis = _this
      this.endProcessDialog = true
    },
    //执行前置脚本
    runBeforeScript() {
      let _this = this
      let item = utils.indexOfList(
        _this.flowThis.rowsBtn,
        'alias',
        _this.flowThis.btnAlias
      )
      return _this.tempScript(item.beforeScript)
    },
    //执行前置脚本
    tempScript(script) {
      let _this = this
      let _req = req
      let boData = _this.flowThis.$refs.formContent.data
      let tempScript =
        'var tempFunction = function(_req,data,_this){ ' + script + '};'
      let result = eval(tempScript + 'tempFunction(_req,boData,_this);')
      if (result && result.then && typeof result.then == 'function') {
        return result
      }
      if (result === false) return false
      return true
    },
    //取消
    cancel() {
      this.endProcessDialog = false
    },
    //确认
    confirm() {
      if (this.$refs.opinionText.getOpinion() == '') {
        Message.warning('请填写终止原因')
        return
      }
      let _this = this
      let scriptResult = this.runBeforeScript()
      //执行前置脚本返回false时终止按钮操作
      if (scriptResult === false) return
      //执行前置脚本返回的接口时先执行前置事件接口
      if (scriptResult.then && typeof scriptResult.then == 'function') {
        scriptResult.then(
          () => {
            //接口返回成功则正常执行按钮操作
            _this.funcDoNext()
          },
          fail => {
            //接口返回失败则终止按钮操作，并给与提示
            _this.$message.warning(fail)
            return
          }
        )
      } else {
        //执行前置脚本返回true时正常执行按钮操作
        _this.funcDoNext()
      }
    },
    funcDoNext() {
      let files = ''
      if (this.$refs.fileUpload.getFiles() != '') {
        files = JSON.stringify(this.$refs.fileUpload.getFiles())
      }
      this.$store.dispatch('login/validAndCompletedCurrent').then(() => {
        let data = {
          taskId: this.taskId,
          endReason: this.$refs.opinionText.getOpinion(),
          messageType: 'inner',
          account: this.currentUser.account,
          files: files,
          busDataObjectNode: {test: '我是测试数据,请在这里封装您需要的数据'}
        }
        this.$store.dispatch('storeProcess/doEndProcess', data).then(() => {
          this.endProcessDialog = false
          if (this.token != null) {
            window.close()
          } else {
            //终止流程后返回到待办页面
            // this.$router.push("/v-flow/v-todo");
            // this.$router.go(-1);
            if (window.location.search.indexOf('close') != -1) {
              window.close()
            } else {
              this.$router.push('/platLayout/toDoTask')
            }
          }
        })
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.el-dialog__footer {
  padding: 10px 20px;
  padding-top: 10px;
  text-align: right;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.form-table {
  width: 100%;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
}

.form-table th {
  text-align: right;
  color: #666;
}

.form-table th > span {
  color: #f00;
}

.form-table th, .form-table td {
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  padding: 10px;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

.xh-star {
  color: red;
}
</style>
