<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<div class="barRight">
				<i class="mui-icon-extra mui-icon-extra-filter"></i>
				<a href="#popover" id="openPopover">过滤</a>
			</div>
			<h1 class="mui-title">能源中心</h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		</header>
		<div id="popover" class="mui-popover">
			<div class="popover-form">
				<div class="title">查询日期</div>
				<div class="select">
					<select>
					  <option value ="volvo">Volvo</option>
					  <option value ="saab">Saab</option>
					  <option value="opel">Opel</option>
					  <option value="audi">Audi</option>
					</select>
				</div>
				<div class="title">功率</div>
				<div class="returnCheckbox">
					<div class="mui-input-row mui-checkbox mui-left">
						<label>总功率</label>
						<input name="checkbox1" value="Item 1" type="checkbox" checked>
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<label>A相功率</label>
						<input name="checkbox1" value="Item 1" type="checkbox" checked>
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<label>B相功率</label>
						<input name="checkbox1" value="Item 1" type="checkbox" checked>
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<label>C相功率</label>
						<input name="checkbox1" value="Item 1" type="checkbox" checked>
					</div>
				</div>
				<div class="title">电流</div>
				<div class="returnCheckbox">
					<div class="mui-input-row mui-checkbox mui-left">
						<label>A相功率</label>
						<input name="checkbox1" value="Item 1" type="checkbox" checked>
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<label>B相功率</label>
						<input name="checkbox1" value="Item 1" type="checkbox" checked>
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<label>C相功率</label>
						<input name="checkbox1" value="Item 1" type="checkbox" checked>
					</div>
				</div>
				<div class="title">电压</div>
				<div class="returnCheckbox">
					<div class="mui-input-row mui-checkbox mui-left">
						<label>A相功率</label>
						<input name="checkbox1" value="Item 1" type="checkbox" checked>
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<label>B相功率</label>
						<input name="checkbox1" value="Item 1" type="checkbox" checked>
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<label>C相功率</label>
						<input name="checkbox1" value="Item 1" type="checkbox" checked>
					</div>
				</div>
			</div>	
			<div class="popover-btn">
				<div class="popover-btn1">重置</div>
				<div class="popover-btn2">确定</div>
			</div>
		</div>
		<div class="mui-content">
			<div class="returnHead">
				<div class="returnUnit">
					<div class="returnUnit-item">百万</div>
					<div class="returnUnit-item">拾万</div>
					<div class="returnUnit-item">万</div>
					<div class="returnUnit-item">千</div>
					<div class="returnUnit-item">百</div>
					<div class="returnUnit-item">拾</div>
					<div class="returnUnit-item">1</div>
					<div class="returnUnit-item colorRed">0.1</div>
				</div>
				<div class="returnData">
					<div class="returnData-item">0</div>
					<div class="returnData-item">0</div>
					<div class="returnData-item">0</div>
					<div class="returnData-item">0</div>
					<div class="returnData-item">0</div>
					<div class="returnData-item">0</div>
					<div class="returnData-item">0</div>
					<div class="returnData-item bgRed">2</div>
					<span>kW·h</span>
				</div>
				<div class="returnRadio">
					<div class="mui-input-row mui-radio mui-left">
						<label>总用电量</label>
						<input name="radio1" type="radio">
					</div>
					<div class="mui-input-row mui-radio mui-left">
						<label>当月用电量</label>
						<input name="radio1" type="radio">
					</div>
					<div class="mui-input-row mui-radio mui-left">
						<label>上月用电量</label>
						<input name="radio1" type="radio">
					</div>
					<div class="mui-input-row mui-radio mui-left">
						<label>当年用电量</label>
						<input name="radio1" type="radio">
					</div>
					<div class="mui-input-row mui-radio mui-left">
						<label>当日用电量</label>
						<input name="radio1" type="radio">
					</div>
					<div class="mui-input-row mui-radio mui-left">
						<label>查询其他月份</label>
						<input name="radio1" type="radio">
					</div>
				</div>
			</div>
			<div class="returnScreen">
				<i class="mui-icon-extra mui-icon-extra-arrowleftcricle active"></i>
				<div class="returnTime">
					<p>2022-06-07</p>
					<i class="mui-icon mui-icon-arrowdown"></i>
				</div>
				<i class="mui-icon-extra mui-icon-extra-arrowrightcricle"></i>
			</div>
			<dl class="returnChart returnChartBlue">
				<dt><span>功率监测(kW)</span></dt>
				<dd></dd>
			</dl>
			<dl class="returnChart">
				<dt><span>电压监测(A)</span></dt>
				<dd>

				</dd>
			</dl>
			<dl class="returnChart">
				<dt><span>电压监测(V)</span></dt>
				<dd>

				</dd>
			</dl>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {}
	}
</script>
<script>
	mui.init();

	mui.plusReady(function() {
		//				var view = plus.nativeObj.View.getViewById("title");
		//				
		//				var bitmap = new plus.nativeObj.Bitmap("back");
		//				bitmap.loadBase64Data("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAb1BMVEUAAAAAev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8AAACubimgAAAAI3RSTlMAGfUTGfQTGPMSGPIYGhgaGBsXGxcbFxwXHBccFhwWHRYdHWufDPQAAAABYktHRACIBR1IAAAAB3RJTUUH4QETEBwooeTlkQAAAJVJREFUSMft1EkSgkAQRNFGUXFWHBDBibr/HTUwD5B/48Ig1y+io7u6MqUhf5hsNEY+j5hMgZ/FJ8Xc9ovos3T96utjbfqN/Nb0O/m96Uv5g+mP8ifTn+Ur01/ka9Nf5RvTt/I309/lH6Z/yr9Mn+Q71/MT8B34K/E58Enzv8R/K98HvnF8p3lr8F7izce7lbf3kJ/lDQp9HdBhgg3PAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTAxLTE5VDE2OjI4OjQwKzA4OjAwpTDFwQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wMS0xOVQxNjoyODo0MCswODowMNRtfX0AAAAASUVORK5CYII=");
		//				view.drawBitmap(bitmap, {}, {
		//					top: "10px",
		//					left: "10px",
		//					width: "24px",
		//					height: "24px"
		//				});
		//				
		//				view.setTouchEventRect({top:"0px",left:"0px",width:"44px",height:"100%"});
	});

	mui('.mui-scroll-wrapper').scroll();
	mui('body').on('shown', '.mui-popover', function(e) {
		//console.log('shown', e.detail.id);//detail为当前popover元素
	});
	mui('body').on('hidden', '.mui-popover', function(e) {
		//console.log('hidden', e.detail.id);//detail为当前popover元素
	});
</script>

<style>
	.popover-form{
		padding: 20px;
	}
	.popover-btn{
		display: flex;
		height: 48px;
		
	}
	.popover-btn1{
		width: 100px;
		border: 1px solid #eee;
		text-align: center;
		line-height: 50px;
	}
	.popover-btn2{
		flex: 1;
		background-color: #1677FF ;
		text-align: center;
		line-height: 50px;
		color:#fff;
	}
	.select select{
		background-color: #eee;
		margin-top: 6px;
	}
	.mui-popover .title{
		margin-top: 12px ;
	}
	.returnCheckbox {
		display: flex;
		flex-wrap: wrap;
	}
	
	.returnCheckbox .mui-input-row {
		width:33%;
	}
	
	.mui-checkbox.mui-left input[type=checkbox]{
		left: 0;
	}

	.mui-checkbox.mui-left label {
		padding-left:24px;
	}
	.mui-checkbox input[type=checkbox]:checked:before{
		content: '\e443';
	}
	.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
		font-size: 20px;
	}
	.mui-checkbox input[type=checkbox], .mui-radio input[type=radio]{
		top:11px;
	}
	.mui-popover {
		position: absolute;
		background-color: #fff;
		z-index: 999;
		left: 0 !important;
		right: 0 !important;
		top: 44px !important;
		border-top: 1px solid #eee;
		border-radius: 0;
		width: 100%;
		box-shadow: none;
	}

	.mui-backdrop {
		top: 44px;
	}

	.barRight {
		float: right;
		display: flex;
		align-items: center;
		height: 44px;
	}

	.barRight a {
		margin-left: 3px;
	}

	.barRight i {
		font-size: 16px;
	}

	.returnScreen {
		margin-top: 14px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 12px;
	}

	.returnScreen i {
		color: #D4D6D9;
	}

	.returnScreen .active {
		color: #1677FF;
	}

	.returnTime {
		display: flex;
		align-items: center;
	}

	.returnTime p {
		font-size: 18px;
		margin-right: 6px;
	}

	.returnChart {
		padding: 0 16px;
		background-color: #fff;
	}

	.returnChart dt {
		padding: 16px 0;
	}

	.returnChart dt span {
		position: relative;
		padding-left: 15px;
		font-size: 18px;
	}

	.returnChart dt span:before {
		content: '';
		position: absolute;
		width: 4px;
		height: 14px;
		background-color: #1677FF;
		border-radius: 2px;
		left: 0;
		top: 2px;
	}

	.returnChart dd {
		padding-bottom: 16px;
	}

	.returnHead {
		padding: 20px;
		background-color: #fff;
	}

	.returnUnit {
		display: flex;
		align-items: center;
	}

	.returnData {
		display: flex;
		align-items: center;
	}

	.returnUnit .returnUnit-item {
		width: 36px;
		text-align: center;
		line-height: 48px;
		margin-right: 1px;
	}

	.returnData .returnData-item {
		height: 48px;
		width: 36px;
		background-color: #101010;
		text-align: center;
		line-height: 48px;
		color: #fff;
		font-size: 36px;
		margin-right: 1px;
	}

	.returnData span {
		margin-left: 5px;
	}

	.colorRed {
		color: #900005;
	}

	.bgRed {
		background-color: #900005 !important;
	}

	.returnRadio {
		display: flex;
		flex-wrap: wrap;
		margin-top: 12px;
	}

	.returnRadio .mui-input-row {
		width: 50%;
	}

	.mui-radio.mui-left input[type=radio] {
		left: 0;
	}

	.mui-radio.mui-left label {
		padding-left: 24px;
	}

	.returnChartBlue {
		background-image: linear-gradient(0deg, #034373, #007BD3);
		margin-top: 0;
	}

	.returnChartBlue dt span {
		color: #fff;
	}

	.returnChartBlue dt span:before {
		content: '';
		position: absolute;
		width: 4px;
		height: 14px;
		background-color: #fff;
		border-radius: 2px;
		left: 0;
		top: 2px;
	}
</style>
