<template>
	<div>
		<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.code}}</div>
					</el-col>
					<el-col :span="18">
						<div class="grid-content bg-purple">{{item.name}}</div>
					</el-col>
				</el-row> -->
				<component :is="compName"></component>
			</el-tab-pane>
			<el-tab-pane>
				<span slot="label"><i class="el-icon-bell"></i> 审批流程</span>
				<el-form :model="form" label-width="80px" style="margin-right: 10px;">
					<el-form-item label="审批意见">
						<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入内容" v-model="comment">
						</el-input>
					</el-form-item>
					<el-form-item label="审批操作">
						<el-button type="success" @click="handleComplete">通过</el-button>
						<el-button type="danger" @click="handleBack">驳回</el-button>
						<!-- <el-button type="primary" @click="handleCancel">取消</el-button> -->
					</el-form-item>
				</el-form>


				<el-table :data="tableData" border style="width: 99%">

					<el-table-column prop="name" label="节点名称" width="180">
					</el-table-column>
					<el-table-column prop="assignee" label="处理人" width="100">
					</el-table-column>
					<el-table-column prop="startTime" label="开始时间" width="180">
					</el-table-column>
					<el-table-column prop="endTime" label="结束时间" width="180">
					</el-table-column>
					<el-table-column prop="message" label="处理意见" width="180">
					</el-table-column>

					<el-table-column prop="id" label="id" width="100">
					</el-table-column>
					<el-table-column prop="processInstanceId" label="流程实例ID" 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 Vue from 'vue';
	import axios from '@/axios'
	import {
		mapState
	} from 'vuex'


	export default {
		computed: {
			...mapState({
				serverName: state => state.app.serverName
			}),
			// 			comp: function() {
			// 				console.log(this.compName)
			// 				return require(`./${this.compName}`)
			// 			}
		},

		data() {
			return {
				//表格初始化参数
				tableData: [],
				type: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [10, 50, 100, 200],
				pageSize: 10,
				//查询条件
				comment: '',
				//录入框
				dialogVisible: false,
				form: {
					id: '',
					title: '',
					content: '',
					processInstanceId1: ''
				},
				tesCol: [],
				ccc: {
					"content": "testProcess2",
					"id": "D206CBD96E8141AFB4ADCB5045018CE9",
					"processInstanceId1": "72501",
					"title": "我要报销"
				},
				imgBaseUrl: '/ProcessTask/showImg.do?processInstanceId=',
				imgUrl: '',
				current: 'first',
				comp: {
					'attr2': ''
				},
				compName: ''

			}
		},
		//界面渲染完毕调用   初始化表格参数
		mounted() {
			this.getBussiness()
			this.getTableData()
			this.getImg()
		},
		// 		computed: {
		// 			comp: function() {
		// 				console.log(this.compName)
		// 				return require(`./${this.compName}`)
		// 			}
		// 		},
		// 		  props: ['name'],


		methods: {
			registerComponent(templateName) {
				console.log(templateName)
				Vue.component(templateName, require(`@/view${templateName}`).default);
				//Vue.component(templateName,require(`@/view/develop/codemachine.vue`).default);
				//Vue.component(templateName,require('./../develop/'+'codemachine'+'.vue').default);
			},

			// 			registerComponent(templateName) {
			// 				return import(`./../dashComponent/${templateName}.vue`).then((component) => {
			// 					return Vue.extend(component)
			// 				})
			// 			,}
			// 获取table数据
			// 			getBussinessData() {
			// 				//console.log("获取table数据getTableData"+this.$route.query.instanceId)
			// 				var url = 'ProcessTask/queryBussinessData.do'
			// 				var param = {
			// 					processInstanceId: this.$route.query.instanceId,
			// 					userId: sessionStorage.getItem("userId")
			// 				}
			// 				axios.get(url, param).then(response => {
			// 					console.log("response" + response)
			// 					this.tesCol = response.data
			// 				});
			// 			},
			// 

			getBussiness() {
				//console.log("获取table数据getTableData"+this.$route.query.instanceId)
				var url = 'CodeMachine/queryBussiness.do'
				var param = {
					processDefinitionId: this.$route.query.processKey,
				}
				axios.get(url, param).then(response => {
					console.log("response" + response)
					this.compName = response.data.data.attr2
					this.registerComponent(response.data.data.attr2);

				});
			},

			// 获取table数据
			getTableData() {
				//console.log("获取table数据getTableData"+this.$route.query.instanceId)
				var url = 'ProcessHistory/queryHistoryTaskInst.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" + response)
					this.tableData = response.data.list
					this.totalRows = response.data.total

				});
			},
			getImg() {
				this.imgUrl = this.serverName + this.imgBaseUrl + this.$route.query.instanceId

			},
			handleComplete() {
				//console.log("获取table数据getTableData")
				var url = 'ProcessTask/complete.do'
				var param = {
					taskId: this.$route.query.taskId,
					comment: this.comment,
					flag: 0
				}
				axios.get(url, param).then(response => {
					this.getTableData()
				});
			},
			handleBack() {
				//console.log("获取table数据getTableData")
				var url = 'ProcessTask/complete.do'
				var param = {
					taskId: this.$route.query.taskId,
					userId: sessionStorage.getItem("userId"),
					flag: 1
				}
				axios.get(url, param).then(response => {
					this.getTableData()
				});
			},
			// 修改每页条数事件
			handleSizeChange(val) {
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				this.currentPage = val
				this.getTableData()
			},
		}
	}
</script>
<style>


	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
