<template>
	<div style="text-align: center;">
		<div style="width:600px;float: left; margin: 10px;">

			<el-input v-model="queryProcessName" placeholder="请输入查询条件" style="width :300px;float: left;"></el-input>
			<el-button type="primary" @click="search">查询</el-button>
			<el-button type="primary" @click="handleAdd">新增</el-button>
		</div>

		<el-table :data="tableData" border style="width: 99%">
			<el-table-column prop="id" label="id" v-if="isShow" width="80">
			</el-table-column>
			<el-table-column prop="name" label="流程名称" width="180">
			</el-table-column>
			<el-table-column prop="key" label="流程Key" width="180">
			</el-table-column>
			<el-table-column prop="rev" label="版本号" width="80">
			</el-table-column>


			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
					<el-button size="mini" type="success" @click="handlePublish(scope.row.id)">部署</el-button>
					<el-button size="mini" type="" @click="handleHistory(scope.row)">历史版本</el-button>

				</template>
			</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-dialog title="流程设计" :visible.sync="dialogVisible" width="500px">
			<el-form :model="form" label-width="80px">
				<el-form-item label="流程名称" v-show="isShow">
					<el-input v-model="form.processName"></el-input>
				</el-form-item>
				<el-form-item label="流程Key">
					<el-input v-model="form.processKey"></el-input>
				</el-form-item>
				<el-form-item label="流程描述">
					<el-input v-model="form.processDescription"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSave">保存</el-button>
					<el-button @click="handleCancelSave">取消</el-button>

				</el-form-item>
			</el-form>

		</el-dialog>





	</div>
</template>

<script>
	import axios from '@/axios';
	import {
		mapState
	} from 'vuex' 
	export default {
		computed: {
			...mapState({
				serverName: state => state.app.serverName
			})
		},
		data() {
			return {
				//表格初始化参数
				tableData: [],
				mi: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [10, 50, 100, 200],
				pageSize: 10,
				//查询条件
				queryProcessName: '',
				//录入框
				dialogVisible: false,
				form: {
					processName: '',
					processKey: '',
					processDescription: ''
				},
				isShow: true,
				 activitiModeler:  '/modeler.html?modelId='
			}
		},
		//界面渲染完毕调用   初始化表格参数
		mounted() {
			this.getTableData()
		},
		methods: {
			// 获取table数据
			getTableData() {
				//console.log("获取table数据getTableData")
				var url = 'ProcessModel/query.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					processName: this.queryProcessName,
					userId: sessionStorage.getItem("userId")
				}
				axios.get(url, param).then(response => {
					this.tableData = response.data.list
					this.totalRows = response.data.total

				});
			},
			// 修改每页条数事件
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getTableData()
			},
			//保存按钮事件
			handleSave(row) {

				var url = 'ProcessModel/create.do'
				var param = {
					processName: this.form.processName,
					processKey: this.form.processKey,
					processDescription: this.form.processDescription,
					userId: sessionStorage.getItem("userId")
				}


				axios.post(url, param).then(response => {
					 //console.log(this.activitiModeler + response.data)
					window.open(this.serverName +this.activitiModeler + response.data)
					this.dialogVisible = false
					// 					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: '',
					processName: '',
					processKey: '',
				}
			},
			// 编辑按钮事件
			handleEdit(row) {
				// 				this.dialogVisible = true
				// 				this.form = {
				// 					id: row.id,
				// 					processName: row.processName,
				// 					processKey: row.processKey,
				// 
				// 				}
				window.open(this.serverName +this.activitiModeler  + row.id)
				//window.open('http://172.16.7.211:8080/thdemo/modeler.html?modelId=' + row.id)

			},
			// 删除按钮事件
			handleDelete(id) {
				this.$confirm('此操作将永久删除该, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					var url = 'ProcessModel/remove.do'
					var param = {
						modelId: 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()
			},
			handleHistory(row) {

				this.$router.push({
					path: '/process/deployment',
					query: {
						key: row.key
					},
					meta: {
						keepAlive: false
					}

				})
			},

			// 发布按钮事件
			handlePublish(id) {
				this.$confirm('确定发布该流程？, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					var url = 'ProcessModel/deployModel.do'
					var param = {
						modelId: id,
						userId: sessionStorage.getItem("userId")
					}
					axios.get(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: '已取消部署！'
					});
				});
			},
		},
		beforeRouteLeave(to, from, next) {
			console.log("beforeRouteLeave")
			to.meta.keepAlive = false;  
			next();
		}
	}
</script>
<style>
	
</style>
