<!--
@ 作者: 秦东
@ 时间: 2023-11-22 14:56:54
@ 备注: 我的请求
-->
<script lang='ts' setup>
import { Delete, Edit, Search, Share, Upload,View } from '@element-plus/icons-vue'
import { taskFlowList } from '@/api/DesignForm/requestapi'
import { taskflowquery } from '@/api/DesignForm/type'

import LookAndOperateLogInfo from '@/views/taskplatform/taskmanagement/lookAndOperateLogInfo.vue'

const selectMyInfo = reactive<taskflowquery>({
	page: 1,
	pagesize: 20,
	class:1
})
const loadingMy = ref(false)
const searckFormReMyf  = ref(ElForm);
const totalsMy = ref<number>(0)	//总共多少条记录
const taskFlowMyAry = ref<any>([])  //记录数组
//获取我的请求
const getMyToDoList = () => {
	loadingMy.value = true
	taskFlowList(selectMyInfo)
		.then((data:any)=>{
			console.log("获取我的请求",data)
			totalsMy.value = data.data.total
			taskFlowMyAry.value = data.data.list
		})
		.finally(()=>{
			loadingMy.value = false
		})
}
//重置表单
const resetQueryMy = () =>{
	searckFormReMyf.value.resetFields();
	initMyData();
}
//初始化数据
const initMyData = () =>{
	selectMyInfo.page = 1;
	selectMyInfo.pagesize = 15;
	selectMyInfo.title = ""
	selectMyInfo.class = 1;
	selectMyInfo.state = 0;
}
const myappbox = ref()
const drawerMyWith = ref<number>(0);		//页面宽度
onMounted(()=>{
	getMyToDoList();
	drawerMyWith.value = myappbox.value?.clientWidth
})
const flowLogInfo = ref<any>()
const darwOpenOrClose = ref(false)

/**
 * 查看流程任务
 * val					记录内容
 * types				记录类型; 1、我的请求；2、待办事宜；3、已办事宜；4：草稿箱
 */
const lookFlowInfo = (val:any,types:number) =>	{
	flowLogInfo.value = val
	darwOpenOrClose.value = true
}
const searchQuery = () =>{
	getMyToDoList()
}
</script>
<template>
	<div ref="myappbox" class="app_box">
		
		<div class="app-container">
			<div class="search">
				<el-form ref="searckFormReMyf" :model="selectMyInfo" :inline="true">
					<el-form-item label="任务标题" prop="name">
						<el-input
							v-model="selectMyInfo.title"
							placeholder="请输入任务标题"
							clearable
							@keyup.enter="searchQuery"
						/>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getMyToDoList()"><i-ep-search />搜索</el-button>
						<el-button @click="resetQueryMy()"><i-ep-refresh />重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-card shadow="never">
				<el-table
					v-loadingMy="loadingMy"
					element-loading-my-text="Loading..."
					highlight-current-row
					:data="taskFlowMyAry"
					border
					class="table_box"
				>
					<el-table-column fixed label="标题" prop="title" width="500" />
					<el-table-column  label="创建人" prop="creater" width="200" >
						<template #default="scope">
							{{ scope.row.creatorInfo.name }}（<el-text  type="info">{{ scope.row.creatorInfo.number }}</el-text>）	
						</template>
					</el-table-column>
					<el-table-column  label="发起日期" prop="startDate" align="center"  width="300" />
					<el-table-column  label="状态" prop="status"  align="center"  width="220" >
						
						<template #default="scope">
							<el-tag
								v-if="scope.row.status==1"
								class="mx-1"
								effect="plain"
								round
							>
								草稿
							</el-tag>
							<el-tag
								v-else-if="scope.row.status==2"
								type="danger"
								class="mx-1"
								effect="plain"
								round
							>
								驳回
							</el-tag>
							<el-tag
								v-else-if="scope.row.status==3"
								type="success"
								class="mx-1"
								effect="plain"
								round
							>
								审批中
							</el-tag>
							<el-tag
								v-else-if="scope.row.status==4"
								type="info"
								class="mx-1"
								effect="plain"
								round
							>
								归档
							</el-tag>
							<el-tag
								v-else
								type="info"
								class="mx-1"
								effect="plain"
								round
							>
								删除
							</el-tag>
						</template>
						
					</el-table-column>
					<el-table-column label="当前节点及操作人" prop="currentStep" width="400" >
						<template #default="scope">
							<el-text v-if="scope.row.currentNodeName" type="success">{{ scope.row.currentNodeName }}：</el-text><el-text v-for="(item,index) in scope.row.currentNodeUser" :key="index" type="warning">{{ item.name }}({{ item.number }})</el-text>
						</template>
					</el-table-column>
					<el-table-column fixed="right" align="center" label="操作" width="100" >
						<template #default="scope">
							<el-button type="primary"  class="fa fa-eye" @click="lookFlowInfo(scope.row,1)" />
						</template>
					</el-table-column>
				</el-table>
				<pagination
					v-model:total="totalsMy"
					v-model:page="selectMyInfo.page"
					v-model:limit="selectMyInfo.pagesize"
					@pagination="getMyToDoList"
				/>
			</el-card>

			<LookAndOperateLogInfo v-if="darwOpenOrClose" v-model:isshow="darwOpenOrClose" :flow-log-info="flowLogInfo" :drawer-with="drawerMyWith" @getmytodolist="getMyToDoList" />




		</div>
	</div>
	
</template>
<style  lang='scss' scoped>
.app_box{
	width:100%;
	overflow: hidden;
	overflow-y: auto;
}
.box-card {
  	width: 100%;
}
.table_box{
	width: 100%;
	height: calc(100vh - 308px);
}
</style>
