<style lang="scss" scoped>
	.header-ctn{
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		.header-nav{
			width: 100%;
			height: 150rpx;
			background-color: $uni-bg-color-main;
			&-content{
				display: flex;
				align-items: center;
				padding-top: 70rpx;
				position: relative;
			}
			&-title{
				color: #fff;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 34rpx;
			}
		}
		.header-search{
			display: flex;
			padding: 20rpx;
			align-items: center;
			background-color: #fff;
			&-input{
				width: 460rpx;
			}
			&-text{
				color: $uni-text-color-main;
				margin-left: 40rpx;
				font-size: 32rpx;
			}
			&-arrow-right{
				color: $uni-text-color-main;
			}
		}
	}
	.equipment-main-content{
		// padding-top: 344rpx;
	}
	.equipment-battery-list{
		background-color: #F6F6F6;
		padding: 20rpx;
		min-height: 990rpx;
	}
	.equipment-battery-box{
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: $box-shadow;
	}
	.equipment-battery-info{
		display: flex;
		align-items: center;
		position: relative;
		border-bottom: 1px solid #ddd;
		padding-bottom: 20rpx;
		&-logo{
			width: 140rpx;
			height: 140rpx;
			border-radius: 100%;
			border: 1px solid #ddd;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		&-list{
			font-size: $uni-font-size-sm;
			padding-left: 20rpx;
		}
		&-row{
			padding-bottom: 10rpx;
		}
		&-renew{
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 120rpx;
			height: 50rpx;
			line-height: 50rpx;
			background-color: #11BF96;
			color: #fff;
			border-bottom-left-radius: 30rpx;
			border-top-left-radius: 30rpx;
			text-align: center;
		}
		&-detail{
			position: absolute;
			right: 0;
			top: 0;

		}
	}
	.equipment-battery-function{
		display: flex;
		justify-content: space-between;
		padding: 0 50rpx;
		padding-top: 20rpx;
		&-box{
			text-align: center;
		}
	}
	.orgPopup-header{
		text-align: center;
		padding: 30rpx 0;
		.orgPopup-logo{
			// text-align: center;
			image{
				width: 110rpx;
				height: 110rpx;
				border-radius: 100%;

			}
		}
	}

</style>

<template>
	<view class="equipment-ctn">
		<view class="header-ctn">
			<view class="header-nav">
				<view class="header-nav-content">
					<u-icon class="pl20" name="arrow-left" color="#fff" size="40" @click="goBackFn"></u-icon>
					<tui-icon class="pl20" name="zuzhi" color="#fff" size="40" @click="openOrgPopupFn"></tui-icon>
					<text class="header-nav-title">旗盾新能源</text>
				</view>
			</view>
			<view class="header-search">
				<view class="header-search-scan mr30" @click="scanFN">
					<u-icon name="scan" color="#34A5E0" size="50"></u-icon>
				</view>
				<u-input class="header-search-input" v-model="searchValue" type="type" border="" size="mini" />
				<text class="header-search-text" @click="searchFn">搜索</text>
				<u-icon class="header-search-arrow-right pl20" name="arrow-right" size="32"></u-icon>
			</view>
			<u-tabs-swiper ref="uTabs" :list="list" active-color="#0CC191" :current="tabsCurrent" :is-scroll="false" @change="onTabChangeFn"></u-tabs-swiper>
		</view>
		<view class="equipment-main-content">
			<view class="equipment-battery-list">
				<mescroll-body top="344" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view class="equipment-battery-box mt20" v-for="(item,index) in cabinetListArr" :key="index">
						<view class="equipment-battery-info">
							<view class="equipment-battery-info-logo">
								<tui-icon name="diandongche" size="80" color="#11BF96"></tui-icon>
							</view>
							<view class="equipment-battery-info-list">
								<view class="equipment-battery-info-row">名称：{{item.name}}</view>
								<view class="equipment-battery-info-row">编号：{{item.id}}</view>
								<view class="equipment-battery-info-row">状态：{{item.state}}</view>
								<view class="equipment-battery-info-row">时间：{{item.time}}</view>
							</view>
							<view class="equipment-battery-info-renew">续费</view>
							<view class="equipment-battery-info-detail"> <u-icon name="arrow-right"></u-icon> </view>
						</view>
						<view class="equipment-battery-function">
							<view class="equipment-battery-function-box" @click="goLocationFn">
								<view class=""><u-icon name="map" size="50" color="#000000"></u-icon></view>
								<view class="">定位</view>
							</view>
							<view class="equipment-battery-function-box">
								<view class=""><tui-icon name="baojing" size="50" color="#000000"></tui-icon></view>
								<view class="">报警</view>
							</view>
							<view class="equipment-battery-function-box" @tap="goSettingFn">
								<view class=""><tui-icon name="setting" size="50" color="#000000"></tui-icon></view>
								<view class="">设置</view>
							</view>
						</view>
					</view>
				</mescroll-body>
			</view>
		</view>

		<u-popup v-model="orgPopupFlag" mode="left" width="550">
			<view class="orgPopup-ctn">
				<view class="orgPopup-header">
					<view class="orgPopup-logo">
						<image src="http://static.drgyen.com/app/hc-app-power/images/car.png" mode=""></image>
					</view>
					<view class="orgPopup-text">
						冠城瑞闽
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import mescrollMixins from "../../components/mescroll-uni/mescroll-mixins.js"
	export default {
		data(){
			return {
				searchValue:"",
				orgPopupFlag:false,
				list: [{
					name: '全部(5)'
				}, {
					name: '在线(5)'
				}, {
					name: '离线(0)'
				}, {
					name: '到期(0)'
				}],
				tabsCurrent:0,
				upOption:{
					// page:{
					// 	num : 0 ,
					// 	size : 10 ,
					// 	time : null
					// },
					// noMoreSize: 5,
					empty:{
						use : true ,
						tip: '~ 暂无相关数据 ~',
						btnText: '刷新试试'
					},
					textNoMore: '----  已经到底啦  ----',
					bgColor:"#f5f5f5"
				},
				cabinetListArr:[],
			}
		},
		mixins:[mescrollMixins],
		onLoad() {

		},
		methods:{
			openOrgPopupFn(){
				this.orgPopupFlag = true;
			},
			// 跳转定位
			goLocationFn(){
				uni.navigateTo({
					url:"../battery/battery-info"
				})
			},
			// 跳转设置
			goSettingFn(){
				uni.navigateTo({
					url:"./equipmentSetting"
				})
			},
			// 左上角返回
			goBackFn(){
				uni.navigateBack();
			},
			// 刷新试试
			emptyClick(){
				console.log("刷新试试 ")
			},
			// 搜索
			searchFn(){
				console.log("搜索");
			},
			// 页签变化
			onTabChangeFn(index){
				this.tabsCurrent = index;
			},
			// 扫码
			scanFN(){
				uni.scanCode({
				    success: function (res) {
				        console.log('条码内容：' + res.result);
				    }
				});
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let obj = {
					pageSize:pageSize,
					pageNum:pageNum,
					search:this.searchValue
				}
				setTimeout(()=>{
					if (true) {
						let curPageData = [{
							name:"QD6040-202007-0270235959110",
							id:"02723590110",
							state:"在线",
							time:"2020年9月27日11:49:30"
						},{
							name:"QD6040-202007-0270235959110",
							id:"02723590110",
							state:"在线",
							time:"2020年9月27日11:49:30"
						},{
							name:"QD6040-202007-0270235959110",
							id:"02723590110",
							state:"在线",
							time:"2020年9月27日11:49:30"
						}];
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						//设置列表数据
						if(pageNum == 1) this.cabinetListArr = []; //如果是第一页需手动置空列表
						this.cabinetListArr = this.cabinetListArr.concat(curPageData); //追加新数据
						this.mescroll.endBySize(curPageLen, 3); // 推荐
					} else{
						this.cabinetListArr = [];
						this.mescroll.endErr();
						this.mescroll.showEmpty();
						// this.mescroll.endUpScroll(true);
						// this.isShowNoMore = true;
					}
				},1000);
			},
		}
	}
</script>

