<template>
	<view class="faultCause-page">
		<!-- 头部 -->
		<header-searchNoOrg @openOrg="openOrg" @openSearchDialog="openSearchDialog" :isShowTree="true" :title="$t('deviceMangement.deviceType')" :totalText="'设备数'" :total="total">
			<!-- 不能写在封装组件里传placeholder，mp-wenxin端编译要报错 -->
			<u--input prefixIcon="search" :placeholder="$t('deviceMangement.pleaseEnterDeviceCode')" 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 {ledgerType} 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: [],
			total:0,
			page: {
				num: 0,
				size: 10
			},
			code:'',  //设备编码
			categoryId: '', //设备类别id
			directorId:'', //负责人id
			status:'', //状态
			filterName:{   //筛选的字段
				status:''
			},
			filterList:[  //筛选弹框字段
				{
					title:'状态',
					titleCode:'status',
					typeList:[
						{
							checked:true,
							name:'全部',
							code:''
						},
						{
							checked:false,
							name:'故障',
							code:'FAULT'
						},
						{
							checked:false,
							name:'正常',
							code:'NORMAL'
						},
						{
							checked:false,
							name:'报废',
							code:'SCRAP'
						}
					]
				},
				
			]
			
		};
	},
	onLoad(e) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
		if (getApp().getBindNot()) {
			return
		}
	},
	onShow() {
		this.$nextTick(()=>{
			uni.setNavigationBarTitle({
				title:this.$t('menu.deviceLedger')
			})
		})
		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.code = e;
			this.loadData(1);
		},
		//筛选弹窗重置操作
		resetQuery() {
			this.$refs.devicePopupRef.resetFilter()
			this.status = ''	
		},
		//筛选弹窗确认操作
		getQueryCondition(value) {
			this.page.num = 1;
			this.status = value.status
			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 = {
					code:this.code,
					categoryId:this.categoryId,
                    status:this.status,
					directorId:this.directorId,
					...params
				}
				const {
					total,
					items
				} = await api.deviceManagementApi.getLedgerListApi(httpData, httpPostData)	
				this.total = total
				let data = items
				let newList  = data.map((item)=>{
					return {
						id:item.id,
						title:item.code,
						status:item.status ? ledgerType[item.status].name : '',
						iconUrl:item.status ? ledgerType[item.status].iconUrl : '',
						color:item.status ? ledgerType[item.status].color : '',
						child:[
							{
								label:'deviceMangement.deviceName',
								name:item.name
							},
							{
								label:'deviceMangement.deviceType',
								name:item.categoryName
							},
							{
								label:'deviceMangement.brand',
								name:item.brand
							},
							{
								label:'deviceMangement.directorName',
								name:item.directorName
							},
						],
						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: `/deviceManagement-subpackage/ledger-detail/ledger-detail?id=${id}`
			});
		},
		
		openOrg() {
			if (getApp().getBindNot()) {
				uni.$u.toast(this.$t('device.pleaseBindAccount'))
				return
			}
			useNavigateTo('/pages/deviceManagement/deviceType/deviceType')
		},
	}
};
</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>