<template>
	<view class="page">		
		<view class="example-body" v-if="listCards.length>0">
			<view class="myContainer  myContentBox" v-for="(items,index) in listCards" :key='index'  @click="edit(items)">
				<view class="top_container detail_list_top" >
					<view class="report_status" style="float: left;line-height: 50upx;bac">{{items.typeName}}</view>
					<view class="report_status3" :class="'report_status3_'+items.usageId" style="background-color: #8bef8b;">{{items.usageName}}</view>
					<view class="report_status" style="clear: both;">任务编号：{{items.workOrederNo}}</view>
					<!-- <view class="edit" @click="edit(index,1)" v-if="items.statusId=='146'">编辑</view> -->  <!-- 暂存 --> 
					<view class="edit">维修详情</view>
				</view>
				<view style="clear: both;">
					<view class="multi_list_item">
						<view class="list_item list_item-">
							<view class="list_item_name">维修工时：</view>
							<view class="list_item_content" v-if="items.manHour">{{items.manHour}}小时</view>
						</view>
						<view class="list_item list_item-">
							<view class="list_item_name">报修费用：</view>
							<view class="list_item_content" v-if="items.cost">{{items.cost}}元</view>
						</view>
					</view>
				<view class="list_item" >
					<view class="list_item_name" >停机时长：</view>
					<view class="list_item_content" v-if="items.offHour">{{items.offHour}}小时</view>
				</view>
				<view class="list_item" >
					<view class="list_item_name" >维修时间：</view>
					<view class="list_item_content" v-if="items.startTime">{{items.startTime||''}}~{{items.endTime||''}}</view>
				</view>
				<view class="list_item ">
					<view class="list_item_name">故障原因：</view>
					<view class="list_item_content">{{items.cause}}</view>
				</view>
				<view class="list_item ">
					<view class="list_item_name">维修方案：</view>
					<view class="list_item_content">{{items.solution}}</view>
				</view>
					<view class="multi_list_item" style="border-top: 1px solid #EDEDED;">
						<view class="list_item list_item-">
							<view class="list_item_name">维修人：</view>
							<view class="list_item_content">{{items.heldPersonName}}</view>
						</view>
						<view class="list_item list_item-">
							<view class="list_item_name">验收结果：</view>
							<view class="list_item_content list_item_content_no" v-if="items.statusId==116">{{items.statusName}}</view> <!-- 不通过 -->
							<view class="list_item_content " v-else>{{items.statusName}}</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more  :loadingType="loadingType" :contentText="contentText" ></uni-load-more>
		</view>
		<view class="example-body" v-else>
			<no-record ></no-record>
		</view>
		<view class="goHome" @click='goMain()'>
			<img src="../../static/img/gohome.png">
		</view>
	</view>
</template>

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

export default {    
	components: {
		uniLoadMore,noRecord
	},
	data() {
		return {
			deviceId:'', //设备id
			pageSize:5, //一页多少条记录
			page:1,
	        title: 'list-triplex-row',
			listCards: [],
			//上拉刷新，下拉加载
			loadingText: '加载中...',
			loadingType: 0,//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
			contentText: {
				contentdown:'上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			// data_result:{
			// 	repairEvent:{},
			// 	details:[]
			// }
	    }
	},
	onLoad(options) {
		this.deviceId = options.deviceId;
		//初始化当前列表。
		this.getMaintenance(this.deviceId);
	},
	onPullDownRefresh: function() {
	// 	//下拉刷新的时候请求一次数据
	    this.getMaintenance(this.deviceId);
	},
	onReachBottom: function() {
		this.getMaintenanceMore(this.deviceId);
	},
	methods: {
		getMaintenance(deviceId){
			this.loadingType = 0;		
			this.$http.request({
			  url: '/apis/repairRecord/deviceRepairEventList',
			  params:{
				  pageno: this.page,
				  pagesize: this.pageSize,
				  deviceId:deviceId
			  },
			}).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 && res.data.data.datas.length>0){
						this.listCards=res.data.data.datas
					}
				}
			}).catch(err=>{
			});
		},
		getMaintenanceMore(deviceId){
			if (this.loadingType !== 0) {//loadingType!=0;直接返回
				return false;
			}
			this.loadingType = 1;
			uni.showNavigationBarLoading();//显示加载动画
			this.$http.request({
				url: '/apis/repairRecord/deviceRepairEventList',
				params:{
				  pageno: this.page,
				  pagesize: this.pageSize,
				  deviceId:deviceId
				},
			}).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 = res.data.data.datas;
					this.listCards = [...this.listCards,...resultData];
				}
			}).catch(err=>{
			});
		},
		//编辑
		edit(item){
			// if(num==1){//编辑
			// 	uni.navigateTo({
			// 		url: "repairStep1?id="+this.id+"&recordId="+this.data_result.records[index].id
			// 	});
			// }else if(num==2){//查看详情
				uni.navigateTo({
				    url: "../eqRepair/maintenanceDetails?id="+item.id
				});
			// }
						  
		},
	}
};
</script>
<style scoped>
	.top_container{
		position: relative;
		width: 100%;
		background-color: #fff;
		padding:30upx 200upx 30upx 30upx;
		box-sizing: border-box;
		color: #333;
		box-shadow: 2px 2px 20upx rgba(0,0,0,0.1);
	}
	.detail_list_top{
		border-bottom: 1px solid #EDEDED;
		box-shadow: none;
		padding-right: 30upx;
	}
	.report_status{
		line-height: 40upx;
		word-break: break-all;
		font-size: 28upx;
	}
	.report_status_{
		float: left;
		margin-right: 20upx;
	}
	.report_status2{
		float: left;
		line-height: 40upx;
		color: #666666;
	}
	.report_status3{
		float: left;
		padding:16upx 20upx;
		font-size: 20upx;
		line-height: 20upx;
		border-radius: 30upx;
		margin-left: 20upx;
		margin-bottom: 8upx;
	}
	/* 正常运行 */
	.report_status3_106{
		background-color: #EBF5FF;
		color: #3382FF;
		
	}
	/* 带病运行 停机待修 停用报废*/
	.report_status3_107,.report_status3_108,.report_status3_109{
		background-color: #FFEBEB;
		color: #FF0000;
	}
	.edit{
		position: absolute;
		font-size: 28upx;
		color: #3382FF;
		right: 30upx;
		top: 50upx;
		
	}

	.detail_list{
		position: relative;
		background-color: #fff;
		width: 90%;
		box-shadow: 1px 1px 20upx rgba(0,0,0,0.1);
		margin: 30upx auto;
		overflow: auto;
	}
	.list_item{
		position: relative;
		width: 100%;
		min-height: 70upx;
		padding: 0 10upx;
		box-sizing: border-box;
	}
	.multi_list_item{
		position: relative;
		overflow: auto;
	}
	.list_item-{
		width: 50%;
		float: left;
	}
	
	.list_item_name{
		position: absolute;
		left: 30upx;
		font-size: 28upx;
		color: #999;
		line-height: 70upx;
		width: 140upx;
	}
	.list_item- .list_item_name{
		width: 120upx !important;
		white-space: nowrap;
	}
	.list_item_content{
		position: relative;
		padding: 14upx 0 14upx 140upx;
		font-size: 28upx;
		line-height: 40upx;
		color: #333;
	}
	.list_item_content_no{
		color: #FF9C00;
	}

</style>
