<template>
	<view class="content">
		<view class="header" @click="openPrice">
			<text>今日回收价格</text>
			<view>
				<text>查看详情</text>
				<u-icon name="arrow-right" color="#4F88F7" size="28"></u-icon>
			</view>
			<!-- <u-image v-if="hasLogin" @click="openScreen=true" class="filter-img" width="36rpx" height="36rpx" src="/static/filter.png"></u-image> -->
		</view>
		<!-- 总计 -->
		<view class="header-total">
			<view class="title">今日统计</view>
			<view class="header-cont">
				<view class="cont-item">
					<text>{{numTotal}}</text>
					<view>完成订单数(个)</view>
				</view>
				<view class="cont-item">
					<text>{{weightTotal}}</text>
					<view>回收重量(kg)</view>
				</view>
				<view class="cont-item">
					<text>{{moneyTotal}}</text>
					<view>交易金额(元)</view>
				</view>
			</view>
		</view>
		<!-- 接单按钮 -->
		<view v-show="workStatus==0 && hasLogin" @click="changeWorkStateFun(1)" class="btn-view start-btn">
			点击开始接单
		</view>
		<view v-show="workStatus==1 && hasLogin" @click="changeWorkStateFun(0)" class="btn-view end-btn">
			接单中(点击停止接单)
		</view>
		<!-- 待处理订单 -->
		<view class="list">
			<view v-if="hasLogin" class="title">
				<view>待处理订单({{listdata.length}}个)</view>
			</view>
			<view class="list-item" v-for="item in listdata" :key="item.id">
				<u-image class="img-icon" :src="item.icon?item.imageHeader:'/static/def_home_shop.png'"
					border-radius="16" width="160" height="160"></u-image>
				<view @click="intoWaitOrderDetail(item)"
					class="cont-item-right flex_1 flex flex_column justify_between">
					<view class="flex align_center justify_between">
						<view class="flex_1 bold ellipsis-one">{{item.customerName||'--'}}</view>
						<view class="do-btn">去处理</view>
					</view>
					<view class="greey-font flex align_center justify_between">
						<view class="greey-font">{{item.createDate}}</view>
						<view v-if="item.distance" @click.stop="openLocation(item)" class="flex align_center">
							<u-icon class="icon" name="icon_coordinate1" custom-prefix="custom-icon" size="20"
								color="#999999"></u-icon>
							<text>{{item.distance}}KM</text>
						</view>
					</view>
					<view class="greey-font">{{item.address || '--'}}</view>
					<!-- <view class="greey-font">{{item.reserveTime}}</view>
					<view class="type">
						<text v-for="(key,index) in item.reserveTypeList" :key="index" class="mark">
							{{key}}
						</text>
					</view> -->
				</view>
			</view>

			<view class="nodata" v-if="listdata.length==0 && status!='loading'">
				<u-empty src="/static/def_result.png" :text="noDataText" icon-size="260"></u-empty>
			</view>
			<view class="loadmore">
				<u-loadmore v-if="status=='loading'" :status="status" />
			</view>
		</view>
		<!-- 取消接单弹窗 -->
		<uni-popup ref="openModal" type="center">
			<uni-popup-dialog content="您确定要停止接单吗？" @confirm="onOk" title="温馨提示"></uni-popup-dialog>
		</uni-popup>
		<!-- 筛选弹框 -->
		<search-modal v-if="openScreen" :visible="openScreen" :defaultParams="searchForm" @refresh="refresh"
			@close="openScreen=false"></search-modal>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import {
		waitOrderQuery,
		reserveTotal,
		changeWorkState,
		WorkStatusGet
	} from '@/api/index.js'
	import {
		checkLogin
	} from '@/api/login.js'
	import moment from 'moment'
	import getDate from '@/libs/getDate.js'
	export default {
		components: {
			uniPopup,
			uniPopupDialog
		},
		data() {
			return {
				hasLogin: false, // 是否登录
				listdata: [], // 列表数据
				noDataText: '暂无数据', //  列表请求状态提示语
				status: 'loading', //  加载中状态
				titleStatus: false, //  顶部加载中状态
				scrollTop: 0, //  滚动条位置
				numTotal: 0, // 完成订单个数
				weightTotal: 0, // 回收重量
				moneyTotal: 0, // 交易金额
				workStatus: '0', // 工作状态 0 不接单 1接单
			}
		},
		onLoad() {
			this.checkUpdate()
			// 获取当前经纬度
			// this.getCurPosition()
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onUnload() {

		},
		onShareAppMessage(res) {},
		onShareTimeline(res) {},
		onShow() {
			this.status = 'loading'
			checkLogin().then(res => {
				this.hasLogin = res.status == 200
				if (this.hasLogin) {
					this.getCurPosition()
					this.getTotalData()
					this.getWorkStatus()
				} else {
					this.noDataText = '您尚未登录或登录已过期！'
					this.status = 'loadmore'
				}
			})
		},
		methods: {
			// 检查更新
			checkUpdate() {
				if (uni.canIUse('getUpdateManager')) {
					const updateManager = uni.getUpdateManager()
					updateManager.onCheckForUpdate(function(res) {
						console.log('onCheckForUpdate====', res)
						// 请求完新版本信息的回调
						if (res.hasUpdate) {
							console.log('res.hasUpdate====')
							updateManager.onUpdateReady(function() {
								uni.showModal({
									title: '更新提示',
									content: '新版本已经准备好，是否重启应用？',
									success: function(res) {
										console.log('success====', res)
										// res: {errMsg: "showModal: ok", cancel: false, confirm: true}
										if (res.confirm) {
											// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
											updateManager.applyUpdate()
										}
									}
								})
							})
							updateManager.onUpdateFailed(function() {
								// 新的版本下载失败
								uni.showModal({
									title: '已经有新版本了哟~',
									content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'
								})
							})
						}
					})
				}
			},
			// 获取骑手状态
			getWorkStatus() {
				WorkStatusGet().then(res => {
					if (res.status == 200) {
						this.workStatus = res.data[0].workStatus
					}
				})
			},
			// 获取当前位置
			getCurPosition() {
				let _this = this
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						console.log(1111111111)
						uni.getLocation({
							type: 'wgs84', // 默认wgs84
							success: function(res) {
								console.log(res, '------')
								let lat = res.latitude
								let lng = res.longitude
								// 查询订单信息
								_this.getList(lat, lng)
							},
							fail: function(res) {
								console.log(res)
								// 查询订单信息
								_this.getList()
							}
						});
					},
					fail() {
						uni.getSetting({
							success(res) {
								console.log(res.authSetting, 'gggggggggg')
								if (!res.authSetting['scope.userLocation']) {
									uni.showModal({
										title: '提示',
										content: '无法展示用户距离，请开启定位功能！',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success(res) {
														console.log(res.authSetting,
															'res.authSetting')
													},
													fail(err) {
														console.log(err, 'eeeeeeeee')
													}
												})
											} else if (res.cancel) {
												console.log('用户点击取消');
												_this.getList()
											}
										}
									});

								}
							},
							fail() {
								_this.getList()
							}
						})

					}
				})

			},
			// 截取市以下的地址
			getArea(obj,state) {
			var index=obj.lastIndexOf("\市");
			if(state==0){
			obj=obj.substring(0,index);
			}else {
			obj=obj.substring(index+1,obj.length);
			}
			return obj;
			},
			// 待处理订单信息
			getList(lat, lng) {
				// uni.showLoading({
				// 	title: '加载中...'
				// })
				waitOrderQuery({
					handleUserLng: lng,
					handleUserLat: lat
				}).then(res => {
					console.log(res)
					if (res.status == 200) {
						this.listdata = res.data
						this.listdata.forEach(item => {
							item.distance = item.distanct && item.distanct.distance ? (item.distanct
								.distance / 1000).toFixed(2) : ''
							item.reserveTime = moment(item.reserveDateBegin).format('YYYY-MM-DD') + item
								.reserveTimeTypeDictValue
							item.reserveTypeList = item.reserveRubbishType.split(',')
							
							
							if(item.receiveAreasName){
								item.cityAddress=this.getArea(item.receiveAreasName,1)
							}
							console.log(item.cityAddress,'-----------item.cityAddress=============')
							item.address=(item.houseAddress? item.receiveAddress:'')+(item.cityAddress? '('+item.cityAddress+')':'')
						})
						this.noDataText = '暂无数据'
					} else {
						this.noDataText = res.message
					}
					this.status = 'loadmore'
					uni.hideLoading()
				})
			},
			// 今日统计
			getTotalData() {
				this.titleStatus = true
				reserveTotal({}).then(res => {
					if (res.status == 200 && res.data) {
						this.numTotal = res.data.orderReserveCount || 0
						this.weightTotal = res.data.totalWeight / 1000 || 0
						this.moneyTotal = res.data.originalAmount || 0
					} else {
						this.numTotal = 0
						this.weightTotal = 0
						this.moneyTotal = 0
					}
					this.titleStatus = false
				})
			},
			// 打开回收价格页面
			openPrice() {
				if(this.hasLogin){
					uni.navigateTo({
						url: '/pages/recoveryPrice/index'
					})
				}else{
					this.loginModal()
				}
				
			},
			// 进入待处理订单详情
			intoWaitOrderDetail(item) {
				uni.navigateTo({
					url: '/pages/order/waitOrderDetail?orderNo=' + item.orderReserveNo
				})
			},
			// 导航
			openLocation(item) {
				uni.openLocation({
					latitude: item.lat - 0,
					longitude: item.lng - 0,
					name: item.name,
					address: item.contactAddress
				});
			},
			// 未登录弹窗
			loginModal() {
				uni.showModal({
					title: '提示',
					content: '您尚未登录或登录已过期，请登录后使用',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 点击开始或停止接单
			changeWorkStateFun(flag) {
				if (flag == 0) {
					console.log(flag)
					this.$refs.openModal.open()
				} else{
					changeWorkState({
						workStatus: flag
					}).then(res => {
						if (res.status == 200) {
							this.getWorkStatus()
						}
					})
				}
				
			},
			onOk(){
				changeWorkState({
					workStatus: 0
				}).then(res => {
					if (res.status == 200) {
						this.$refs.openModal.close()
						this.getWorkStatus()
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding: 0 32rpx;
		color: #191919;

		.header {
			width: 100%;
			font-size: 36rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16upx 0;

			view:last-of-type {
				font-size: 32rpx;
				color: #4F88F7;

				text {
					margin-right: 10rpx;
				}
			}

		}

		.header-total {
			width: 100%;
			background: linear-gradient(214deg, #4F88F7 0%, #2D74FE 100%);
			border-radius: 24rpx;
			color: #fff;
			margin: 20rpx 0;
			height: 224rpx;

			.title {
				padding: 18rpx 34rpx;
				font-size: 32rpx;
			}
		}

		.header-cont {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;
			padding: 20rpx 34rpx;

			.cont-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				text {
					line-height: 50upx;
					font-size: 48upx;
					font-family: Arial;
					font-style: italic;
				}

				view {
					font-size: 24upx;
				}
			}
		}

		.btn-view {
			width: 100%;
			height: 100rpx;
			border-radius: 24rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 36rpx;
			margin: 20rpx 0;
		}

		.start-btn {
			border: 1px solid #4F88F7;
			color: #4F88F7;
		}

		.end-btn {
			border: 1px solid #FF2C5C;
			color: #FF2C5C;
		}

		// item样式
		.list {
			.title {
				padding: 24rpx;
				font-size: 36rpx;
			}

			.nodata {
				padding-top: 100rpx;
			}
		}

		.list-item {
			display: flex;
			align-items: center;
			font-size: 28upx;

			.cont-item-right {
				padding: 30upx 0upx;
				min-height: 220rpx;
				margin-left: 20upx;
				border-bottom: 1px solid #E5E5E5;
				font-size: 34rpx;
				color: #222222;
				width: 0;

				.location-icon {
					width: 20rpx;
					height: 20rpx;
					margin: 0 10rpx;
				}

				.do-btn {
					width: 120rpx;
					height: 48rpx;
					border: 1px solid #4F88F7;
					border-radius: 28rpx;
					font-size: 24rpx;
					color: #4F88F7;
					text-align: center;
					line-height: 48rpx;
				}

				.bold {
					font-weight: 600;
				}

				.greey {
					font-size: 28rpx;
					color: #424D5E;
				}

				.greey-font {
					font-size: 28rpx;
					color: #666666;
					line-height: 44rpx;
				}

				.dizhi {
					margin-right: 36rpx;
					flex: 1;
					line-height: 44rpx;
					word-break: break-all;
				}

				.btn {
					width: 132rpx;
					height: 52rpx;
					background: #FFD100;
					opacity: 1;
					border-radius: 28rpx;
					text-align: center;
					line-height: 52rpx;
					color: #191919;
					font-size: 28rpx;
				}
			}

			&:last-child .cont-item-right {
				border-bottom: none;
			}

			.type {
				line-height: 50rpx;
			}

			.mark {
				padding: 6rpx 16rpx;
				border-radius: 12rpx;
				font-size: 22rpx;
				background-color: #EFEFEF;
				color: #666666;
				margin-right: 20rpx;
				margin-bottom: 10rpx;
			}

			.mark-left {
				border: 1px solid #BB8415;
				color: #BB8415;
				margin-right: 20rpx;
			}

			.mark-right {
				border: 1px solid #FF6824;
				color: #FF6824;
			}

		}
	}
</style>
