<template>
	<el-dialog
		title="任务延期"
		:visible.sync="delayDialog"
		:close-on-click-modal="false"
	>
		<table cellspacing="0" cellpadding="0" border="0" class="form-table">
			<tbody>
				<tr>
					<th>时间计算方式：</th>
					<td>
						<span v-if="dueTime.dateType == 'worktime'">工作日</span>
						<span v-if="dueTime.dateType == 'caltime'">日历日</span>
					</td>

					<th>已用时间：</th>
					<td>
						<span style="color: black;">{{ percent }}</span>
					</td>
				</tr>
				<tr>
					<th>任务开始时间：</th>
					<td>
						{{ dueTime.startTime | dateformat('YYYY-MM-DD HH:mm:ss') }}
					</td>

					<th>到期时间：</th>
					<td>
						{{ dueTime.expirationDate | dateformat('YYYY-MM-DD HH:mm:ss') }}
					</td>
				</tr>
				<tr>
					<th> <span class="xh-star">*</span>增加任务时间（小时）： </th>
					<td colspan="3">
						<el-input-number v-model="addDueTime" :min="0"></el-input-number>
					</td>
				</tr>
				<tr>
					<th> <span class="xh-star">*</span>预计到期时间： </th>
					<td colspan="3">
						<span v-if="expirationDate2">{{
							expirationDate2 | dateformat('YYYY-MM-DD HH:mm:ss')
						}}</span>
					</td>
				</tr>
				<tr>
					<th style="width: 160px;">
						<span class="xh-star">*</span>延期说明：
					</th>
					<td colspan="3">
						<OpinionText ref="opinionText" />
					</td>
				</tr>
				<tr>
					<th style="width: 160px;">附件上传：</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';
export default {
	name: 'taskToDelay',
	props: ['taskId'],
	components: { OpinionText, FileUpload },
	data() {
		return {
			delayDialog: false,
			percent: '', //已用时间
			addDueTime: 0, //延期时间（小时）
			expirationDate2: '', //延期后的时间 yyyy-mm-dd HH:mm:ss
			id: '',
			confirmData: {},
			addMinute: 0, //延期时间（分钟）
		};
	},
	watch: {
		addDueTime: function (newVal, oldVal) {
			if (newVal != 0) {
				this.addMinute = newVal * 60;
				let data = { id: this.id, time: newVal * 60 };
				this.$store
					.dispatch('storeProcess/getExpirationDate', data)
					.then(data => {
						this.expirationDate2 = data;
					});
			} else {
				this.addMinute = 0;
				this.expirationDate2 = '';
			}
		},
	},
	computed: mapState({
		dueTime: state => state.storeProcess.dueTime,
	}),
	methods: {
		//鼠标点击页面其他其他位置不关闭弹框
		handleClose(done) {
			this.delayDialog = true;
			this.$store
				.dispatch('storeProcess/bpmTaskDueTime', this.taskId)
				.then(data => {
					this.confirmData = data;
					this.id = data.id;
					let percent =
						((data.dueTime - data.remainingTime) * 100) / data.dueTime;
					this.percent = parseFloat(percent.toFixed(2));
					if (percent > 100) {
						this.percent = 100;
					}
					this.percent = this.percent + '%';
				});
		},
		//取消
		cancel() {
			this.delayDialog = false;
		},
		//确认
		confirm() {
			if (this.addDueTime == 0) {
				Message.warning('请填写延期时间');
				return;
			} else if (this.$refs.opinionText.getOpinion() == '') {
				Message.warning('请填写延期说明');
				return;
			}
			let files = '';
			if (this.$refs.fileUpload.getFiles() != '') {
				files = JSON.stringify(this.$refs.fileUpload.getFiles());
			}
			let data = {
				id: this.confirmData.id,
				parentId: this.confirmData.parentId,
				instId: this.confirmData.instId,
				dateType: this.confirmData.dateType,
				taskId: this.confirmData.taskId,
				dueTime: this.confirmData.dueTime,
				addDueTime: this.addMinute,
				startTime: this.confirmData.startTime,
				expirationDate: this.confirmData.expirationDate,
				remainingTime: this.confirmData.remainingTime,
				status: this.confirmData.status,
				userId: this.confirmData.userId,
				userName: this.confirmData.userName,
				isNew: this.confirmData.isNew,
				createTime: this.confirmData.createTime,
				remark: this.$refs.opinionText.getOpinion(),
				fileId: files,
			};
			this.$store.dispatch('storeProcess/dueTimeSave', data).then(() => {
				this.delayDialog = false;
				utils.reload();
			});
		},
	},
};
</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>
