<template>
	<view class="alarm-page" :class="pageDisableScroll">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 告警头部 -->
		<header-search @openOrg="openOrg" @openSearchDialog="openSearchDialog" :total="alarmTotal"
			:totalText="$t(totalText)">
			<!-- 不能写在封装组件里传placeholder，mp-wenxin端编译要报错 -->
			<u--input prefixIcon="search" :placeholder="$t('alarm.pleaseEnterDevice')" shape="circle" @change="inputChanged">
			</u--input>
		</header-search>
		<!-- 告警分页 -->
		<mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" :down="downOption" @down="downCallback"
			@up="upCallback">
			<alarm-item :list="list" @openAlertDetail="openAlertDetail"></alarm-item>
			<mescroll-empty v-if="!list.length" />
		</mescroll-body>
		<view style="height: 20rpx"></view>
		<!-- 告警筛选-->
		<alarm-popup ref="alarmPopupRef" :show="show" @close="close" @queryCondition="getQueryCondition"></alarm-popup>
		<f-tabbar></f-tabbar>
	</view>
</template>

<script>
import {mapActions } from 'vuex'
	import fTabbar from '@/components/module/f-tabbar/f-tabbar';
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import api from '@/api/index.js'
	import alarmItem from './components/alarm-item.vue'
	import alarmPopup from './components/alarm-popup.vue'
	import {
		usePageScrollTo,
		useNavigateTo
	} from '@/plugins/utils.js'


	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			fTabbar,
			alarmItem,
			alarmPopup
		},
		data() {
			return {
				totalText: 'alarm.alarmNum',
				page: {
					num: 0,
					size: 10
				},
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false // 不自动加载
				},
				show: false,
				list: [],
				alarmTotal: 0,
				queryCondition: {
					searchAlarmText: '',
				},
				conditions: {},
				ordId: '',
				paramsStaus:null
			};
		},
		onShow() {
			this.$nextTick(()=>{
			uni.setNavigationBarTitle({
				title:this.$t('menu.alarm')
			})
		})
			if (getApp().getBindNot()) {
				return
			}
			if (this.ordId) {
				this.loadData(1, {
					organizationId: this.ordId
				});
				this.conditions = {
					organizationId: this.ordId
				}
				return
			}
			this.loadData(1, {
					status:this.paramsStaus
			});
		},
		onHide() {
			this.ordId = ''
			this.paramsStaus = ''
		},
		onLoad(e) {
			if (getApp().getBindNot()) {
				return
			}
			if (!e.type) {
				this.loadData(1);
			} else {
				let params = JSON.parse(e.type);
				 this.parmasStatus = null
				if (Array.isArray(params)) {
					this.paramsStaus = params.join(',');
				} else {
					this.paramsStaus = params;
				}
				this.conditions = {
					status:this.paramsStaus
				}
				
			}
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
		computed: {
			pageDisableScroll() {
				return this.show ? 'pop-no-scroll' : ''
			}
		},
		methods: {
			...mapActions(['updateBadgeTotal']),
			inputChanged(e) {
				if (getApp().getBindNot()) {
					return
				}
				this.resetQuery();
				this.topBack();
				this.queryCondition.searchAlarmText = e;
				this.page.num = 1;
				this.conditions = {
					deviceName: e
				}
				this.loadData(1, {
					deviceName: e
				});
			},
			getQueryCondition(value) {
				this.loadData(1, value);
				this.conditions = value
				this.close()
			},
			resetQuery() {
				this.queryCondition.searchAlarmText = '';
				this.page.num = 1;
				this.$nextTick(() => {
					this.$refs.alarmPopupRef.resetQuery()
				})
				this.conditions = {}
			},
			topBack() {
				usePageScrollTo(0, 10)
			},
			//下拉刷新
			downCallback() {
				if (getApp().getBindNot()) {
					setTimeout(()=>{
						this.mescroll.endByPage(0,0)
					},200)
					return 
				}
				this.list.length = 0;
				this.page.num = 1;
				this.resetQuery();
				this.loadData(this.page.num);
			},
			//上拉加载
			upCallback() {
				
				if (getApp().getBindNot()) {
					setTimeout(()=>{
						this.mescroll.endByPage(0,0)
					},200)
					return 
				}
				const condition = Object.values(this.conditions)
				if (condition.length === 0) {
					this.page.num += 1;
					this.loadData(this.page.num);
				} else if (condition.filter(Boolean).length > 0) {
					this.page.num += 1;
					this.loadData(this.page.num, this.conditions);
				} else {
					this.page.num += 1;
					this.loadData(this.page.num);
				}
			},
			async loadData(page, param) {
				let that = this;
				let params = {
					page,
					pageSize: 10,
					...param
				};

				const res = await api.alarmApi.getAlarmApi({
					params,
					custom: {
						load: false
					}
				})

				if(res){
					const resAlarm = await uni.$u.http.get('/yt/homepage/app?login=true');
					if (resAlarm) {
						//异步实时更新告警徽标数
						await this.updateBadgeTotal(resAlarm.totalAlarm?.activedAlarm);
					}
					uni.stopPullDownRefresh();
					that.mescroll.endByPage(res.items.length, res.total); //必传参数(当前页的数据个数, 总页数)
					that.alarmTotal = res.total;
					if (page == 1) {
						that.list = res.items;
					} else {
						that.list = that.list.concat(res.items);
					}
				}
				
			},
			close() {
				this.show = false;
			},
			openSearchDialog() {
				if (getApp().getBindNot()) {
					uni.$u.toast(this.$t('common.pleaseBindAccount'))
					return
				}
				this.show = true;
				this.$nextTick(() => {
					this.resetQuery();
				})
			},
			openOrg() {
				if (getApp().getBindNot()) {
					uni.$u.toast(this.$t('common.pleaseBindAccount'))
					return
				}
				useNavigateTo('/pages/organization/organization')
			},
			//跳转告警详情
			openAlertDetail(e) {
				useNavigateTo('/alarm-subpackage/alarm-detail/alarm-detail?data=', e)
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import './static/alarm.scss';

	/deep/ .u-button--primary {
		background-color: #377dff !important;
		border-color: #377dff !important;
	}

	/deep/ .u-button--info {
		background-color: #e3e3e5 !important;
		border-color: #e3e3e5 !important;
	}

	/deep/ .u-cell__right-icon-wrap {
		margin-top: -55rpx !important;
	}

	/deep/ .uni-calendar--fixed {
		bottom: 172rpx !important;
	}

	.pop-no-scroll {
		overflow: hidden;
		position: fixed;
		height: 100%;
		width: 100%;
	}
</style>