<template>
	<view class="container">
		<u-alert showIcon v-if="jumpFrom==2" description="代办任务为当前账号负责的批次中计划开始时间为当日且未分配的任务!" type="warning" closable=""></u-alert>
		<view class="search">
			<u-search v-model="queryParams.taskName"  placeholder="请输入任务名称" @search="handleSearch" @custom="handleSearch"></u-search>
		</view>
		<template v-if="batchList.length>0">
			<view class="item" v-for="(item,index) in batchList" :key="index">
				<view class="top">
					<view class="left">
						<text class="name">{{item.taskName}} </text>
						<u-tag  plain color="#fff" :text="item.status | transformStatusToText(typeList)" size="mini" :bgColor="item.status | transformTagColor()" :borderColor="item.status | transformTagColor()" ></u-tag>
					</view>
					<view class="right" @click="handleJump(item)">
						处理任务
					</view>
				</view>
				<view class="bottom" @click="showDetail(item)">
					<text>任务情况</text>
					<u-icon v-if="!item.detailVisiable" name="arrow-down" ></u-icon>
					<u-icon v-else name="arrow-up" ></u-icon>
				</view>
				<view v-if="item.detailVisiable" class="detail">
					<u-row gutter="16" class="row">
						<u-col span="12">
							计划时间：{{item.planStart}} - {{item.planFinish}}
						</u-col>
					</u-row>
					<u-row gutter="16" class="row">
						<u-col span="12">
							实际时间：{{item.actualStart||'无'}} - {{item.actualFinish||'无'}}
						</u-col>
					</u-row>
				</view>
			</view>
		</template>
		<u-empty v-else text="暂无任务数据" mode="list"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//跳转来源,目前1:从批次过来，2:从首页待处理任务过来,默认1
				jumpFrom:1,
				//字典
				typeList:[],
				//查询阐述
				queryParams:{
					pageNum: null,
					pageSize: null,
					taskName:'',
					batchId:null,
					status:null,
					planStart:null,
					planFinsh:null
				},
				//任务列表
				batchList:[],
				//基础路径
				baseUrl:uni.$u.http.config.baseURL
			}
		},
		onLoad(option){
			/** ----------查询参数-------------- */
			this.queryParams.batchId=option?.batchId?option.batchId:null;
			this.queryParams.status=option?.status?option.status:null;
			this.queryParams.planStart=option?.planStart?option.planStart:null;
			this.queryParams.planFinsh=option?.planFinsh?option.planFinsh:null;
			
			/**-- 修改页面标题，跳转页面需要携带title--*/
			if(option?.title){
				uni.setNavigationBarTitle({
					title:option.title
				})
			}
			/**----------------跳转来源------------------*/
			//不传递就保持默认
			this.jumpFrom = option?.jumpFrom && option.jumpFrom
			
			this.getBatchList(); 
			this.getDic();
		},
		async onPullDownRefresh() {
			await this.getBatchList(); 
			uni.stopPullDownRefresh();
		},
		filters:{
			//将任务状态值翻译成名称
			transformStatusToText(val,typeList){
				let name="--"
				typeList.forEach((item,index)=>{
					if(item.dictValue==val){
						name = item.dictLabel
					}
				})
				return name
			},
			//将任务状态值翻译成任务Tag的颜色
			transformTagColor(val){
				let color = ""
				if(val==0){
					color="#dadada"
				}else if(val==1){
					color="#fc842d"
				}else if(val==2){
					color="#ead900"
				}else if(val==3){
					color="#2b7"
				}else{
					color="#636363"
				}
				return color;
			},
		},
		methods: {
			//请求任务列表
			async getBatchList(){
				let res = await uni.$u.http.get('/agriculture/batchTask/mobilelist',{params:this.queryParams});
				this.batchList = res.rows.map(item=>({
					...item,
					detailVisiable:true
				}));
			},
			//处理收缩按钮
			handleSearch(){
				this.getBatchList();
			},
			//处理页面跳转
			handleJump(data){
				uni.$u.route({
					url: 'pages/farm/detail/taskManageDetail',
					params: {
						...data
					}
				})
			},
			showDetail(item){
				item.detailVisiable=!item.detailVisiable
			},
			//获取字典
			async getDic(){
				const {data} = await uni.$u.http.get('/system/dict/data/type/agriculture_batch_task_status')
				this.typeList=data
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		display: flex;
		flex-direction: column;
		align-items: center;
		.search{
			width: 750rpx;
			background-color: #fff;
			padding:20rpx;
			box-sizing: border-box;
		}
		.item{
			background-color: #fff;
			margin-top:20rpx;
			width: 710rpx;
			padding:20rpx 20rpx 0;
			box-sizing: border-box;
			border-radius: 10rpx;
			.top{
				display: flex;
				justify-content: space-between;
				.left{
					display: flex;
					justify-content: center;
					align-items: center;
					.name{
						font-size:35rpx;
						margin-right:20rpx;
						font-weight: bold;
					}
				}
				.right{
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28;
					color:#2b7;
					font-weight: bold;
				}
			}
			.bottom{
				border-top:1px solid #eee;
				padding:7px 0;
				font-size: 29rpx;
				margin-top:10rpx;
				display: flex;
				justify-content: space-between;
				text{
					font-weight: bold;
				}
			}
			.detail{
				font-size: 29rpx;
				.row{
					margin-bottom:10rpx;
				}
			}
		}
		
	}

</style>
