<template>
	<view class="page">
		<u-navbar :is-back="false" title="运营" :border-bottom="false" back-icon-color="000" :background="bgc"
			title-color='#000' title-size='36' height='40' id="navbar">
		</u-navbar>
		<tab-bars :indexs='1' style=""></tab-bars>
		<image src="https://api.ccttiot.com/smartmeter/img/static/umtXLN0X6kijXgwlI4bg" class="imgbj" mode=""></image>
		<view class="box">
			<view class="shouru">
				<view class="name">
					收入统计
				</view>
				<view class="tongji">
					<view class="one">
						<view class="bot">
							今日收入
						</view>
						<view class="top">
							0
						</view>
						<view class="bot">
							今日订单数
						</view>
						<view class="top">
							0
						</view>
					</view>
					<view class="one">
						<view class="bot">
							本周收入
						</view>
						<view class="top">
							0
						</view>
						<view class="bot">
							本周订单数
						</view>
						<view class="top">
							0
						</view>
					</view>
					<view class="one">
						<view class="bot">
							本月收入
						</view>
						<view class="top">
							0
						</view>
						<view class="bot">
							本月订单数
						</view>
						<view class="top">
							0
						</view>
					</view>
				</view>
			</view>
			<view class="gailan">
				<view class="name">
					运营概览
				</view>
				<view class="top">
					<view class="lt">
						经营概况
					</view>
					<view class="rt">
						<view @click="btntab(1)" :class="tabindex == 1 ? 'actives' : ''">
							近30天
						</view>
						<view @click="btntab(2)" :class="tabindex == 2 ? 'actives' : ''">
							近七天
						</view>
					</view>
				</view>
				<view class="zhixian">
					<l-echart class="line-chart" ref="lineChart2"></l-echart>
					<view class="shuom">
						<view class="">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uk2PaAnt4mMTrYhbM7PY" mode="">
							</image>订单营收
						</view>
						<view class="">
							<image src="https://api.ccttiot.com/smartmeter/img/static/ubLD9khOF4jiHmD9O9QA" mode="">
							</image>订单数
						</view>
					</view>
				</view>
				<view class="bijiao">
					<view class="lt" style="border-right: 1px solid #D8D8D8;">
						<view class="price">
							1359
						</view>
						<view class="wz">
							订单营收(元)
						</view>
					</view>
					<view class="lt" style="padding-left: 34rpx;box-sizing: border-box;">
						<view class="price">
							1359
						</view>
						<view class="wz">
							订单数(单)
						</view>
					</view>
				</view>
			</view>
			<view class="shebei">
				<view class="name">
					当前运营情况 <image @click="smflag = !smflag" src="https://api.ccttiot.com/smartmeter/img/static/uvgciot52bbI8bBduvPK" mode=""></image> <text v-if="smflag">使用数/总数</text>
				</view>
				<view class="bd">
					<view class="one">
						<view class="">
							房间
						</view>
						<view class="cu">
							<text>2</text>/10
						</view>
					</view>
					<view class="one">
						<view class="">
							大厅设施
						</view>
						<view class="cu">
							<text>3</text>/10
						</view>
					</view>
					<view class="one" style="border: none;">
						<view class="">
							设备总数
						</view>
						<view class="cu">
							<text>5</text>/20
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "",
				},
				tabindex: 1,
				smflag:false
			}
		},
		onLoad() {

		},
		onShow() {
			//加载折线图数据
			this.loadLineData2() 
		},
		mounted() {

		},
		methods: {
			// 点击切换周还是月
			btntab(num) {
				this.tabindex = num
			},
			//加载折线图数据
			loadLineData2() {
				//这里请求服务器拿到数据
				let res = {
					//x轴数据
					xData: ['6/11', '6/12', '6/13', '6/14', '6/15', '6/16', '6/17'],
					//y轴数据
					yData: [50, 120, 150, 220, 180, 300, 130], //订单数
					yData1: [2000, 1820, 2350, 1200, 800, 3000, 2190], //营收
				}
				let option = {
					xAxis: {
						type: 'category',
						// x轴数据文字颜色
						axisLabel: {
							color: '#a7a7a7'
						},
						// x轴那天坐标轴线的颜色
						axisLine: {
							lineStyle: {
								color: '#f1f1f1',
							}
						},
						//x轴上面刻度线隐藏
						axisTick: {
							show: false,
						},
						//这里是x轴数据
						data: res.xData
					},
					//设置网格
					grid: {
						top: 40,
						bottom: 30,
					},
					//y轴设置
					yAxis: {
						type: 'value',
						//y轴标签文字颜色
						axisLabel: {
							color: '#a7a7a7'
						},
						// y轴分割线设置为虚线
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed'
							}
						}
					},
					//设置提示为点击时
					tooltip: {
						trigger: 'axis',
						triggerOn: 'click',
						formatter: '{b}:  \n {a0}: {c0} \n {a1}: {c1}'
					},
					//设置曲线的颜色
					color: ['#A9D2FF', '#B1A5FF'],
					series: [{
							name: "订单营收",
							//这里是数据
							data: res.yData1,
							type: 'line',
							//设置为平滑，默认为折线
							smooth: false,
						},
						{
							name: "订单数",
							//这里是数据
							data: res.yData,
							type: 'line',
							//设置为平滑，默认为折线
							smooth: false,
						}
					]
				}
				this.$refs.lineChart2.init(echarts, chart => {
					chart.setOption(option);
				})
			}

		}
	}
</script>

<style lang="scss">
	.page {
		// background: #fff;
	}

	.actives {
		background: #fff !important;
		box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.15) !important;
	}

	.box {
		width: 100%;
		height: 80vh;
		overflow: scroll;
	}
	.shebei{
		width: 680rpx;
		margin: auto;
		margin-top: 34rpx;
		.name{
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			display: flex;
			align-items: center;
			text{
				width: 184rpx;
				height: 54rpx;
				background: #E8E8E8;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				line-height: 54rpx;
				text-align: center;
				font-size: 26rpx;
				color: #3D3D3D;
				margin-left: 20rpx;
			}
			image{
				margin-left: 10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
		.bd{
			width: 680rpx;
			height: 172rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(72,137,59,0.1);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			margin-top: 20rpx;
			.one{
				border-right: 1px solid #C7C7C7;
				width: 33%;
				view{
					font-size: 24rpx;
					color: #3D3D3D;
				}
				.cu{
					font-weight: 600;
					font-size: 40rpx;
					color: #3D3D3D;
					margin-top: 8rpx;
					text{
						color: #48893B;
					}
				}
			}
		}
	}
	.gailan {
		width: 680rpx;
		max-height: 1868rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(72, 137, 59, 0.1);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: auto;
		margin-top: 34rpx;
		padding: 0 30rpx;
		padding-top: 38rpx;
		padding-bottom: 24rpx;
		box-sizing: border-box;

		.bijiao {
			width: 636rpx;
			max-height: 204rpx;
			background: #DEF1DA;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			display: flex;
			padding: 24rpx 40rpx;
			box-sizing: border-box;
			margin-top: 34rpx;

			.lt {
				width: 50%;

				.price {
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;
				}

				.wz {
					font-size: 24rpx;
					color: #3D3D3D;
					display: flex;
					align-items: center;
					margin-top: 10rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.zhixian {
			.shuom {
				margin-top: 26rpx;
				display: flex;
				align-items: center;
				padding: 0 76rpx;
				box-sizing: border-box;
				justify-content: space-between;

				view {
					font-size: 24rpx;
					color: #3D3D3D;

					image {
						width: 76rpx;
						height: 18rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.top {
			display: flex;
			justify-content: space-between;
			height: 66rpx;
			line-height: 66rpx;
			align-items: center;
			margin-top: 24rpx;

			.lt {
				border-left: 10rpx solid #48893B;
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;
				height: 50rpx;
				line-height: 50rpx;
				padding-left: 16rpx;
				box-sizing: border-box;
			}

			.rt {
				width: 236rpx;
				height: 66rpx;
				background: #F6F6F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					width: 116rpx;
					height: 58rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					text-align: center;
					line-height: 58rpx;
				}
			}
		}

		.name {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			text-align: center;
			width: 100%;
		}
	}

	.shouru {
		width: 680rpx;
		max-height: 838rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(72, 137, 59, 0.1);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: auto;
		margin-top: 24rpx;
		padding: 26rpx 32rpx;
		box-sizing: border-box;

		.tongji {
			display: flex;
			text-align: center;
			margin-top: 20rpx;
			box-sizing: border-box;
			justify-content: space-between;

			.one {
				.top {
					font-weight: 600;
					font-size: 36rpx;
					color: #48893B;
				}

				.bot {
					font-size: 28rpx;
					color: #7C7C7C;
				}
			}
		}

		.name {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
		}
	}

	.imgbj {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
</style>