<template>
	<view class="main">
		<u-navbar autoBack placeholder bgColor="transparent"
			style="background: linear-gradient(91deg, #FDEDEE 0%, #FFFFFF 100%);">
			<view class="flex" slot="left">
				<u-icon name="arrow-left" size="19"></u-icon>
				<text>设备耗纸统计</text>
			</view>
		</u-navbar>
		<view class="regionalfiltering" @click="showZone=true">
			<text>{{zone==''?'请选择区域':zone}}</text>
			<image class="filter" src="../../static/hoem/ic_filter.png"></image>
		</view>
			<u-picker keyName="name" :show="showZone" :columns="zoneList" :closeOnClickOverlay="true" @close="showZone = false"
				@cancel="showZone = false" @confirm="onZone"></u-picker>
		<view class="Grid">
			<view class="Grid-Item" v-for="item in Paperdata" :key="item.id">
				<view class="address">{{item.area}} {{item.equipmentId}}</view>
				<view>
					<view class="consumeNumber">{{item.allLength}}</view>
					<view>
						<text class="consumeNumberText">
							耗纸总数
						</text>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Paperdata: [],
				zone: '',
				showZone: false,
				zoneList: [
					['中原区', '二七区', '管城回族区', "金水区", "上街区", "惠济区"]
				],
				regionCode: '',
			}
		},
		onShow() {
			this.getEquipentpaper();
			this.getZone();
		},
		methods: {
			//获取区域列表数据
			getZone() {
				const params = {
					url: '/system/province/list',
					data: {},
				}
				this.$request(params).then(res => {
					this.zoneList[0].length = 0
					for (var i = 0; i < res.rows.length; i++) {
						this.zoneList[0].push(res.rows[i])
					}
				})
			},
			onZone(e) {
				this.zone = e.value[0].name;
				this.regionCode = e.value[0].code;
				console.log(e)
				this.showZone = false;
				this.getEquipentpaper();
			},
			// 耗纸统计
			getEquipentpaper() {
				const params = {
					url: '/sun/mqtt/getEquipentpaper',
					data: {
						// regionCode
						regionCode: this.regionCode
					},
				}
				this.$request(params).then(res => {
					console.log(res.data)
					this.Paperdata = res.data;
				})
			},
		}
	}
</script>
<style lang="scss">
	.main {
		background-color: #F8F4F4;
		min-height: 100vh;

		.regionalfiltering {
			justify-content: space-between;
			align-items: center;
			display: flex;
			margin: 20rpx 24rpx;
			padding: 20rpx;
			background-color: white;

			.filter {
				width: 18rpx;
				height: 18rpx;
			}
		}

		.Grid {
			display: flex;
			flex-wrap: wrap;
			margin: 0 4%;

			.Grid-Item {
				width: 48%;
				height: 156rpx;
				margin-top: 10rpx;
				border: 1rpx solid #ccc;
				padding-left: 16rpx;
				margin-left: 12rpx;
				box-sizing: border-box;

				&:nth-child(odd) {
					background: linear-gradient(180deg, #D2D2FC 0%, #EBEFF7 100%);
					box-shadow: inset 0rpx 0rpx 6rpx 1rpx #8AB7FF;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
				}

				&:nth-child(even) {
					background: linear-gradient(180deg, #D2F6FC 0%, #EBF5F7 100%);
					box-shadow: inset 0rpx 0rpx 6rpx 1rpx #8AB7FF;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
				}

				.address {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					margin-top: 14rpx;

				}
			}

			.consumeNumber {
				color: #333333;
				margin-top: 14rpx;
				font-size: 28rpx;
				font-weight: 800;
			}

			.consumeNumberText {
				color: #999999;
				margin-top: 14rpx;
				font-size: 20rpx;
			}
		}

		.tabar {
			display: flex;
			justify-content: space-between;
			text-align: center;
			padding: 55rpx;
			background: linear-gradient(91deg, #FCD4D2 0%, #FDEDEE 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;


			.title {
				color: #333333;
				font-size: 36rpx;
				font-weight: 800;
			}

			.positioning {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 17rpx;
				color: #333333;
				line-height: 43rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.earlyWarning {
				width: 274rpx;
				height: 164rpx;
			}
		}

	}
</style>