<template>
	<div class="approve_box">
		<div class="btnArea">
			<el-button type="primary" size="small" @click="agree()" v-if="status === 'deal'">同意</el-button>
			<el-button type="primary" size="small" @click="refuse()" v-if="status === 'deal'">驳回</el-button>
			<el-button type="primary" size="small" @click="cancel">关闭</el-button>
		</div>
		<div class="formArea" v-if="status !== 'track'">
			<div class="formArea_title">审批信息</div >
			<el-form ref="form" :model="form" label-width="65px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="申请人">
							<el-input v-model="form.applicant" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="12">
						<el-form-item label="申请日期">
							<el-input v-model="form.startTime" :disabled="true"></el-input>
						</el-form-item>
					</el-col> -->
					<!-- <el-col :span="12">
						<el-form-item label="结束时间">
							<el-date-picker v-model="form.endTime" type="datetime" :disabled="true"></el-date-picker>
						</el-form-item>
					</el-col> -->
				</el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="开始时间">
                            <el-input v-model="form.startTime" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="结束时间">
                            <el-input v-model="form.endTime" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="结束时间">
                            <el-date-picker v-model="form.endTime" type="datetime" :disabled="true"></el-date-picker>
                        </el-form-item>
                    </el-col> -->
                </el-row>
				<el-form-item label="申请理由">
					<el-input v-model="form.reason" type="textarea" :disabled="true" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
				</el-form-item>
				<el-form-item label="批复意见" v-if="status === 'deal'">
					<el-input v-model="form.approveOpinion" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<div class="processArea" v-if="status !== 'track'">
			<div class="formArea_title">流程信息</div >
			<div class="contract-operate_recodeMain" style="height: auto; padding: 15px">
				<ul>
					<li v-for="item in processInfo">
						<p>{{item.createTime}}</p>
						<div class="process_info">
							<span>{{item.userName}}&nbsp;&nbsp;在&nbsp;&nbsp;[{{item.createTime}}]&nbsp;&nbsp;开始处理&nbsp;&nbsp;[{{item.taskName}}]&nbsp;&nbsp;环节<br>&nbsp;&nbsp;处理意见:&nbsp;&nbsp;[{{item.comment.length > 0 ? item.comment[0].message : ''}}]<br>&nbsp;&nbsp;结束时间:&nbsp;&nbsp;[{{item.comment.length > 0 ? item.comment[0].time : ''}}]</span>
						</div>
					</li>
				</ul>
            </div>
		</div>
		<div class="processArea" v-if="status === 'track'">
			<div class="formArea_title">{{status === 'track' ? '流程图' : '流程跟踪'}}</div >
			<div style="min-height: 600px; padding: 10vh 20%;">
				<img
					:src="'/icore.icp.web/pass/act/v1/act/queryProImg/' + form.instanceId"
					alt=""
				>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				status: '',
				userId: '',
				instanceId: '',
				taskId: '',
                entrust: '', // 别人委托给我的任务
				form: {
					userId:'',
					instanceId: '',
					applicant: '',
					startTime: '',
					endTime: '',
					reason: '',
					approveOpinion: ''
				},
                userMap: {},
				processInfo: [
        // {
        //     "assignee": "admin",
        //     "businessKey": "ggg.aaa",
        //     "businessMap": {
        //         "reason": "世界那么大，我想去看看",
        //         "instanceId": "477641",
        //         "formKey": "ggg",
        //         "roleId": "superadmin",
        //         "businessKey": "ggg.aaa",
        //         "objId": "aaa",
        //         "businessId": "aaa",
        //         "id": "aaa",
        //         "businessPo": {},
        //         "userId": "admin",
        //         "taskId": "482510",
        //         "status": "3"
        //     },
        //     "comment": [
        //         {
        //             "action": "AddComment",
        //             "deleted": false,
        //             "fullMessage": "用户提交申请。",
        //             "fullMessageBytes": "55So5oi35o+Q5Lqk55Sz6K+344CC",
        //             "id": "477664",
        //             "inserted": false,
        //             "message": "用户提交申请。",
        //             "messageParts": [
        //                 "用户提交申请。"
        //             ],
        //             "persistentState": "org.activiti.engine.impl.persistence.entity.CommentEntityImpl",
        //             "processInstanceId": "477641",
        //             "taskId": "477662",
        //             "time": "2020-01-11 09:58:57",
        //             "type": "comment",
        //             "updated": false,
        //             "userId": "admin"
        //         }
        //     ],
        //     "createTime": "2020-01-11 09:58:57",
        //     "endTime": null,
        //     "id": "477662",
        //     "instanceId": "477641",
        //     "procDef": {
        //         "category": null,
        //         "deploymentId": null,
        //         "deploys": null,
        //         "description": null,
        //         "diagramResourceName": null,
        //         "id": null,
        //         "key": null,
        //         "name": "测试",
        //         "resourceName": null,
        //         "startFormKey": false,
        //         "suspended": false,
        //         "tenantId": null,
        //         "version": 8
        //     },
        //     "startTime": "2020-01-11 09:58:57",
        //     "startUser": "admin",
        //     "status": "1",
        //     "taskId": "477662",
        //     "taskName": "用户申请"
        // },
        // {
        //     "assignee": "665585450286714880",
        //     "businessKey": "ggg.aaa",
        //     "businessMap": {
        //         "reason": "世界那么大，我想去看看",
        //         "instanceId": "477641",
        //         "formKey": "ggg",
        //         "roleId": "superadmin",
        //         "businessKey": "ggg.aaa",
        //         "objId": "aaa",
        //         "businessId": "aaa",
        //         "id": "aaa",
        //         "businessPo": {},
        //         "userId": "admin",
        //         "taskId": "482510",
        //         "status": "3"
        //     },
        //     "comment": [
        //         {
        //             "action": "AddComment",
        //             "deleted": false,
        //             "fullMessage": "好的，去吧年轻人！",
        //             "fullMessageBytes": "5aW955qE77yM5Y675ZCn5bm06L275Lq677yB",
        //             "id": "482504",
        //             "inserted": false,
        //             "message": "好的，去吧年轻人！",
        //             "messageParts": [
        //                 "好的，去吧年轻人！"
        //             ],
        //             "persistentState": "org.activiti.engine.impl.persistence.entity.CommentEntityImpl",
        //             "processInstanceId": "477641",
        //             "taskId": "477674",
        //             "time": "2020-01-11 10:11:51",
        //             "type": "comment",
        //             "updated": false,
        //             "userId": null
        //         }
        //     ],
        //     "createTime": "2020-01-11 09:58:57",
        //     "endTime": null,
        //     "id": "477674",
        //     "instanceId": "477641",
        //     "procDef": {
        //         "category": null,
        //         "deploymentId": null,
        //         "deploys": null,
        //         "description": null,
        //         "diagramResourceName": null,
        //         "id": null,
        //         "key": null,
        //         "name": "测试",
        //         "resourceName": null,
        //         "startFormKey": false,
        //         "suspended": false,
        //         "tenantId": null,
        //         "version": 8
        //     },
        //     "startTime": "2020-01-11 09:58:57",
        //     "startUser": "admin",
        //     "status": "1",
        //     "taskId": "477674",
        //     "taskName": "二级审批"
        // },
        // {
        //     "assignee": "admin",
        //     "businessKey": "ggg.aaa",
        //     "businessMap": {
        //         "reason": "世界那么大，我想去看看",
        //         "instanceId": "477641",
        //         "formKey": "ggg",
        //         "roleId": "superadmin",
        //         "businessKey": "ggg.aaa",
        //         "objId": "aaa",
        //         "businessId": "aaa",
        //         "id": "aaa",
        //         "businessPo": {},
        //         "userId": "admin",
        //         "taskId": "482510",
        //         "status": "3"
        //     },
        //     "comment": [
        //         {
        //             "action": "AddComment",
        //             "deleted": false,
        //             "fullMessage": "我也支持！",
        //             "fullMessageBytes": "5oiR5Lmf5pSv5oyB77yB",
        //             "id": "482511",
        //             "inserted": false,
        //             "message": "我也支持！",
        //             "messageParts": [
        //                 "我也支持！"
        //             ],
        //             "persistentState": "org.activiti.engine.impl.persistence.entity.CommentEntityImpl",
        //             "processInstanceId": "477641",
        //             "taskId": "482510",
        //             "time": "2020-01-11 10:20:01",
        //             "type": "comment",
        //             "updated": false,
        //             "userId": null
        //         }
        //     ],
        //     "createTime": "2020-01-11 10:11:51",
        //     "endTime": null,
        //     "id": "482510",
        //     "instanceId": "477641",
        //     "procDef": {
        //         "category": null,
        //         "deploymentId": null,
        //         "deploys": null,
        //         "description": null,
        //         "diagramResourceName": null,
        //         "id": null,
        //         "key": null,
        //         "name": "测试",
        //         "resourceName": null,
        //         "startFormKey": false,
        //         "suspended": false,
        //         "tenantId": null,
        //         "version": 8
        //     },
        //     "startTime": "2020-01-11 09:58:57",
        //     "startUser": "admin",
        //     "status": "1",
        //     "taskId": "482510",
        //     "taskName": "管理员审批"
        // }
    ]
			}
		},
		mounted () {
			// this.getApplicant(this.$route.query.data.userId);
            if (this.$route.query) {
                this.status = this.$route.query.type ? this.$route.query.type : '';
                this.userId = this.$route.query.userId ? this.$route.query.userId : '';
                this.userMap = this.$route.query.userMap ? JSON.parse(this.$route.query.userMap) : {};
                this.entrust = this.$route.query.entrust ? this.$route.query.entrust : '';
                if (this.$route.query.data) {
                    let data = JSON.parse(this.$route.query.data);
                    for (let i in this.form) {
                        this.form[i] = data[i];
                    }
                    this.form.applicant = data.userName;
                    this.instanceId = data.instanceId;
                    this.taskId = data.taskId;
                    this.getProcessInfo();
                }
            }
		},
		methods: {
			// 根据userId获取申请人姓名
			getApplicant (id) {
				this.axios.get('pass/v1/sysusers/' + id).then(async(res) => {
					if(res.code === '0') {
						this.form.applicant = res.data.userName;
					} else {
						this.$message.error(res.message)
					}
				});
			},
			// 获取流程实例所有审批信息
			getProcessInfo () {
				this.axios.get('pass/act/v1/act/getTaskComments/' + this.instanceId).then(async(res) => {
					if(res.code === '0') {
						this.processInfo = res.data;
                        for (let item of this.processInfo) {
                            if (item.assignee) {
                                item['userName'] = this.userMap[item.assignee].userName;
                            }
                        }
					} else {
						this.$message.error(res.message)
					}
				});
			},
			agree: function () {
				let params = {
					instanceId: this.instanceId,
					taskId: this.taskId
				}
				let remark = this.form.approveOpinion ? this.form.approveOpinion : '';
                if (this.entrust === '') {
                    this.axios.post('pass/act/v1/act/completeProcess?userId=' + this.userId + '&remark=' + remark, params, {individualType:'json'}).then((res) => {
                        if (res.code === '0') {
                            this.$message.success('已同意');
                            this.$router.push({ name: 'coverTask', params: {operate: 'success'}});
                        } else {
                            this.$message.error(res.message);
                        }
                    })
                } else {
                    this.axios.post('pass/act/v1/act/resolveTask?userId=' + this.userId + '&remark=' + remark, params, {individualType:'json'}).then((res) => {
                        if (res.code === '0') {
                            this.$message.success('已同意');
                            this.$router.push({ name: 'coverTask', params: {operate: 'success'}});
                        } else {
                            this.$message.error(res.message);
                        }
                    })
                }
			},
			refuse: function () {
				let reason = this.form.approveOpinion ? this.form.approveOpinion : ''
				this.axios.get('pass/act/v1/act/rejectProcess/?userId=' + this.userId + '&reason=' + reason + '&taskId=' + this.taskId, {individualType:'json'}).then((res) => {
					if (res.code === '0') {
						this.$message.success('已驳回');
						this.$router.push({ name: 'coverTask', params: { operate: 'success'}});
					} else {
						this.$message.error(res.message);
					}
				})
			},
			cancel () {
                this.$router.back();
			}
		}
	}
</script>

<style lang="less" scoped>
	.approve_box {
        min-width: 735px;
		margin: 0px 15px;
		.btnArea {
			margin-top: 15px;
			text-align: right;
		}
		.formArea {
			border: solid 1px #ddd;
			margin: 15px 0px 0px 0px;
			.formArea_title {
				height: 35px;
				border: solid 1px #ddd;
				padding: 5px 15px;
				font-size: large;
			}
			.el-form {
				margin: 15px;
			}
		}
		.processArea {
			.formArea_title {
				height: 35px;
				border: solid 1px #ddd;
				padding: 5px 15px;
				font-size: large;
			}
			margin-top: 15px;
			border: solid 1px #ddd;
		}
	}
    ul {
        margin: 15px;
    }
    
    li {
        position: relative;
        padding: 0 30px;
        list-style: none;
        border-left: 2px solid #ddd;
    }
    li:last-child {
    	border-left: 0px solid #ddd;
    }
    li:before {
        content: "";
        display: block;
        position: absolute;
        margin-left: -6px;
        top: 0;
        left: -2px;
        width: 14px;
        height: 14px;
        line-height: 14px;
        text-align: center;
        background: #ddd;
        color: #fff;
        font-size: 14px;
        border-radius: 50%;
    }
    li:last-child:before {
        content: "";
        display: block;
        position: absolute;
        margin-left: -6px;
        top: 0;
        left: 0px;
        width: 14px;
        height: 14px;
        line-height: 14px;
        text-align: center;
        background: #ddd;
        color: #fff;
        font-size: 14px;
        border-radius: 50%;
    }
    .process_info {
    	height: auto;
    	min-width: 650px;
    	border: 1px solid #ddd;
    	display: table-cell;
    	vertical-align: middle;
    }
    span {
		margin: 10px;
		font-size: 14px;
	}
</style>