<template>
	<view class="page">
		<view class="uni-flex uni-row">
			<view class="filter_container" style="width: 20%;">
				<view class="search_container" @click="toSearch()">
					<uni-icons class="search_icon" type="search" size="20" color="#fff"></uni-icons>搜索
				</view>
			</view>
			<xinsoft-sl-filter :menuList.sync="menuList" @result="getDateList"></xinsoft-sl-filter>
			<view class="otherFixed" style="width: 25%; right:5px;">
				<view class="text" style="width: 100%;"  @click="filterDate">{{timeData.begin==''?'维修时间':(timeData.begin+'~'+timeData.end)}}</view>
			</view>
		</view>
		<view class="example-body" v-if="listCards.length>0">
			<view v-for="(item,index) in listCards" :key="index" class="example-box" style="position: relative;flex: 1;" @click="toDetail(item)">
				<dev-repair :title="item.title" :titleNumber="item.titleNumber" :note="item.note" :extra="item.extra" :tagType="item.tagType"
				 :contentList="item.contentList" 
				 :contentBottom="item.contentBottom"
				 ></dev-repair>
			</view>
			<uni-load-more  :loadingType="loadingType" :contentText="contentText" ></uni-load-more>
		</view>
		<view class="example-body" v-else>
			<no-record ></no-record>
		</view>
		<uni-calendar ref="calendar" :lunar="false" :range="true" :start-date="startDate" :end-date="endDate" :date="date"  @confirm="confirmDate" />
		<view class="goHome" @click='goMain("addRepairInfo")'>
			<img src="../../static/img/gohome.png">
		</view>
	</view>
</template>

<script>
	import xinsoftSlFilter from '@/components/xinsoft-sl-filter/xinsoft-sl-filter.vue'
	import devRepair from '@/components/xinsoft-dev-repair/xinsoft-dev-repair.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import noRecord from '@/components/xinsoft-no-record/xinsoft-no-record';
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	
	export default {
		components: {
			xinsoftSlFilter,
			devRepair,
			uniIcons,
			uniLoadMore,
			uniCalendar,
			noRecord
		},
		data() {
			return {
				listCards: [],
				fixed:true,
				themeColor: '#000000',
				titleColor: '#666666',
				filterResult:'',
				page:1,//当前第几页S
				pageSize:5,//每页加载数据条数
				menuList: [{
						'title': '故障类型',
						'isMutiple': false,
						'key': 'type',
						'detailList': [],
						'defaultSelectedIndex': []
					},
					{
						'title': '使用情况',
						'isMutiple': false,
						'key': 'usage',
						'detailList': [],
						'defaultSelectedIndex': []
					}
				],
				//上拉刷新，下拉加载
				loadingText: '加载中...',
				loadingType: 0,//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				contentText: {
					contentdown:'上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				//日历变量。
				date: '',
				startDate: '',
				endDate: '',
				timeData:{
					begin:"",
					end:''
				},
			}
		},
		created() {
			this.getDateList({});
			
			//故障类型
			var _this = this;
			this.$http.request({
			  url: '/apis/dict/getDictsByType',
			  params: {
			    type: "device_malfunction"
			  },
			}).then(res=>{
				if(res.statusCode == '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=>{
			});
			//使用情况
			this.$http.request({
			  url: '/apis/dict/getDictsByType',
			  params: {
			    type: "device_status"
			  },
			}).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=>{
			});
			
		},
		onPullDownRefresh: function() {
			//下拉刷新的时候请求一次数据
		    this.getDateList(JSON.parse(this.filterResult));
		},
		onReachBottom: function() {
			//触底的时候请求数据，即为上拉加载更多
			this.getDateListMore(JSON.parse(this.filterResult));
		},
		methods: {
			//获取列表数据
			
			getDateList(filterRes){
				this.page = 1;
				this.loadingType = 0;		
				this.filterResult = JSON.stringify(filterRes, null, 2);
				filterRes.pageno = this.page;
				filterRes.pagesize = this.pageSize;
				filterRes.startTime = this.timeData.begin
				filterRes.endTime = this.timeData.end
				this.$http.request({
				  url: '/apis/repairRecord/deviceRepairEventList',
				  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();//得到数据后停止下拉刷新
						this.listCards = this.formaterData(res.data.data.datas);
					}
				}).catch(err=>{
					uni.showToast({
						title: '获取信息失败',
						duration: 	2000,
						icon:"none"
					});
				});
			},
			getDateListMore(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;
				filterRes.endTime = this.timeData.begin
				filterRes.endTime = this.timeData.end
				this.$http.request({
				  url: '/apis/repairRecord/deviceRepairEventList',
				  params:filterRes,
				}).then(res=>{
					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=>{
					uni.showToast({
						title: '获取信息失败',
						duration: 	2000,
						icon:"none"
					});
				});
			},
			formaterData(data) {
				var resData = [];
				data.forEach((vals, index) => {
					var combineJSON = {
						id: vals.id,
						title:  vals.deviceSerialno?vals.deviceSerialno + "/" + vals.deviceName:' ',
						// titleNumber:"停机时间："+(vals.offTime||''),
						contentList: [{
								id: 1,
								isDouble: true,
								labelName: '故障类型',
								labelContent:vals.typeName
							},
							{
								id: 2,
								isDouble: true,
								labelName: '使用情况',
								labelContent: vals.usageName
							},
							{
								id: 3,
								isDouble: true,
								labelName: '维修工时',
								labelContent: vals.manHour?(vals.manHour+'小时'):''
							},
							{
								id: 4,
								isDouble: true,
								labelName: '维修成本',
								labelContent: vals.cost?(vals.cost+'元'):''
							},
							{
								id: 5,
								isDouble: false,
								labelName: '维修时间',
								labelContent: (vals.startTime||'-')+ '~'+(vals.endTime||'-')
							},
							{
								id: 6,
								isDouble: true,
								labelName: '维修人',
								labelContent: vals.heldPersonName
							},
							{
								id: 7,
								isDouble: true,
								labelName: '验收结果',
								labelContent: vals.statusName
							}
						],
						// contentBottom: [{
						// 		id: 1,
						// 		isDouble: true,
						// 		labelName: '维修人',
						// 		labelContent: vals.heldPersonName
						// 	},
						// 	{
						// 		id: 2,
						// 		isDouble: true,
						// 		labelName: '验收结果',
						// 		labelContent: vals.statusName
						// 	}
						// ],
						note:this.rightNote(vals.statusName),
						statusName:vals.statusName,
						eventId:vals.eventId
					}
					resData.push(combineJSON);
				});
				return resData;
			},
			rightNote(statusName){
				if(statusName == '暂存'){
					return '编辑'
				}else{
					return '维修详情'
				}
			},
			filterDate() {
				this.$refs.calendar.open()
			},
			confirmDate(e){
				if(e.range.begin && e.range.end){
					this.timeData = {
						begin:e.range.begin+' 00:00:00',
						end:e.range.end+' 00:00:00'
					}
					this.getDateList(JSON.parse(this.filterResult));
				}
			},
			//查看详情
			toDetail(item){
				if(item.statusName == '暂存'){
					//重置addRepairInfo
					uni.removeStorageSync('addRepairInfo');
					//跳转到维修记录
					uni.navigateTo({
						url: "repairRecordAddStep1?eventId="+item.eventId+'&recordId='+item.id
					});
				}else{
					uni.navigateTo({
						url: "repairDetail?id="+item.eventId
					});
				}
				
			},
			//搜索
			toSearch(){
				uni.navigateTo({
				    url: "repairRecordSearch"
				});
			}
		},
		onNavigationBarButtonTap(obj) {
			//先重置下session中的。addRepairInfo
			uni.removeStorageSync('addRepairInfo');
			//跳转到新增维修记录
			uni.navigateTo({
			    url: "repairRecordAddStep1"
			});
		},
		onBackPress(options) { //取消默认的返回事件.
			uni.navigateTo({
				url: "eqRepair"
			});
			return true;
		}
		
	}
</script>


<style scoped>

	>>>.select-tab-fixed-top{
		left: 20%;
		right: 20%;
		width: 55%;
	}
	
</style>
