<template>
	<view class="page">
		<view class="example-body" v-if="listCards.length>0">
			<view v-for="(item,index) in listCards" :key="index" class="example-box">
				<dev-block :title="item.title" :titleNumber="item.titleNumber" :note="item.note" 
				:contentList="item.contentList" @click="clickDetail(item.id)"></dev-block>
			</view>
			<uni-load-more  :loadingType="loadingType" :contentText="contentText" ></uni-load-more>
		</view>
		<view v-else>
			<no-record   noRecordContent='暂无满足条件的设备， 请输入关键字重新搜索。'></no-record>
		</view>
		<view class="goHome" @click='goMain()'>
			<img src="../../static/img/gohome.png">
		</view>
	</view>
</template>

<script>
import devBlock from '@/components/xinsoft-dev-block/xinsoft-dev-block.vue'
import noRecord from '@/components/xinsoft-no-record/xinsoft-no-record';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';

export default {    
	components: {
		devBlock,noRecord,uniLoadMore
	},
	data() {
		return {
			listCards:[],
			wwebViewContent:{
				nameAndType:''
			},
			historyList: [],
			isHistory: true,
			//上拉刷新，下拉加载
			loadingText: '加载中...',
			loadingType: 0,//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
			contentText: {
				contentdown:'上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			pageSize:5,
			page:1,
		};
	},
	onPullDownRefresh: function() {
		//下拉刷新的时候请求一次数据
	    this.getEquipAccount(this.wwebViewContent);
	},
	onReachBottom: function() {
		//触底的时候请求数据，即为上拉加载更多
		this.getEquipAccountMore(this.wwebViewContent);
	},
	methods: {
		/**
		 * 点击历史记录进行搜索，效果
		 */
		historyClick(item){
			//为标题栏的输入框赋值。
			const currentWebview = this.$mp.page.$getAppWebview();
			currentWebview.setTitleNViewSearchInputText(item.name);
			this.wwebViewContent.nameAndType = item.name;
			this.getEquipAccount({
				nameAndType:item.name
			})
		},
		/**
		 *  调用接口获取当前搜索结果的数据
		 */
		getEquipAccount(filterRes){
			this.page = 1;
			this.loadingType = 0;		
			filterRes.pageno = this.page;
			filterRes.pagesize = this.pageSize;
			this.$http.request({
			  url: '/apis/device/advancedQuery',
			  params:filterRes,
			}).then(res=>{
				if (!res.data.data|| res.data.data.length ==0) {//没有数据
				    this.listCards= [];
					uni.hideNavigationBarLoading();//关闭加载动画
					return;
				}
				if(res.data.code == 0){
					this.page++;//得到数据之后page+1
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();//得到数据后停止下拉刷新
					if(res.data.data.datas.length>0){
						this.listCards = this.formaterData(res.data.data.datas);
					}
				}
			}).catch(err=>{
			});
		},
		getEquipAccountMore(filterRes){
			if (this.loadingType !== 0) {//loadingType!=0;直接返回
				return false;
			}
			this.loadingType = 1;
			uni.showNavigationBarLoading();//显示加载动画
			this.filterResult = JSON.stringify(filterRes, null, 2);
			filterRes.pageno = this.page;
			filterRes.pagesize = this.pageSize;
			this.$http.request({
			  url: '/apis/device/advancedQuery',
			  params:filterRes,
			}).then(res=>{
				this.isHistory = false;
				if (!res.data.data|| res.data.data.length ==0) {//没有数据
					this.loadingType = 2;
					uni.hideNavigationBarLoading();//关闭加载动画
					return;
				}
				if(res.data.code == 0){
					this.page++;//每触底一次 page +1
					this.loadingType = 0;//将loadingType归0重置
					uni.hideNavigationBarLoading();//关闭加载动画
					var resultData = this.formaterData(res.data.data.datas);
					this.listCards = [...this.listCards,...resultData];
				}
			}).catch(err=>{
			});
		},
		clickDetail(id){
			//点击设备详情
			uni.navigateTo({
			    url: 'eqDetail?deviceId='+id
			});
		},
		formaterData(data){
			var resData = [];
			data.forEach((vals,index)=>{
				var combineJSON = {
					id: vals.id,
					title: vals.name,
					// titleNumber:'['+vals.serialno+']',
					contentList: [
						{
							id:1,
							isDouble:true,
							labelName:'设备编号',
							labelContent:vals.serialno
						},						
						{
							id:2,
							isDouble:true,
							labelName:'规格型号',
							labelContent:vals.model
						},
						{
							id:3,
							isDouble:true,
							labelName:'设备类型',
							labelContent:vals.sblx
						},
						{
							id:4,
							isDouble:true,
							labelName:'负责人',
							labelContent:vals.fzr
						},
					],
					note: '设备详情',
					extra: vals.status_name,
					// tagType:vals.using_status+''
				}
				resData.push(combineJSON);
			});
			return resData;
		},
		
		/**
		 * 清理历史搜索数据
		 */
		clearSearch() {
			var _this = this;
			uni.showModal({
				title: '提示',
				content: '是否清理全部搜索历史？',
				success: res => {
					if (res.confirm) {
						this.historyList = _this.removeHistory();
					}
				}
			});
		},
		/**
		 * 保存历史数据
		 */
		setHistory(val) {
			let searchHistory = uni.getStorageSync('search:history');
			if (!searchHistory) searchHistory = [];
			let serachData = {};
			if (typeof(val) === 'string') {
				serachData = {
					name: val,
				};
			} else {
				serachData = val
			}
		
			// 判断数组是否存在，如果存在，那么将放到最前面
			for (var i = 0; i < searchHistory.length; i++) {
				if (searchHistory[i].name === serachData.name) {
					searchHistory.splice(i, 1);
					break;
				}
			}
		
			searchHistory.unshift(serachData);
			uni.setStorage({
				key: 'search:history',
				data: searchHistory,
				success: function() {
				}
			});
		},
		/**
		 * 删除历史数据
		 */
		removeHistory() {
			uni.removeStorage({
				key: 'search:history',
				success: function(res) {
				}
			});
			return []
		}
	},
	// /**
	//  * 当 searchInput 输入时触发
	//  */
	// onNavigationBarSearchInputChanged(e) {
	// 	let text = e.text;
	// 	if (!text) {
	// 		// this.isHistory = true;
	// 		this.historyList = [];
	// 		this.historyList = uni.getStorageSync('search:history');

	// 		return;
	// 	} else {
	// 		// this.isHistory = false;
	// 	}
	// },
	/**
	 * 点击软键盘搜索按键触发
	 */
	onNavigationBarSearchInputConfirmed(e) {
		let text = e.text;
		if (!text) {
			this.isHistory = true;
			this.historyList = [];
			this.historyList = uni.getStorageSync('search:history');
			uni.showModal({
				title: '提示',
				content: '请输入搜索设备编号或设备名称',
				success: res => {
					if (res.confirm) {
					}
				}
			});
			return;
		} else {
			this.isHistory = false;
			// console.log(JSON.stringify(this.historyList));
			this.wwebViewContent.nameAndType = text;
			uni.hideKeyboard();
			this.getEquipAccount(this.wwebViewContent);
		}
	},
	/**
	 *  点击导航栏 buttons 时触发
	 */
	onNavigationBarButtonTap() {
		var inputText =  document.querySelector("input").value;
		// const currentWebview = this.$mp.page.$getAppWebview();
		// var inputText = currentWebview.getTitleNViewSearchInputText();
		if(inputText){
			this.isHistory = false;
			// this.wwebViewContent.nameAndType = inputText;
			uni.hideKeyboard()
			this.getEquipAccount({
				nameAndType:inputText
			});
		}else{
			this.isHistory = true;
			uni.showModal({
				title: '提示',
				content: '请输入搜索设备编号或设备名称',
				success: res => {}
			})
		}
	}
};
</script>

<style>
.history-title {
	display: flex;
	justify-content: space-between;
	padding: 20upx 30upx;
	padding-bottom: 0;
	font-size: 34upx;
	color: #333;
}
.history-title .uni-icon {
	font-size: 40upx;
}
.history-content {
	display: flex;
	flex-wrap: wrap;
	padding: 15upx;
}
.history-item {
	padding: 4upx 35upx;
	border: 1px #f1f1f1 solid;
	background: #fff;
	border-radius: 50upx;
	margin: 12upx 10upx;
	color: #999;
}
.history-list-box {
	/* margin: 10upx 0; */
}
.history-list-item {
	padding: 30upx 0;
	margin-left: 30upx;
	border-bottom: 1px #EEEEEE solid;
	font-size: 28upx;
}

.no-data {
	text-align: center;
	color: #999;
	margin: 100upx;
}
</style>
