<template>
	<view class="app">
		<view class="cards">
			<view class="card" @tap="tapmymission('')" :style="orderStatus=='' ? 'background: #4271B9;color:#fff':''">
				<image src="../../static/qbgd.png" mode="" v-if="orderStatus!=''"></image>
				<image src="../../static/qbgd2.png" mode="" v-else></image>
				<view class="text">
					全部工单
				</view>
			</view>
			<view class="card" @tap="tapmymission('NOT_FINISH')"
				:style="orderStatus=='NOT_FINISH' ? 'background: #F5A623;color:#fff':''">
				<image src="../../static/dqgd.png" mode="" v-if="orderStatus!='NOT_FINISH'"></image>
				<image src="../../static/dqgd2.png" mode="" v-else></image>
				<view class="text">
					当前工单
				</view>
			</view>
			<view class="card" @tap="tapmymission('COMPLETE')"
				:style="orderStatus=='COMPLETE' ? 'background: #02D081;color:#fff':''">
				<image src="../../static/ywcgd.png" mode="" v-if="orderStatus!='COMPLETE'"></image>
				<image src="../../static/ywcgd2.png" mode="" v-else></image>
				<view class="text">
					已完成工单
				</view>
			</view>
		</view>
		<view class="items">
			<view class="item" v-for="(item,index) in missionlist" @click.stop='gotaskDetails(item)'>
				<view class="title">
					<view class="text">
						{{item.nurseItemName}}
					</view>
					<view class="image">
						<image src="../../static/jinbi.png" mode=""></image>
						<span>
							+ {{item.totalPrice}}
						</span>
					</view>
				</view>
				<image class="itemimg" v-if="item.orderStatus=='NOT_FINISH'||item.orderStatus=='WAIT_RECEIVE'"
					src="../../static/dcl.png" mode=""></image>
				<image class="itemimg" v-else src="../../static/ywc.png" mode=""></image>
				<view class="time">
					{{item.serviceDate}}
					<span style='padding-left: 10rpx;'>{{item.serviceStartTime}}</span>
				</view>
				<view class="address">
					<view class="text">
						{{item.serviceAddress}}
					</view>
					<view class="daohang" @click.stop='goMap(item)'>
						<image src="../../static/daohang.png" mode=""></image>
						<span class='p'>导航</span>
					</view>
				</view>
				<view class="btns" v-if="item.orderStatus=='NOT_FINISH'||item.orderStatus=='WAIT_RECEIVE'">
					<view class="btnreturn" @click.stop='gotaskReturn(item)'>
						退回
					</view>
					<view class="btnaccept" @click.stop='Receivingorders(item)' v-if="item.orderStatus=='WAIT_RECEIVE'">
						接单
					</view>
					<view class="btnaccept" @click.stop='goconfirmCompletion(item)'
						v-if="item.orderStatus=='NOT_FINISH'">
						去完成
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import baseurl from '../../api/baseurl'
	import {
		selectMission,
		receiveOrders
	} from '@/api/Mymission/Mymission.js'
	export default {
		data() {
			return {
				baseurl: null,
				nursePersonId: 35, //护理员id
				orderStatus: '', //COMPLETE 已完成  NOT_FINISH  未完成 
				pageNum: 1,
				pageSize: 10,
				nurseItemName: '', //项目名称
				missionlist: [], //项目list
				total: 0,
				tude: { //经纬度
					latitude: '',
					longitude: '',
				},
			}
		},
		methods: {
			//点击toptabr
			tapmymission(item) {
				this.orderStatus = item
				this.selectMissioninfo();
			},
			//工单list请求
			selectMissioninfo() {
				this.pageNum = 1
				selectMission(this.nursePersonId, this.orderStatus, this.pageNum, this.pageSize, this.nurseItemName).then(
					res => {
						this.missionlist = res.rows
						this.total = res.total
					})
			},
			//跳转导航
			getlocations() {
				let that = this
				uni.openLocation({
					latitude: Number(that.tude.latitude),
					longitude: Number(that.tude.longitude),
				})
			},
			//获取经纬度
			goMap(item) {
				let that = this
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1/?address=',
					method: 'GET',
					data: {
						key: '3VABZ-6LZWK-YPAJ3-AMQED-D7RUK-VPB37', //高德地图key
						address: item.serviceAddress // 详细地址
					},
					success: function(res) {
						that.tude.latitude = res.data.result.location.lat
						that.tude.longitude = res.data.result.location.lng
						that.getlocations();
					},
					fail(err) {}
				})
			},
			//任务退回
			gotaskReturn(item) {
				uni.navigateTo({
					url: `/pages/taskReturn/taskReturn?item=${JSON.stringify(item)}`
				})
			},
			//接单
			Receivingorders(item) {
				var obj = {
					"appointmentOrderId": item.id,
					"stationPersonId": this.nursePersonId,
					"appointmentOrderNo": item.orderNo
				}
				receiveOrders(obj).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '接单成功',
							type: 'success',
							duration: '1500'
						})
						this.selectMissioninfo();
					}
				})
			},
			//去完成
			goconfirmCompletion(item) {
				uni.navigateTo({
					url: `/pages/confirmCompletion/confirmCompletion?list=${JSON.stringify(item)}&&orderDetailsId=${item.id}`
				})
			},
			//详情
			gotaskDetails(item) {
				uni.navigateTo({
					url: `/pages/taskDetails/taskDetails?orderDetailsId=${item.id}`
				})
			},
		},
		onLoad(options) {
			this.orderStatus = options.orderStatus
		},
		onShow() { //加载的时候执行（没有次数限制）
			this.baseurl = baseurl
			var that = this
			// const value = uni.getStorageSync('nursePersonId');
			// if (value) {
			// 	that.nursePersonId = value
			this.selectMissioninfo();
			// }
		},
		onReachBottom() { //下滑加载
			if (this.missionlist.length >= this.total) {} else {
				this.pageNum++
				selectMission(this.nursePersonId, this.orderStatus, this.pageNum, this.pageSize, this.nurseItemName).then(
					res => {
						res.rows.forEach(e => {
							this.missionlist.push(e)
						})
					})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.selectMissioninfo();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	.app {
		padding: 0;

		.items {
			width: 96%;
			margin: 0 auto;

			.item {
				margin: 15rpx auto;
				background-color: #fff;
				box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
				border-radius: 5rpx;
				padding: 3%;
				width: 100%;
				position: relative;
				color: #333333;
				font-size: 30rpx;
				padding-bottom: 60rpx;

				.btns {
					margin-top: 60rpx;
					display: flex;
					position: relative;
					height: 30rpx;

					.btnaccept,
					.btnreturn {
						width: 170rpx;
						height: 60rpx;
						text-align: center;
						line-height: 55rpx;
						border-radius: 5rpx;
						border: 1px solid #4271B9;
						position: absolute;
					}

					.btnaccept {
						right: 24rpx;
						color: #fff;
						background-color: #4271B9;
					}

					.btnreturn {
						right: 220rpx;
						color: #4271B9;
						background: #FFFFFF;
					}
				}

				.address {
					position: relative;

					.text {
						width: 80%;
					}

					.daohang {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						right: 10rpx;
						display: inline-block;
						width: 100rpx;
					}

					.p {
						padding-left: 30rpx;
						font-size: 24rpx;
						color: #EA706A;
					}

					image {
						position: absolute;
						top: 50%;
						left: 0rpx;
						transform: translateY(-40%);
						width: 25rpx;
						height: 25rpx;
					}
				}

				.time {
					line-height: 90rpx;
				}

				.itemimg {
					position: absolute;
					right: 15rpx;
					top: 18rpx;
					width: 140rpx;
					height: 120rpx;
				}

				.title {
					line-height: 100rpx;
					border-bottom: 1rpx solid #E6E6E6;
					font-size: 36rpx;
					color: #333333;
					position: relative;
					height: 100rpx;

					.text {
						height: 100%;
						overflow: hidden; //超出的文本隐藏
						display: -webkit-box;
						-webkit-line-clamp: 1; // 超出多少行
						-webkit-box-orient: vertical;
						width: 57%;
					}

					.image {
						position: absolute;
						left: 58%;
						top: 50%;
						transform: translateY(-50%);
						display: inline-block;
						font-size: 30rpx;
						color: #EA706A;
						width: 150rpx;

						image {
							// vertical-align: middle;
							transform: translateY(20%);
							width: 40rpx;
							height: 40rpx;
							padding-right: 10rpx;
						}
					}
				}
			}
		}

		.cards {
			width: 96%;
			margin: 10rpx auto;
			display: flex;
			background-color: #fff;

			.card {
				width: 33.3%;
				position: relative;
				text-align: center;
				height: 150rpx;
				border-radius: 5rpx;

				.text {
					width: 100%;
					font-size: 26rpx;
					line-height: 40rpx;
					position: absolute;
					top: 90rpx;
				}

				image {
					position: absolute;
					top: 20rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 50rpx;
					height: 60rpx;
				}
			}
		}
	}
</style>
