<template>
	<div style="text-align: center;">
 
		<el-table :data="tableData" border style="width: 99%">
			<el-table-column prop="id" label="id" v-if="isShow" width="180">
			</el-table-column>
			<el-table-column prop="name" label="流程图名称" width="180">
			</el-table-column>
			<el-table-column prop="key" label="流程图Id" width="180">
			</el-table-column>
			<el-table-column prop="version" label="版本号" width="80">
			</el-table-column>
			<el-table-column prop="deploymentId" label="部署Id" width="80">
			</el-table-column>

			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleImg(scope.row)">流程图</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
					<el-button v-if="scope.row.suspensionState" size="mini" type="success" @click="handleActivate(scope.row)">激活</el-button>
					<el-button v-else size="mini" type="primary" @click="handleSuspend(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="isShow" width="1000px">
			<img :src="imgUrl"></img>
		</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: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [10, 50, 100, 200],
				pageSize: 10,
				isShow: false,

				imgBaseUrl:  '/ProcessDeployment/showImage.do?deploymentId=',
				imgUrl: ''
			}
		},
		mounted() {
			this.getTableData()
		},
		methods: {
			getTableData() {
				console.log('this.$route.query.key' + this.$route.query.key)
				var url = 'ProcessDeployment/query.do'
				var key = ''
				if (this.$route.query.key) {
					key = this.$route.query.key
				}

				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					key: this.$route.query.key,
					userId: sessionStorage.getItem("userId")
				}
				axios.get(url, param).then(response => {
					this.tableData = response.data.list
					this.totalRows = response.data.total

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

					var url = 'ProcessDeployment/remove.do'
					var param = {
						deploymentId: row.deploymentId,
						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: '已取消删除'
					});
				});
			},


			handleSuspend(row) {
				this.$confirm('此操作挂起该流程, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					var url = 'ProcessDeployment/suspend.do'
					var param = {
						definitionId: row.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: '已取消挂起 '
					});
				});
			},
			handleActivate(row) {
				this.$confirm('此操作将激活该流程, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					var url = 'ProcessDeployment/activate.do'
					var param = {
						definitionId: row.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: '已取消激活'
					});
				});
			},
			// 修改每页条数事件
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getTableData()
			},

			handleImg(row) {
				//window.open(this.imgUrl + row.deploymentId)
				this.isShow = true
				this.imgUrl = this.serverName + this.imgBaseUrl + row.deploymentId
			},
		},


	}
</script>
