<template>
	<view>
		<u-search  :show-action="false" v-model="searchForm.title" @change="inputWord" margin="20rpx 50rpx"></u-search>
		<view>
			<u-swipe-action>
				<u-swipe-action-item  v-for="(row) in dataList" @click="({index}) => commit(index, row)"  :key="row.id" :threshold="60" duration="500" 
				:options="row.code === 1?[ {
					text: '催办',
					style: {
						backgroundColor: '#3c9cff'
					}
				}, {
					text: '撤销',
					style: {
						backgroundColor: '#f56c6c'
					}
				}, {
					text: '历史',
					style: {
						backgroundColor: '#5ac725'
					}
				}]:row.code === 3 || row.code === 4 ?[{
					text: '历史',
					style: {
						backgroundColor: '#5ac725'
					}
				},{
					text: '编辑',
					style: {
						backgroundColor: '#3c9cff'
					}
				}]:[{
					text: '历史',
					style: {
						backgroundColor: '#5ac725'
					}
				}]">
				  <u-cell-group>
					  <u-cell @click="toDetail(row)">
						  <view slot="title" class="content">
								<view class="text-bold text-grey">
									<view class="ellipsis-description">
										标题：{{row.vars.title}}
									</view>
								</view>
								<view class="text-grey text-sm">
									<view class="ellipsis-description">
										 当前环节：{{row.taskName}}
									</view>
								</view>
								<view class="text-grey text-sm">
									执行时间：{{row.startTime | formatDate}}
								</view>
						  </view>
						  <view slot="right-icon">
							<u-tag  :text="row.status"  plain shape="circle" :type="row.level === 'danger'? 'error':row.level"></u-tag>
						  </view>
						</u-cell>
				  </u-cell-group>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		<u-loadmore :status="status"  @loadmore="loadmore" :line="true" />
		<u-gap height="20" bgColor="#fff"></u-gap>
		<u-back-top :scrollTop="0" mode="square"></u-back-top>
	</view>
</template>

<script>
	import taskService from "@/api/flowable/taskService"
	import processService from "@/api/flowable/processService"
	import userSelect from '@/components/user-select/user-select.vue'
	import pick from 'lodash.pick'
	export default {
		components:{
			userSelect
		},
		data() {
			return {
				status: 'loadmore',
				searchForm: {
					titile: ''
				},
				dataList: [],
				tablePage: {
					pages: 0,
					currentPage: 0,
					pageSize: 10,
					orders: [{ column: "a.create_time", asc: false }],
				},
				loading: false,
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			// 输入监听
			inputWord(e){
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(()=>{
					this.doSearch()
				},300)
			},
			// 搜索
			doSearch(){
				this.dataList = []; 
				this.tablePage.currentPage = 0;
				this.tablePage.pageSize = 10;
				this.tablePage.pages = 0;
				this.loadmore()
			},
			onReachBottom() {
				this.loadmore()
			},
			loadmore() {
				if(this.tablePage.currentPage!==0 && this.tablePage.pages <= this.tablePage.currentPage ) {
					this.status = 'nomore';
					return;
				}
				this.tablePage.currentPage = ++ this.tablePage.currentPage;
				//联网加载数据
				this.status = 'loading';
				taskService.myApplyedList({
					current: this.tablePage.currentPage,
					size: this.tablePage.pageSize,
					orders: this.tablePage.orders,
					...this.searchForm
				}).then((data)=>{
					//追加新数据
					this.dataList=this.dataList.concat(data.records);
					this.tablePage.pages = data.pages;
					if(this.tablePage.pages <= this.tablePage.currentPage){
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				})
				
			},
			commit(index, row){
				if(row.code === 1) {
					if(index === 0){
						this.urge(row)
					}else if(index === 1){
						this.callback(row)
					}else if(index === 2){
						this.toDetail(row)
					}
				} else if(row.code === 3 || row.code === 4) {
					if(index === 0){
						this.urge(row)
					}else if(index === 1){
						this.restart(row)
					}
				} else {
					if(index === 0){
						this.toDetail(row)
					}
				}
			},
			// 撤销申请
			callback (row) {
				  uni.showModal({
				      title: '提示',
				      content: '确定要撤销该流程吗？',
				      success: (res)=>{
				          if (res.confirm) {
							  processService.revokeProcIns(row.processInstanceId, '用户撤销').then((data) => {
								  uni.showToast({
									title:data
								  })
								  this.doSearch(this.curWord)
				              })
				          } else if (res.cancel) {
				             uni.hideLoading()
				          }
				      },
					  fail() {
					  	
					  }
				  });				
			},
			urge (row) {
				uni.showToast({
					title: '催办成功!'
				})
			},
			// 重新填写
			restart(row) {
				// 读取流程表单
				taskService
					.getTaskDef({
						procInsId: row.processInstanceId,
						procDefId: row.processDefinitionId,
					})
					.then((data) => {
						let query =  {
								status: "start",
								title: row.vars.title,
								formTitle: row.vars.title,
								...pick(
									data,
									"formType",
									"formUrl",
									"procDefKey",
									"taskDefKey",
									"procInsId",
									"procDefId",
									"taskId",
									"status",
									"title",
									"businessId"
								)
							}
						uni.navigateTo({
						   url: '/pages/workbench/task/TaskFormEdit?flow='+JSON.stringify(query)
						})
					});
			},
			
			toDetail (row) {
				taskService.getTaskDef({
				  procInsId: row.processInstanceId,
				  procDefId: row.processDefinitionId
				}).then((data) => {
					let query = {readOnly: true, title: row.vars.title, formTitle: row.vars.title, ...pick(data, 'formType', 'formUrl', 'procDefKey', 'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId')}
					uni.navigateTo({
					   url: '/pages/workbench/task/TaskFormDetail?flow='+JSON.stringify(query)
					})
				})
			  },
		}
	}
</script>