<template>
	<view class="warp">
		<view class="list_item" v-for="(item,index) in taskList" :key="index">
			<view class="list_item_top" @tap="onTaskInfo(item.id,index)">
				<view class="list_item_lef">
					<block v-if="item.orderSource == 10">
						<image src="/static/images/dispatch/task_lu.png"></image>
					</block>
					<block v-else>
						<image src="/static/images/dispatch/task_bao.png"></image>
					</block>
					<text>{{(item.orderTitle).replace(/\r\n/g, '').replace(/\n/g, '').replace(/\s/g, '').replace(/\t/g, '')}}</text>
				</view>
				<view class="list_item_right">
					<block v-if="item.arriveDate">
						{{item.arriveDate.slice(0,16)}}
					</block>
				</view>
			</view>
			<view class="list_item_car">
				<block v-if="item.vehicleTypeName">
					<view class="l_i_car_lef">[{{item.vehicleTypeName}}]</view>
				</block>
				<block v-if="item.distance != null">
					<view class="l_i_car_rig">{{item.distance}}</view>
				</block>
			</view>
			<view class="list_item_text" @tap="onTaskInfo(item.id,index)">
				<view class="list_item_text_txt">
					<mp-html 
						containerStyle="width:100%;height:100%;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical;" 
						:content="item.orderContent" 
						@linktap="linktap"
					/>
				</view>
			</view>
			<view class="list_item_bot">
				<view class="list_item_bot_lef" @tap="onTaskInfo(item.id,index)">
					<block v-if="item.status == 10&&item.address != ''">
						<view class="list_item_bot_lef_10">
							<uni-icons type="location" color="#888888FF" size="22"></uni-icons>
							<text>{{item.address}}</text>
						</view>
					</block>
					<block v-if="item.status != 10">
						<view class="list_item_bot_lef_20">
							<view class="lef_20_lef" @tap.stop="goIndex(item)">{{(item.vehicleCode).substring(0,4)}}</view>
							<view class="lef_20_rig">
								<view class="lef_20_rig_top">{{item.orderVehiclePerson}}</view>
								<view class="lef_20_rig_bot">
									<image src="/static/images/dispatch/taskStatus.png"></image>
									{{item.statusName}}
								</view>
							</view>
						</view>
					</block>
				</view>
				<block v-if="item.status == 10">
					<view class="list_item_bot_rig" @tap.stop="nowZhipai(item)">
						<image src="/static/images/dispatch/task_top.png"></image>立即指派
					</view>
				</block>
				<block v-if="item.status != 10">
					<view class="list_item_bot_rig" @tap.stop="onCallSiji(item.orderVehicleDriverPhone)">
						<uni-icons type="phone-filled" color="white"></uni-icons>联系司机
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"taskItem",
		props:{
			taskList:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			// 立即指派
			nowZhipai(item){
				uni.setStorage({
					key:'taskInfo',
					data:item,
					success() {
						uni.navigateTo({
							url:'/pages/select-car/select-car'
						})
					}
				})
			},
			// 任务详情
			onTaskInfo(id,index){
				uni.navigateTo({
					url:'/pages/taskInfo/taskInfo?id='+id
				})
			},
			// 查看定位
			goIndex(item){
				let qiPao = {
					'distance':item.distance,
					'expectArriveDate':item.expectArriveDate,
				}
				uni.navigateTo({
					url:"/map/pages/index/index?type=1010&id="+item.vehicleId+"&qiPao="+JSON.stringify(qiPao)
				})
			},
			// /拨打电话
			linktap (e) {
				const tel = e.innerText;
				uni.makePhoneCall({
				    phoneNumber: tel
				});
			    console.log('linktap 事件触发：', e)
			},
			// 联系司机
			onCallSiji(phone){
				if(phone == ''||phone == null){
					uni.showToast({
						title:'暂无电话号码',
						icon:'none',
						duration:1500
					})
				}else{
					uni.makePhoneCall({
					    phoneNumber: phone
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.warp{
	padding-top: 10rpx;
}
.list_item{
		width: 710rpx;
		margin: 0 auto;
		border-radius: 16rpx;
		background-color: white;
		margin-bottom: 20rpx;
		// margin-top: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* padding: 20rpx 0rpx; */
		.list_item_top{
			// height: 112rpx;
			width: 646rpx;
			margin-top: 25rpx;
			// margin-bottom: 20rpx;
			// border: 1rpx solid red;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			// border-bottom: 1rpx solid #E4E4E4FF;
			.list_item_right{
				width: 250rpx;
				display: flex;
				// border: 1rpx solid red;
				flex-direction: row;
				justify-content: flex-end;
				// color: #4475FD;
				font-size:28rpx;
				// font-weight: bold;
				color:#888888FF;
			}
			.list_item_lef{
				display: flex;
				align-items: center;
				flex-direction: row;
				// border: 1rpx solid red;
				font-weight: bold;
				color: #353535;
				image{
					height: 45rpx;
					width: 45rpx;
				}
				text{
					width: 330rpx;
					overflow: hidden;
					text-overflow:ellipsis ;
					white-space: nowrap;
					margin-left: 10rpx;
					font-weight: bold;
					font-size:32rpx ;
					lines: 1;
					// display: flex;
					// flex-direction: row;
					// flex-wrap: nowrap;
				}
			}
		}
		.list_item_car{
			width: 646rpx;
			margin-top:8rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			color:#888888FF;
			.l_i_car_lef{
				margin-left: 55rpx;
			}
		}
		.list_item_text{
			width: 646rpx;
			// padding: 0rpx 0rpx 10rpx 0rpx;
			// border: 1rpx solid red;
			.list_item_text_txt{
				width: 100%;
				height: 120rpx;
				overflow: hidden;
				// font-family:SimSun ;
				font-size:28rpx;
				line-height: 40rpx;
				color: #555555;
			}
		}
		.list_item_bot{
			height: 104rpx;
			width: 646rpx;
			// border: 1rpx solid red;
			display: flex;
			margin-top: 25rpx;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			border-top: 1rpx solid #E4E4E4FF;
			.list_item_bot_lef{
				display: flex;
				flex-direction: row;
				align-items: center;
				color:#7c7c7cff;
				font-size:26rpx;
				.list_item_bot_lef_10{
					display: flex;
					align-items: center;
					flex-direction: row;
					text{
						width: 350rpx;
						// border: 1rpx solid red;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
				.list_item_bot_lef_20{
					display: flex;
					flex-direction: row;
					align-items: center;
					.lef_20_lef{
						width:80rpx;
						height: 80rpx;
						border-radius: 50%;
						font-size: 25rpx;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						justify-content: center;
						overflow: hidden;
						// border: 1rpx solid red;
						background-color: #4576EE;
						color: white;
					}
					.lef_20_rig{
						display: flex;
						flex-direction: column;
						margin-left: 10rpx;
						.lef_20_rig_top{
							color: #353535;
						}
						.lef_20_rig_bot{
							width: 120rpx;
							margin-top: 5rpx;
							overflow: hidden;
							border: 2rpx solid #4576EE;
							border-radius: 10rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							color: #4576EE;
							image{
								height: 35rpx;
								width: 35rpx;
							}
						}
					}
				}
			}
			.list_item_bot_rig{
				height:62rpx;
				width: 170rpx;
				border-radius: 31rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				font-size: 23rpx;
				background-color: #3476FEFF;
				color: #FFFFFFFF;
				image{
					width: 21rpx;
					height: 25rpx;
					margin-right:8rpx;
				}
			}
		}
	}
</style>
