<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-input v-model="loginName" placeholder="loginName" clearable></el-input>
		</el-card>

		<el-card :body-style="cardBodyStyle">
			<el-input v-model="flowId" placeholder="flowId" clearable style="width: 150px;"></el-input>
			<el-input v-model="title" placeholder="title" clearable style="width: 150px;"></el-input>
			<el-button type="primary" @click="start">启动</el-button>
			<el-input v-model="workId" placeholder="workId" clearable style="width: 150px;"></el-input>
			<el-input v-model="trackId" placeholder="trackId" clearable style="width: 150px;"></el-input>
			<el-button type="primary" @click="submit">提交</el-button>

			<el-button type="primary" @click="comfirmSubmit">确认提交</el-button>
		</el-card>


		<el-card :body-style="cardBodyStyle">
			<el-button type="primary" @click="todo">待办列表</el-button>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableData" border highlight-current-row>
				<el-table-column prop="flowName" label="流程名称" width="200" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="title" label="标题" width="200" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="nodeName" label="当前节点" width="200" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="workId" label="workId" width="200" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="trackId" label="trackId" width="200" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="subjectionId" label="subjectionId" width="200" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>



				<el-table-column label="操作" header-align="center" align="center">
					<template #default="scope">
						<el-button type="warning" plain size="small" circle @click="handleDetail( scope.row )"><el-icon>
								<Edit />
							</el-icon></el-button>
						<!-- <el-button type="danger" plain size="small" circle
							@click="handleDelete( scope.row )"><el-icon>
								<Delete />
							</el-icon></el-button> -->
					</template>
				</el-table-column>
			</el-table>
		</el-card>


		<el-dialog :close-on-click-modal="false" draggable title="编辑" v-model="dialogVisible" width="80%" top="5vh">

			<el-card :body-style="cardBodyStyle">
				<el-button v-for="item in detail.flowButtons" :key="item.buttonId" type="primary"
					@click="handleClick(item)">{{item.buttonName}}
				</el-button>
			</el-card><el-card :body-style="cardBodyStyle">
				<iframe :src="urlFrame" width="100%" height="600px" ref="iframe"></iframe>
			</el-card>
			<el-card :body-style="cardBodyStyle">
				<el-table :data="tableDataHistory" border highlight-current-row>
					<el-table-column prop="actionname" label="操作名称" width="200" header-align="center" align="center"
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="actiontime" label="操作时间" width="200" header-align="center" align="center"
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="comments" label="审批意见" width="200" header-align="center" align="center"
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="nodename" label="节点名称" width="200" header-align="center" align="center"
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="username" label="用户名" width="200" header-align="center" align="center"
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="memo" label="备注" header-align="center" align="center" show-overflow-tooltip>
					</el-table-column>
				</el-table>
			</el-card>

		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)

	onMounted(() => {

	})

	const loginName = ref('user21')

	const flowId = ref('litaiTest')
	const title = ref('李泰测试')
	const workId = ref('')
	const trackId = ref('')
	const subjectionId = ref('')

	const start = () => {
		var url = 'workflow/Huizheng/create'
		var param = {
			loginName: loginName.value,
			flowId: flowId.value,
			title: title.value
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				// workId.value = response.data.data.workId
				// trackId.value = response.data.data.flowNode.trackId
				// ElMessage.success('操作成功！' + response.data.msg)
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}
	const tableData = ref([])

	const todo = () => {
		var url = 'workflow/Huizheng/todoList'
		var param = {
			loginName: loginName.value
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				tableData.value = response.data.data
				ElMessage.success('操作成功！' + response.data.msg)
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}


	const detail = ref({})
	const dialogVisible = ref(false)

	const urlFrame = ref('')


	const handleDetail = (row) => {

		workId.value = row.workId
		trackId.value = row.trackId
		subjectionId.value = row.subjectionId
		var url = 'workflow/Huizheng/open'
		var param = {
			loginName: loginName.value,
			workId: row.workId,
			trackId: row.trackId,
			subjectionId: row.subjectionId
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				dialogVisible.value = true
				detail.value = response.data.data
				history()
				// urlFrame.value =
				// 	'http://172.16.7.51:10028/horizon-workflow-boot/workflow/module/workflow/flow.info.html?workid=' +
				// 	row.workId + '&tenantCode=system&identfier=system'
					
					urlFrame.value =
						'http://172.16.7.51:10028/horizon-workflow-boot/workflow/module/designer/index.html?workid='+row.workId +'&showtype=2&dataid='+row.workId 
					
					
					
					
					
					
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}




	const submit = () => {
		var url = 'workflow/Huizheng/submit'
		var param = {
			loginName: loginName.value,
			workId: workId.value,
			trackId: trackId.value
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				ElMessage.success('操作成功！' + response.data.msg)
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}

	const comfirmSubmit = () => {
		var url = 'workflow/Huizheng/comfirmSubmit'
		var param = {
			loginName: loginName.value,
			workId: workId.value,
			trackId: trackId.value

		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				ElMessage.success('操作成功！' + response.data.msg)
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}


	const handleClick = (item) => {
		console.log(JSON.stringify(item))

		var url = 'workflow/Huizheng/action'
		var param = {
			loginName: loginName.value,
			workId: workId.value,
			trackId: trackId.value,
			subjectionId: subjectionId.value,
			operate: item.buttonId,
			operateClazz: item.buttonClass,
			operateFlag: '0',
			comment: '测试审批意见--是--否--同意',
			flowVars: JSON.stringify({
				flag: '1'
			})
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {

			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})






	}



	const tableDataHistory = ref([])
	const history = () => {
		var url = 'workflow/Huizheng/history'
		var param = {
			loginName: loginName.value,
			workId: workId.value,
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				tableDataHistory.value = response.data.data
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}
</script>