<template>
	<view class="task" style="width: 100vw; height: 100vh; background-color: #eee;">
		<!-- 切换 -->
		<view class="task_tab" style="position: fixed;top: 0;" >
			<view class="task_tab_title" v-for="(item, index) in title" :key="item.name" @tap="selectTitle(item.name,item.type)"
				:class="{ 'selected': item.name === selectedTitle }">
				{{item.name}}
			</view>
		</view>
		<!-- 列表 -->
		
		<view v-if="firstList.length == 0" style="width: 100vw;height: 100vw; display: flex; flex-direction: column; align-items: center;justify-content: center;">
			<view class="logo1">
				<img src="/static/wu.png" alt="" />
			</view>
			 <view class="viewname">
			 	暂无数据！
			 </view>
		</view>
		
		<view v-else  class="task_list" style="margin-top: 130rpx; margin-bottom: 200rpx;">
			<view class="task_list_column" style="margin-bottom: 20rpx;" v-for="item in firstList" :key="item.id" @click="detailPages(item.id)">
				<view class="task_list_column_label">
					<view class="quest_label">
						急救任务 ：{{item.order_no}}
					</view>
					<view class="quest_status" v-if="item.status === 1">
						代接单
					</view>
					<view class="quest_status" v-if="item.status === 3">
						已完成
					</view>
					<view  class="quest_status" style="color: #5580FF;"  v-if="item.status === 2">
						进行中
					</view>
				</view>
				<view class="task_list_column_car">
					<view class="logo">
						<img src="/static/toes.png" alt="" />
					</view>
					<view class="userName">
						<view class="usercar">
							车牌号：{{item.licence_plate}}
						</view>
						<view class="user">
							驾驶员:{{item.driver}}
						</view>
						<view class="user">
							患者受伤类型：{{item.bruise_type}}
						</view>
					</view>
				</view>
				<view class="task_list_column_time" style="display: flex;">
					<view>
						<view class="discharge">
							<view class="icon">
								<img src="/static/shijian.png" alt="" />
							</view>
							<view class="time">
							出车时间：{{item.driving_time}}
							</view>
						</view>
						<view class="discharge" v-if="item.status === 3">
							<view class="icon">
								<img src="/static/shijian.png" alt="" />
							</view>
							<view class="time" >
								回院时间：{{item.driving_end_time || ''}}	
							</view>
						</view>
					</view>
					<button v-if="item.status === 2" type="primary" style="height: 80rpx; width: 130rpx;margin-top: 30rpx;" @click.stop="completionBtn(item.id)">完成</button>
				</view>
				
			</view>
			<u-loadmore :status="status" />
		</view>

	</view>
</template>

<script>
		import {request} from '../../request/request.js'
	export default {
		data() {
			return {
				status: 'loading',
				firstList:[],
				title: [{
					name: "今日急诊任务",
					type:'day'
				}, {
					name: "本周",
					type:'week'
				}, {
					name: "本月",
					type:'month'
				}, {
					name: "所有任务",
					type:''
				}],
				selectedTitle: '今日急诊任务', // 初始选中第一个标题
				type:'day'
			}
		},
		mounted() {
			this.getfirstList()	
		},
		methods:{
			//获取的上传信息
			selectTitle(title,type) {
			    this.selectedTitle = title;
				this.type = type
				this.getfirstList()
			},
			// 获取信息列表
			async getfirstList(){
				const type = this.type
				this.status = 'loading';
				const res = await request({url:'/dispatchOrder/taskList',data:{type}})
				this.firstList = res
				this.status = 'nomore';
			},
			// 跳转详情
			detailPages(id){
				uni.navigateTo({
				  url: `/PagesB/detailPages/detailPages?id=${id}`
				});
			},
			async	completionBtn(id){
				await request({url:`/dispatchOrder/${id}`})
				this.getfirstList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.task {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		
		.logo1 {
			width: 326rpx;
			height: 315rpx;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.viewname{
			font-family: Adobe Heiti Std;
			font-size: 28rpx;
			color: #999999;
			line-height: 48rpx;
		
		}
		.task_tab {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			padding-left: 30rpx;
			display: flex;
			align-items: center;
			border-bottom: 20rpx solid #F5F7FC;
			.task_tab_title {
				margin-right: 40rpx;
				padding-bottom: 20rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				font-size: 28rpx;
				color: #3B3B3B;
				line-height: 29rpx;
				margin-top: 20rpx;
				margin-right: 80rpx;
			}
			.selected {
			  /* 添加选中标题的样式 */
			  color: #5581FF;
			  font-weight: bold;
			  border-bottom: 1rpx solid #5581FF;
			}
		}
		.task_list{
			width: calc(100% );
			// padding: 20rpx;
			height: 370rpx;
			background: #F5F7FC;
			.task_list_column{
				height: 370rpx;
				padding: 20rpx;
				background: #fff;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-content: space-around;
				.task_list_column_label{
					width: 100%;
					height: 50rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.quest_label{
						font-weight: 400;
						font-size: 24rpx;
						color: #3B3B3B;
					}
					.quest_status{
						font-weight: 400;
						font-size: 24rpx;
						color: #959595;
					}
				}
				.task_list_column_car{
					width: 100%;
					height: 200rpx;
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #D7D7D7;
					.logo{
						width: 141rpx;
						height: 118rpx;
						background-color: rgba(85,129,255,.1);
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;
						img{
							width: 110rpx;
							height: 75rpx;
						}
					}
					
					.userName{
						.usercar{
							font-family: SourceHanSansSC, SourceHanSansSC;
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
						}
						.user{
							font-family: SourceHanSansSC, SourceHanSansSC;
							font-weight: 400;
							font-size: 24rpx;
							color: #959595;
						}
					}
				}
				.task_list_column_time{
					width: 100%;
					height: 130rpx;
					.discharge {
						display: flex;
						align-items: center;
						margin-top: 20rpx;
						.icon{
							width: 40rpx;
							height: 40rpx;
							margin-right: 20rpx;
							img {
								height: 100%;
								width: 100%;
							}
						}
						.time {
							font-family: SourceHanSansSC, SourceHanSansSC;
							font-weight: 400;
							font-size: 28rpx;
							color: #4A4A4A;
							line-height: 30rpx;
						}
					}
				}
				
			}
		}
	}
</style>