<template>
	<view class="main-container">
		<image class="set-bg" src="@/static/home_bg.png"></image>
		<view class="page-content">
			<view class="page-home-order-container">
				<view class="page-home-order-title">
					故障工单
				</view>
				<view class="page-home-order-items-container">
					<view class="page-home-order-item" @click="gotoOrderUp">
						<image class="page-home-order-img" src="@/static/home-order-first.png" mode=""></image>
						<view class="page-home-order-name">
							故障上报
						</view>
						<view class="page-home-order-remark">
							设备故障单填写
						</view>
					</view>
					<view class="page-home-order-item" @click="gotoOrder(1)">
						<image class="page-home-order-img" src="@/static/home-order-second.png" mode=""></image>
						<view class="page-home-order-name">
							{{'待处理(' + pending + ')'}}
						</view>
						<view class="page-home-order-remark">
							未完成的事项
						</view>
					</view>
					<view class="page-home-order-item" @click="gotoOrder(2)">
						<image class="page-home-order-img" src="@/static/home-order-third.png" mode=""></image>
						<view class="page-home-order-name">
							{{'已完结(' + closed + ')'}}
						</view>
						<view class="page-home-order-remark">
							已完成可查看
						</view>
					</view>
					<view class="page-home-order-item" @click="gotoOrder(0)">
						<image class="page-home-order-img" src="@/static/home-order-first.png" mode=""></image>
						<view class="page-home-order-name">
							{{'未处理(' + notProcessed + ')'}}
						</view>
						<view class="page-home-order-remark">
							已生成未处理工单
						</view>
					</view>
				</view>
			</view>
			<view class="page-home-supplier-container">
				<view class="page-home-supplier-title">
					合作者
				</view>
				<view class="page-home-supplier-search">
					<view class="keyword"><uni-easyinput @clear="getAllData" clearable v-model="keyword" placeholder="请输入换电站名称"></uni-easyinput></view>
					<view><button type="primary" class="search" size="mini" @click="searchStation">搜索</button></view>
				</view>
				<template v-if="datalist.length > 0">
					<view class="page-home-supplier-items" v-for="(item,index) in datalist" :key="index" @click="gotoSupplier(item)">
						<view class="page-home-supplier-items-title">
							{{item.stationName}}
						</view>
						<view class="page-home-supplier-number">
							{{item.supCount}}
						</view>
					</view>
				</template>
				<view class="page-home-no-data" v-else>
					暂无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				keyword:'',//关键字搜索
				noDeal: 99,
				//工单信息数据对象
				dataInfo: {},
				//站点合作者数据列表
				datalist: [],
				//待处理
				pending: 0,
				//已完结
				closed: 0,
				//未处理
				notProcessed: 0,
				isLogin: '',
				params:{
					longitude:null,
					latitude:null,
					code:null,
				}
				
			}
		},
		beforeCreate() {
			const _that = this;
			let token = uni.getStorageSync('token')
			if(token) {
				_that.isLogin = token;
				_that.$http.getInfoData().then(res => {
					if(res.code == 401) {
						uni.navigateTo({
							url: '/pages/public/login'
						})
					} else if(res.code == 200) {
						_that.$storage.setJson("user",res.user)
					}
				})
			}
		},
		onShow() {
			if(uni.getStorageSync('token')) {
				this.getIndexOptionData();
				this.getStationSupData();
			}
			// this.getUserCode()
		},
		onLoad() {

		},
		mounted() {
		},
		methods: {
			//获取所有换电站
			getAllData(){
				this.keyword=''
				this.getStationSupData()
			},
			//搜索换电站
			searchStation(){
				if(!this.params.code && uni.getStorageSync('token')){
					this.getUserCode()
				}
				this.getStationSupData()
			},
			//获取用户code
			getUserCode(){
				let that=this
				wx.login({
					success(res){
						that.params.code=res.code
						that.mapSelect()
					}
				})
			},
			//获取用户经纬度
			mapSelect() {
				uni.showLoading({
					title: '加载中'
				});
				const that = this
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: function(res) {
						if(res){
							that.params.latitude = res.latitude
							that.params.longitude = res.longitude
							that.$http.getUserAdress(that.params).then(res=>{
								uni.hideLoading()
							})
						}
						
					},
					fail: () => {
						uni.hideLoading();
						that.getMapLocation()
						that.$utils.msg("定位失败")
					},
				})
			},
			//提示用户打开位置信息
			getMapLocation() {
				uni.getSetting({
					success: (res) => {
						var status = res.authSetting
						if (!status['scope.userLocation']) {
							// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
							uni.showModal({
								title: '是否授权当前位置',
								content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
								success: (tip) => {
									if (tip.confirm) {
										// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
										uni.openSetting({
											success: (data) => {
												// 如果用户授权了地理信息在，则提示授权成功
												if (data.authSetting[
														'scope.userLocation'] ===
													true) {
													uni.showToast({
														title: '授权成功',
														icon: 'success',
														duration: 1000,
													})
													// 授权成功后，然后再次chooseLocation获取信息
													this.mapSelect()
												} else {
													uni.hideLoading();
												}
											},
										})
									} else {
										uni.hideLoading();
										this.noposition = '授权失败'
										this.Authorize = false
									}
								},
							})
						}
						if (status['scope.userLocation'] === true && this.latitude === null && this.longitude === null) {
							uni.showToast({
								title: '请开启您手机的位置信息!',
								icon: 'none',
								duration: 5000,
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '调用授权窗口失败',
							icon: 'none',
							duration: 1000,
						})
					},
				})
			},
			//跳转工单上报
			gotoOrderUp() {
				if(!this.params.code && uni.getStorageSync('token')){
					this.getUserCode()
				}
				let token = uni.getStorageSync('token')
				if(!token) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/orderUp',
					})
				}
			},
			//跳转工单页面
			gotoOrder(type) {
				if(!this.params.code && uni.getStorageSync('token')){
					this.getUserCode()
				}
				let token = uni.getStorageSync('token')
				if(!token) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/order?type=' + type,
					})
				}
			},
			//跳转合作者页面
			gotoSupplier(item) {
				if(!this.params.code && uni.getStorageSync('token')){
					this.getUserCode()
				}
				let token = uni.getStorageSync('token')
				if(!token) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				} else {
					uni.navigateTo({
						url: `/pages/index/supplier?stationCode=${item.stationCode}&stationName=${item.stationName}`
					})
				}
			},
			//获取首页工单信息数据
			getIndexOptionData() {
				const _that = this;
				_that.dataInfo = {};
				uni.showLoading({
					title: '搜索中...',
				})
				_that.$http.getOpsOrderOverview('').then(res => {
					uni.hideLoading();
					if(res.code == 200) {
						let {pending, closed, notProcessed} = res.data
						_that.pending = pending;
						_that.closed = closed;
						_that.notProcessed = notProcessed;
					} else {
						_that.$utils.msg(res.msg);
					}
				})
			},
			//获取首页合作者数量信息
			getStationSupData() {
				const _that = this;
				_that.datalist = [];
				uni.showLoading({
					title: '搜索中...',
				})
				_that.$http.getStationOverview(_that.keyword).then(res => {
					uni.hideLoading();
					if(res.code == 200) {
						_that.datalist = res.data || [];
					} else {
						_that.$utils.msg(res.msg);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main-container {
		height: 100vh;
		position: relative;
		box-sizing: border-box;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #FFFFFF;
		.set-bg {
			width: 100%;
			height: 100%;
			top: env(safe-area-inset-top);
			left: 0;
			z-index: 0;
		}
		.page-content {
			z-index: 1;
			padding: 0rpx 30rpx;
			.page-home-order-container {
				position: absolute;
				top: 25%;
				height: 430rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				width: calc(100% - 60rpx);
				.page-home-order-title {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #1E2128;
					line-height: 38rpx;
					padding: 32rpx 26rpx;
				}
				.page-home-order-items-container {
					display: flex;
					flex-flow: wrap;
					padding: 0 18rpx;
					border-radius: 16rpx;
					.page-home-order-item {
						width: calc(50% - 28rpx);
						height: 128rpx;
						position: relative;
						margin: 0 12rpx 26rpx 12rpx;
						// padding: 24rpx;
						.page-home-order-img {
							height: 100%;
							width: 100%;
						}
						.page-home-order-name {
							font-size: 28Rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #1E2128;
							line-height: 32Rpx;
							position: absolute;
							top: 26rpx;
							left: 24rpx;
						}
						.page-home-order-remark {
							font-size: 22rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #88909B;
							line-height: 26rpx;
							position: absolute;
							top: 70rpx;
							left: 24rpx;
						}
					}
				}
			}
			.page-home-supplier-container {
				position: absolute;
				top: calc(25% + 450rpx);
				height: auto;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				width: calc(100% - 60rpx);
				margin-top: 30rpx;
				min-height: 200rpx;
				padding: 0 30rpx;
				.page-home-supplier-title {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #1E2128;
					line-height: 38rpx;
					padding: 32rpx 0rpx;
				}
				.page-home-supplier-search{
					display: flex;
					width: 100%;
					align-items: center;
					.keyword{
						flex: 1;
						margin-right: 20rpx;
					}
					:last-child{
						display: flex;
						align-items: center;
					}
					.search{
						background-color: #2979ff;
						height: 36px;
						line-height: 36px;
						font-size: 14px;
					}
				}
				.page-home-supplier-items {
					display: flex;
					position: relative;
					height: 100rpx;
					border-bottom: 1rpx #EEEEEE solid;
					.page-home-supplier-items-title {
						font-size: 28rpx;
						height: 100rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #1D2129;
						line-height: 100rpx;
					}
					.page-home-supplier-number {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 700;
						color: #1D2129;
						position: absolute;
						line-height: 100rpx;
						right: 10rpx;
					}
				}
				.page-home-no-data {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #1D2129;
					line-height: 200rpx;
					text-align: center;
				}
			}
		}
	}

	.authorization {
		width: 640rpx;
		height: 840rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.navBarBox{position: fixed; z-index: 1;}
	.navBarBox .statusBar {}
	.navBarBox .navBar {
		padding: 3rpx 50rpx;
		padding-bottom: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: fixed;
		.navBar-title {
			height: 70rpx;
			font-size: 34rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 70rpx;
		}
	}
	.navBarBox .navBar .logo {
		width: 82rpx;
		height: 82rpx;
		margin-right: 10rpx;
	}
	.grace-loading {
		position: relative;
		text-align: center;
		padding-top: 100rpx;
		height: 300rpx;
		color: #979797;
	}

	
</style>