<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '我发起流程',
	},
	}
</route>
<template>
	<PageLayout nav-title="我发起流程">
		<view class="container">
			<template v-for="(item, i) in list" :key="i">
				<wd-card :title="item.bpmBizTitle" title-bold border-radius="8" use-footer-slot @click="goToPage(item)">
					<wd-row class="row">
						<wd-col :span="6">
							<text>申请理由:</text>
						</wd-col>
						<wd-col :span="18">
							{{item.bpmBizTitle}}
						</wd-col>
					</wd-row>
					<wd-row class="row">
						<wd-col :span="6">
							<text>流程名称:</text>
						</wd-col>
						<wd-col :span="18">
							{{item.prcocessDefinitionName}}
						</wd-col>
					</wd-row>
					<wd-row class="row">
						<wd-col :span="6">
							<text>发起人:</text>
						</wd-col>
						<wd-col :span="18">
							{{item.startUserName}}
						</wd-col>
					</wd-row>
					<wd-row class="row">
						<wd-col :span="6">
							<text>开始时间:</text>
						</wd-col>
						<wd-col :span="18">
							{{item.startTime}}
						</wd-col>
					</wd-row>
					<wd-row class="row" v-show="item.endTime">
						<wd-col :span="6">
							<text>结束时间:</text>
						</wd-col>
						<wd-col :span="18">
							{{item.endTime}}
						</wd-col>
					</wd-row>
					<wd-row style="padding-top: 10px;">
						<view v-if="!item.endTime">
							<wd-button @click.stop="callBackProcess(item.processInstanceId)">取回流程</wd-button>
						</view>
					</wd-row>
				</wd-card>
			</template>
		</view>
	</PageLayout>
</template>

<script setup>
	import {
		myApplyProcessListApi,
		callBackProcessApi,
	} from '@/api/process'
	import {
		useToast,
		useMessage
	} from 'wot-design-uni'
	const toast = useToast()
	const message = useMessage()
	let pageNo = 1
	let pageSize = 10
	const list = ref([])
	const taskInfo = ref({})
	
	const getList = () => {
		myApplyProcessListApi({
			pageNo,
			pageSize
		}).then((res) => {
			console.log(res)
			if (res.success) {
				list.value = [...list.value, ...res.result.records];
			}
		})
	}
	
	const goToPage = (item) => {
		uni.navigateTo({
			url: `/pages-process/taskHandle?data=history`,
			success: (res) => { //明文数据传输改为加密
				res.eventChannel.emit('taskData', JSON.stringify(item))
			}
		})
	}
	
	/**流程取回*/
	const callBackProcess = (id) => {
		message
			.confirm({
				msg: '确认取回流程吗？',
				title: '提示',
			})
			.then(() => {
				callBackProcessApi({
					processInstanceId: id
				}).then((res) => {
					if (res.success) {
						list.value = []
						getList()
						toast.success(res.message)
					}else{
						toast.warning(res.message)
					}
				})
			})
		
	}

	onReachBottom(() => {
		pageNo++
		getList()
	})

	onShow(() => {
		list.value = []
		pageNo = 1
		pageSize = 10
		getList()
	})
</script>

<style lang="scss" scoped>
	.container {
		padding: 5px 0 5px;
		min-height: 100vh;
		background-color: #f7f7f7;
	}

	.row {
		color: #666666;
		padding: 5px 0 5px 0;
	}

	::v-deep .wd-card__title-content {
		border-bottom: 1px solid #efefef;
	}
</style>