<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>
				<!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"> -->
					<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>
				<!-- </mescroll-body> -->
			</view>
		</view>
		
		<!-- <tab-bar></tab-bar> -->
	</view>

</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				noDeal: 99,
				//工单信息数据对象
				dataInfo: {},
				//站点供应商数据列表
				datalist: [],
				//待处理
				pending: 0,
				//已完结
				closed: 0,
				//未处理
				notProcessed: 0,
				isLogin: '',
			}
		},
		beforeCreate() {
			const _that = this;
			let token = uni.getStorageSync('token')
			if(!token) {
				let url = '/pages/ucenter/index'
				uni.navigateTo({
					url: '/pages/public/login?topage=' + url
				})
			} else {
				_that.isLogin = token;
				_that.$http.getInfoData().then(response => {
					_that.$storage.setJson("user",response.user)
				})
			}
		},
		onShow() {
			if(uni.getStorageSync('token')) {
				this.getIndexOptionData();
				this.getStationSupData();
			}
		},
		onLoad() {
			
		},
		methods: {
			//跳转工单上报
			gotoOrderUp() {
				let token = uni.getStorageSync('token')
				if(!token) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/orderUp',
					})
				}
			},
			//跳转工单页面
			gotoOrder(type) {
				let token = uni.getStorageSync('token')
				if(!token) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/order?type=' + type,
					})
				}
			},
			//跳转供应商页面
			gotoSupplier(item) {
				let token = uni.getStorageSync('token')
				if(!token) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				} else {
					uni.navigateTo({
						url: "/pages/index/supplier?stationCode=" + item.stationCode
					})
				}
			},
			//获取首页工单信息数据
			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().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-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;
					}
				}
			}
		}
	}

	.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>