<template>
	<view class="content">
		<view class="filter_container">
			<view class="search_container" @click="toSearch()">
				<uni-icons class="search_icon" type="search" size="20" color="#bdbdbd"></uni-icons>
				搜索物料编号、物料名称
			</view>
		</view>
			<xinsoft-sl-filter  :topFixed="fixed" ref="slFilter" :color="titleColor" :themeColor="themeColor" :menuList.sync="menuList" @result="getFilter"></xinsoft-sl-filter>
		<view v-for="(item,index) in listCards" :key="index" class="example-box" style="position: relative;flex: 1;" @click="toDetail(index,item)">
			<dev-block :title="item.title" :titleNumber="item.titleNumber" :note="item.note" :extra="item.extra" :tagType="item.tagType"
			 :contentList="item.contentList" ></dev-block>
			 <uni-icons type="checkbox-filled" size="20" :color="item.checked?'#3699FF':'#CECECE'" class="checkbox-filled" ></uni-icons>
		</view>
			<uni-load-more  :status="loading_status" ></uni-load-more>
		<view class="goHome" @click='goMain()'>
			<img src="../../static/img/gohome.png">
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import xinsoftSlFilter from '@/components/xinsoft-sl-filter/xinsoft-sl-filter.vue'
	import devBlock from '@/components/xinsoft-dev-block/xinsoft-dev-block.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			xinsoftSlFilter,
			devBlock,
			uniIcons,
			uniLoadMore
		},
		data() {
			return {
				id:"",
				recordId:'',
				listCards: [],
				themeColor: '#000000',
				titleColor: '#666666',
				fixed:true,
				defaultFacility:'',
				spartType:'',
				pagenumber:1,//当前第几页
				pagesize:5,//每页加载数据条数
				menuList: [
					{
						'title': '备件类型',
						'isMutiple': false,
						'key': 'sparepart_type',
						'detailList': [],
						'defaultSelectedIndex': []
					},
					{
						'title': '仓库',
						'isMutiple': false,
						'key': 'fac_type',
						'detailList': [],
						'defaultSelectedIndex': []
					}
				],
				loading_status: 'more',//more（loading前）、loading（loading中）、noMore（没有更多了）
				previousUrl:''
			}
		},
			computed: {
            ...mapState(['keepPartList']),
        },
		// onShow(){
		// 	var _this=this;
		// 	this.$eventHub.$on('changestate', function (data) {
			
		// 	var datajson=data;
		// 	console.log(datajson);
		// 	if(datajson.id){
		// 		for(var i=0;i<_this.listCards.length;i++){
		// 			if(_this.listCards[i].id==datajson.id){
		// 				 var str=_this.listCards[i].title;
		// 				_this.listCards[i].title=str.split('-')[0]+"-"+datajson.state;
		// 			}
		// 		}
		// 	}
		// 	_this.$eventHub.$off('changestate');
		// });	
		// },
		created() {
			this.getDateList();
			//备件类型
			var _this = this;
			this.$http.request({
			  url: '/apis/dict/getDictsByType',
			  params: {
			    type: "sparepart_type"
			  },
			}).then(res=>{
				if(res.data.code == '200'){
					_this.menuList[0].detailList = [
						{
							'title': '不限',
							'value': ''
						}
					];
					var useType = res.data.datas;
					for (let i = 0; i < useType.length; i++) {
					    var myVal=
					    	{
					    		'title': useType[i].name,
					    		'value': useType[i].id
					    	}
					    _this.menuList[0].detailList.push(myVal);
					}
				}
			}).catch(err=>{
			});
			//仓库
			var _this = this;
			this.$http.request({
			  url: '/apis/dict/getDictsByType',
			  params: {
			    type: "fac_type"
			  },
			}).then(res=>{
				if(res.statusCode == '200'){
					_this.menuList[1].detailList = [
						{
							'title': '不限',
							'value': ''
						}
					];
					var useType = res.data.datas;
					for (let i = 0; i < useType.length; i++) {
					    var myVal=
					    	{
					    		'title': useType[i].name,
					    		'value': useType[i].id
					    	}
					    _this.menuList[1].detailList.push(myVal);
					}
				}
			}).catch(err=>{
			});
		},
		onLoad(option) {
			this.id = option.id;
		},
		//滚动到底部加载下一页
		onReachBottom(obj){
			if(this.loading_status=='noMore'){
				return false;
			}
			this.pagenumber++;
			this.getDateList();
		},
		//下拉刷新
		onPullDownRefresh(){
			this.listCards=[];
			this.pagenumber=1;
			this.loading_status="more";
			this.getDateList();
			  
		},
		methods: {
			...mapMutations(['setkeepPartList']),
				//获取列表数据
			getDateList(){
				this.loading_status="loading";
				var filterRes = {};
				filterRes.pageno = this.pagenumber;
				filterRes.pagesize = this.pagesize;
				filterRes.defaultFacility=this.defaultFacility;
				filterRes.type=this.spartType;
				this.$http.request({
					url: '/apis/materiel/list',
					params: filterRes,
					method:"GET"
				}).then(res => {
					uni.stopPullDownRefresh();
					if(!res.data.data){
					this.loading_status="noMore";
					}else if(res.data.data.datas.length<this.pagesize){
						this.loading_status="noMore";
					}else{
						this.loading_status="more";
					}
					
					if (res.data.code == 0) {
						this.listCards = this.listCards.concat(this.formaterData(res.data.data.datas));
						}
				}).catch(err => {
					this.loading_status="noMore";
					uni.showToast({
						title: '获取信息失败',
						duration: 	1000,
						icon:"none"
					});
				});
			},
			
			//筛选条件
			getFilter(filterRes) {  
				this.defaultFacility=filterRes.sparepart_type;
				this.spartType=filterRes.fac_type;
				this.listCards=[];
				this.pagenumber=1;
				this.loading_status="more";
				this.getDateList();
				
			},
			//列表数据格式化
			formaterData(data) {
				var resData = [];
				data.forEach((vals, index) => {
					var combineJSON = {
						id: vals.id,
						title: vals.name,
						amount:1,//数量
						price:vals.salePrice,//单价
						titleNumber:"["+vals.serialNo+"]",
						checked:false,
						contentList: [{
								id: 1,
								isDouble: true,
								labelName: '规格型号',
								labelContent: vals.specification
							},
							{
								id: 2,
								isDouble: true,
								labelName: '库位',
								labelContent: vals.defaultFacilityName
							},
							{
								id: 3,
								isDouble: true,
								labelName: '设备类型',
								labelContent: vals.typeName
							}
						],
					}
					resData.push(combineJSON);
				});
				return resData;
			},
			//点击单个
			toDetail(index,item){
				this.listCards[index].checked=!this.listCards[index].checked;
			},
			//搜索
			toSearch(){
				uni.redirectTo({
				    url: "sparePartSearch?id="+this.id
				});
			}
		},
		onNavigationBarButtonTap(obj) {
			var keepPartList=this.keepPartList.keepPartList;
			for(var i=0;i<this.listCards.length;i++){
				if(this.listCards[i].checked){
					keepPartList.push(this.listCards[i])
				}
			}
			this.setkeepPartList({id:this.id,keepPartList:keepPartList});
			// var url;
			
			// if(this.recordId){
			// 	url=this.previousUrl+'?id='+this.id+"&recordId="+this.recordId
			// }else{
			// 	url=this.previousUrl+'?id='+this.id
			// }
			uni.redirectTo({
				url:'keepStep2?id='+this.id
			});
			
		},
		onBackPress(options) { //取消默认的返回事件.
			if (options.from === 'backButton' || options.from === 'backbutton' || options.from === 'navigateBack') {
				
				uni.redirectTo({
					url:'keepStep2?id='+this.id
				});
				return true;
		
			}
		
		},
	}
</script>

<style>
	page{
		height: 100%;
	}
</style>
<style scoped>
	
	.content{
		position: relative;
	}
	.filter_container {
		position: fixed;
		width: 60%;
		top: var(--window-top);
		background-color: #fff;
		height: 40px;
		z-index: 2;
		padding-top: 7px;
		box-sizing: border-box;
	}

	>>>.doubleList:nth-of-type(1) {
		width: 60%;
	}

	>>>.doubleList:nth-of-type(2) {
		width: 40%;
	}

	>>>.doubleList:nth-of-type(3) {
		width: 60%;
	}
	>>>.doubleList:nth-of-type(4) {
		width: 40%;
	}
	>>>.dev-label{
		white-space: nowrap;
	}
>>>.select-tab-fixed-top{
	right: 0;
	width: 40%;
	z-index: 2;
	top:var(--window-top);
	white-space: nowrap
}
>>>.popup-layer{
	position: fixed;
	top: var(--window-top);
	margin-top: 40px;
}
>>>.filter-content-detail{
/* 	position: relative;
	height: 90px;
	overflow: scroll; */
}
	.search_container {
		position: relative;
		padding-left: 30px;
		box-sizing: border-box;
		color: #bdbdbd;
		margin: auto;
		width: 90%;
		height: 26px;
		background-color: #F6F6F6;
		border-radius: 26px;
		font-size: 11px;
		line-height: 26px;
	}
.search_icon{
	position: absolute;
	left: 5px;
	top: 3px;
}
	.fliter_content {
		position: absolute;
		right: 15px;
		left: 85px;
		height: 100%;
		z-index: 2;
	}
	.arrowright{
		position: absolute;
		right: 30upx;
		bottom: 30upx;
		font-size: 40upx !important;
	}
	.checkbox-filled{
		position: absolute;
		right: 60upx;
		top: 30upx;
		font-size: 50upx !important;
		
	}
	>>>.dev-block__content{
		padding-right: 36upx;
	}
	>>>.dev-block__header-title-text{
		padding: 20upx;
		overflow: auto;
		white-space: pre-wrap !important;
		
	}
</style>
