<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) {
			window._this = this;
			window._req = req;
			window.boData = _this.flowThis.$refs.formContent.data;
			console.debug(_req, boData);
			let tempScript =
				'var tempFunction = function(_req,data,_this){ ' + script + '};';
			let result = window.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);
					}
				});
			});
		},
	},
};
</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>
