<template>
	<view class="faultCause-page">
		<!-- 头部 -->
		<header-searchNoOrg @openSearchDialog="openSearchDialog">
			<!-- 不能写在封装组件里传placeholder，mp-wenxin端编译要报错 -->
			<u--input prefixIcon="search" :placeholder="$t('deviceInspect.pleasePreservePlanName')" shape="circle"
				@change="inputChanged">
			</u--input>
		</header-searchNoOrg>
		<!-- 列表分页 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback"
			@up="upCallback">
			<page-list :list="list" @openDeviceDetail="openDeviceDetail"></page-list>
			<mescroll-empty v-if="!list.length" />
		</mescroll-body>
		<view style="height: 20rpx"></view>
		<!-- 筛选 -->
		<filter-popup ref="devicePopupRef" :filterList="filterList" :filterName="filterName" :show="show" @close="close" @queryCondition="getQueryCondition" ></filter-popup>
	</view>
</template>

<script>
import headerSearchNoOrg from '@/components/common/header-searchNoOrg.vue';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import api from '@/api/index.js'
import {
	useNavigateTo
} from '@/plugins/utils.js'
import pageList from '@/components/common/page-list'
import filterPopup from '@/components/common/filter-popup.vue'
import {planType,preserveType} from '../enum/index.js'

export default {
	mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
	components: {
		pageList,
		filterPopup,
		headerSearchNoOrg
	},
	data() {
		return {
			downOption: {
				auto: false //是否在初始化后,自动执行downCallback; 默认true
			},
			upOption: {
				isBounce: false,
				auto: false // 不自动加载
			},
			show: false,
			list: [],
			page: {
				num: 0,
				size: 10
			},
			startDate:'', //开始时间
			endDate:'', //结束时间
			preservePlanId:'', //保养计划id
			preservePlanName:'', //保养计划名称
			preserveBy:'', //保养人id
			preserveStatus:'', //状态
			deviceId:'', //设备id
			deviceName:'', //设备名称
			filterName:{   //筛选的字段
				preserveStatus:'',
				startDate:'',
				endDate:''
			},
			filterList:[  //筛选弹框字段
				{
					title:'维护结果',
					titleCode:'preserveStatus',
					typeList:[
						{
							checked:true,
							name:'全部',
							code:''
						},
						{
							checked:false,
							name:'未完成',
							code:'INCOMPLETE'
						},
						{
							checked:false,
							name:'已完成',
							code:'COMPLETE'
						}
					]
				},
				{
					title:'保养日期',
					isDate:true,
					startDate:'startDate',
					endDate:'endDate',
					range:[]
				}
				
			]
			
		};
	},
	onLoad(e) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
		if (getApp().getBindNot()) {
			return
		}
	},
	onShow() {
		this.$nextTick(()=>{
			uni.setNavigationBarTitle({
				title:this.$t('menu.maintenanceRecord')
			})
		})
		if (getApp().getBindNot()) {
			return
		}
		this.page.num = 1
		this.loadData(this.page.num);
	},
	methods: {
		
		//输入框查询
		inputChanged(e) {
			if (getApp().getBindNot()) {
				return
			}
			this.page.num = 1;
			this.preservePlanName = e;
			this.loadData(1);
		},
		//筛选弹窗重置操作
		resetQuery() {
			this.$refs.devicePopupRef.resetFilter()
			this.preserveStatus = ''
			this.startDate = ''
			this.endDate = ''
		},
		//筛选弹窗确认操作
		getQueryCondition(value) {
			this.page.num = 1;
			this.preserveStatus = value.preserveStatus
			this.startDate = value.startDate
			this.endDate = value.endDate
			this.loadData(this.page.num, value);
			this.close()
		},
		//下拉刷新
		downCallback() {
			if (getApp().getBindNot()) {
				setTimeout(() => {
					this.mescroll.endByPage(0, 0)
				}, 200)
				return
			}
			this.list = [];
			this.page.num = 1;
			this.loadData(this.page.num);
			this.resetQuery();
		},
		//上拉加载
		upCallback() {
			if (getApp().getBindNot()) {
				setTimeout(() => {
					this.mescroll.endByPage(0, 0)
				}, 200)
				return
			}
			this.page.num += 1;
			this.loadData(this.page.num);
		},
		//获取列表
		async loadData(pageNo,params={}) {	
			try {
				let httpData = {
					page: pageNo,
					pageSize: 10,
				};
				const httpPostData = {
					startDate:this.startDate, //开始时间
					endDate:this.endDate, //结束时间
					preservePlanId:this.preservePlanId, //保养计划id
					preservePlanName:this.preservePlanName, //保养计划名称
					preserveBy:this.preserveBy, //保养人id
					preserveStatus:this.preserveStatus, //状态
					deviceId:this.deviceId, //设备id
					deviceName:this.deviceName,//设备名称
					...params
				}
				const {
					total,
					items
				} = await api.deviceInspectApi.getMaintenanceRecordListApi(httpData, httpPostData)	
				
				let data = items
				let newList  = data.map((item)=>{
					return {
						id:item.id,
						title:item.recordCode,
						status:item.preserveStatus ? preserveType[item.preserveStatus].name : '',
						iconUrl:item.preserveStatus ? preserveType[item.preserveStatus].iconUrl : '',
						color:item.preserveStatus ? preserveType[item.preserveStatus].color : '',
						child:[
							{
								label:'deviceInspect.preserveDate',
								name:item.preserveDate
							},
							{
								label:'deviceInspect.preserveByName',
								name:item.preserveByName
							},
							{
								label:'deviceInspect.preservePlanName',
								name:item.preservePlanName
							}
							
						],
						detail:{
							...item
						}
					}
				})
				uni.stopPullDownRefresh();
				this.mescroll.endByPage(items.length); //必传参数(当前页的数据个数, 总页数)
				if (pageNo == 1) {
					this.list = newList;
				} else {
					this.list = this.list.concat(newList);
				}
					
					
			} catch {
				this.mescroll.endErr();
			}
		},
		
		//打开筛选弹框
		openSearchDialog() {
			if (getApp().getBindNot()) {
				uni.$u.toast(this.$t('deviceMangement.pleaseBindAccount'))
				return
			}
			this.show = true;
		},
		
		//关闭筛选弹框
		close() {
			this.show = false;
		},
		
		//列表详情
		openDeviceDetail(values) {
			const { id } = values || {}
			uni.navigateTo({
				url: `/deviceInspect-subpackage/maintenanceRecord-detail/maintenanceRecord-detail?id=${id}`
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.faultCause-page {
	min-height: 100vh;
	background-color: #f8f9fa;
}

.device-top {
	padding: 10rpx 30rpx;
	background-color: #fff;

	.search {
		display: flex;
		justify-content: space-between;
		padding-bottom: 10rpx;

		.search-left {
			width: 580rpx;
			background-color: #f8f9fa;
			border-radius: 200rpx;
		}

		.search-right {
			display: flex;
			align-items: center;

			text {
				color: #333;
				font-size: 14px;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}
</style>