<template>
	<div style="text-align: center;">
		<el-tabs type="border-card">
			<el-tab-pane>
				<span slot="label"><i class="el-icon-date"></i> 业务详情</span>
				<el-row v-for="item in tesCol" :key="item.id" :gutter="20">
					<el-col :span="6">
						<div class="grid-content bg-purple">{{item.name}}</div>
					</el-col>
					<el-col :span="18">
						<div class="grid-content bg-purple">{{ccc[`${item.code}`]}}</div>
					</el-col>
				</el-row>
			</el-tab-pane>
			<el-tab-pane>
				<span slot="label"><i class="el-icon-bell"></i> 审批流程</span>


				<el-table :data="tableData" border style="width: 99%">
					<el-table-column prop="id" label="id" v-if="isShow" width="100">
					</el-table-column>
					<el-table-column prop="name" label="流程名称" width="180">
					</el-table-column>

					<el-table-column prop="startTime" label="开始时间" width="100">
					</el-table-column>
					<el-table-column prop="endTime" label="结束时间" width="100">
					</el-table-column>
					<el-table-column prop="duration" label="处理时间" width="100">
					</el-table-column>
					<el-table-column prop="assignee" label="处理人" width="100">
					</el-table-column>
					<el-table-column prop="message" label="批注" width="100">
					</el-table-column>


				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
				 :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
				</el-pagination>

			</el-tab-pane>
			<el-tab-pane>
				<span slot="label"><i class="el-icon-picture"></i> 流程图</span>
				<img :src="imgUrl" />
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import axios from '@/axios';
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState({
				serverName: state => state.app.serverName
			})
		},
		data() {
			return {
				//表格初始化参数
				tableData: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [10, 50, 100, 200],
				pageSize: 10,
				//查询条件
				queryProcessName: '',
				//录入框
				dialogVisible: false,

				isShow: true,
				tesCol: [{
					code: 'id',
					name: '编号'
				}, {
					code: 'title',
					name: '标题'
				}, {
					code: 'content',
					name: '类型'
				}, {
					code: 'processInstanceId1',
					name: '流程实例ID'
				}],
				ccc: {
					"content": "testProcess2",
					"id": "D206CBD96E8141AFB4ADCB5045018CE9",
					"processInstanceId1": "72501",
					"title": "我要报销"
				},
				imgBaseUrl: '/ProcessTask/showHistoryImg.do?processInstanceId=',
				imgUrl: ''
			}
		},
		//界面渲染完毕调用   初始化表格参数
		mounted() {

			this.getTableData()
			this.getImg()
		},
		methods: {
			// 获取table数据
			getTableData() {
				//console.log("123")
				//console.log(this.$route.query.instanceId)
				var url = 'ProcessHistory/queryHistoryActInst.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					processInstanceId: this.$route.query.instanceId,
					userId: sessionStorage.getItem("userId")
				}
				axios.get(url, param).then(response => {
					//console.log(response)
					this.tableData = response.data.list
					this.totalRows = response.data.total
				});
			},
			getImg() {
				this.imgUrl = this.serverName + this.imgBaseUrl + this.$route.query.instanceId
				console.log(this.imgUrl)
			},
			// 修改每页条数事件
			handleSizeChange(val) {
				//console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				//console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getTableData()
			},
			//保存按钮事件
			handleSave(row) {

				var url = 'LeaveTest/save.do'
				var param = {
					id: this.form.id,
					leaveName: this.form.leaveName,
					leaveBeginDate: this.form.leaveBeginDate,
					leaveEndDate: this.form.leaveEndDate,
					leaveDays: this.form.leaveDays,
					leaveReason: this.form.leaveReason,
					processKey: 'testProcess1',
					userId: sessionStorage.getItem("userId")
				}
				axios.post(url, param).then(response => {
					if (response.data === 'success') {
						this.$message({
							type: 'success',
							message: '保存成功!',
						});
						this.getTableData()
						this.dialogVisible = false
					} else {
						this.$message({
							type: 'error',
							message: '保存失败' + response.data
						});
					}
				});



			},
			//保存取消按钮事件   关闭编辑对话框
			handleCancelSave(row) {
				this.dialogVisible = false
			},

			// 新增按钮事件
			handleAdd() {
				this.dialogVisible = true
				this.form = {
					id: '',
					leaveName: '',
					leaveBeginDate: '',
					leaveEndDate: '',
					leaveDays: '',
					leaveReason: ''
				}
			},
			// 编辑按钮事件
			handleEdit(row) {
				this.dialogVisible = true
				this.form = {
					id: row.id,
					leaveName: row.leaveName,
					leaveBeginDate: row.leaveBeginDate,
					leaveEndDate: row.leaveEndDate,
					leaveDays: row.leaveDays,
					leaveReason: row.leaveReason
				}
			},
			// 删除按钮事件
			handleDelete(id) {
				this.$confirm('此操作将永久删除该, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					var url = 'LeaveTest/remove.do'
					var param = {
						id: id,
						userId: sessionStorage.getItem("userId")

					}
					axios.post(url, param).then(response => {
						if (response.data === 'success') {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
							this.getTableData()
						} else {
							this.$message({
								type: 'error',
								message: '删除失败' + response.data
							});
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 查询按钮事件
			search() {
				this.getTableData()
			},
			// 发布按钮事件
			handlePublish(id) {
				this.$confirm('确定发布该流程？, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					var url = 'LeaveTest/publish.do'
					var param = {
						id: id,
						userId: sessionStorage.getItem("userId")
					}
					axios.post(url, param).then(response => {
						if (response.data === 'success') {
							this.$message({
								type: 'success',
								message: '发布成功!',
							});
							this.getTableData()
						} else {
							this.$message({
								type: 'error',
								message: '发布失败' + response.data
							});
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消发布'
					});
				});
			},
		}
	}
</script>
<style>
	
</style>
