<template>
	<view class="device-page">
		<!-- 设备头部 -->
		<header-search @openOrg="openOrg" @openSearchDialog="openSearchDialog" :total="total" :totalText="$t(totalText)">
			<!-- 不能写在封装组件里传placeholder，mp-wenxin端编译要报错 -->
			<u--input prefixIcon="search" :placeholder="$t('device.pleaseEnterDeviceName')" shape="circle"
				@change="inputChanged">
			</u--input>
		</header-search>
		<!-- 设备分页 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback"
			@up="upCallback">
			<device-item :list="list" @openDeviceDetail="openDeviceDetail"></device-item>
		</mescroll-body>
		<view style="height: 20rpx"></view>
		<!-- 设备筛选 -->
		<device-popup ref="devicePopupRef" :show="show" @close="close" @queryCondition="getQueryCondition"></device-popup>
		<f-tabbar></f-tabbar>
	</view>
</template>

<script>
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 {
	useNavigateTo
} from '@/plugins/utils.js'
import deviceItem from './components/device-item.vue'
import devicePopup from './components/device-popup.vue'

export default {
	mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
	components: {
		fTabbar,
		deviceItem,
		devicePopup
	},
	data() {
		return {
			totalText: 'device.deviceNum',
			downOption: {
				auto: false //是否在初始化后,自动执行downCallback; 默认true
			},
			upOption: {
				isBounce: false,
				auto: false // 不自动加载
			},
			show: false,
			total: 0,
			list: [],
			page: {
				num: 0,
				size: 10
			},
			deviceName: '',
			ordId: '',
			conditions: {}
		};
	},
	onLoad(e) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
		if (getApp().getBindNot()) {
			return
		}
		if (e.deviceState) {
			let params = JSON.parse(e.deviceState);
			this.conditions = {
				deviceState: params
			}
			// this.loadData(1, {
			// 	deviceState: params
			// });
		}
	},
	onShow() {
		this.$nextTick(()=>{
			uni.setNavigationBarTitle({
				title:this.$t('menu.device')
			})
		})
		if (getApp().getBindNot()) {
			return
		}
		this.page.num = 1
		if (this.ordId) {
			this.loadData(1, {
				organizationId: this.ordId
			});
			this.conditions = {
				organizationId: this.ordId
			}
			return
		}
		this.loadData(this.page.num, this.conditions);
	},
	methods: {
		inputChanged(e) {
			if (getApp().getBindNot()) {
				return
			}
			this.page.num = 1;
			this.deviceName = e;
			this.conditions = {
				deviceName: e
			}
			this.loadData(1, {
				name: this.deviceName
			});
		},
		resetQuery() {
			this.$refs.devicePopupRef.resetFilter()
			this.ordId = ''
			this.deviceName = ''
			this.conditions = {}
		},
		getQueryCondition(value) {
			const condition = Object.values(value)
			this.page.num = 1;
			this.loadData(this.page.num, value);
			this.conditions = 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
			}
			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(pageNo, params = {}) {
			try {
				let httpData = {
					page: pageNo,
					pageSize: 10,
					custom: {
						load: false
					},
				};
				const httpPostData = {
					"deviceProfileIds": null,
					...params
				}
				const {
					total,
					items
				} = await api.deviceApi.getDeviceApi(httpData, httpPostData)
				this.total = total;
				uni.stopPullDownRefresh();
				this.mescroll.endByPage(items.length, total); //必传参数(当前页的数据个数, 总页数)
				if (pageNo == 1) {
					this.list = items;
				} else {
					this.list = this.list.concat(items);
				}
			} catch {
				this.mescroll.endErr();
			}
		},
		openOrg() {
			if (getApp().getBindNot()) {
				uni.$u.toast(this.$t('device.pleaseBindAccount'))
				return
			}
			useNavigateTo('/pages/organization/organization')
		},
		close() {
			this.show = false;
		},
		openSearchDialog() {
			if (getApp().getBindNot()) {
				uni.$u.toast(this.$t('device.pleaseBindAccount'))
				return
			}
			this.show = true;
			this.$nextTick(() => {
				this.resetQuery();
			})
		},
		openDeviceDetail(values) {
			const { id, alarmStatus, lastOnlineTime, tbDeviceId, transportType } = values || {}
			uni.navigateTo({
				url: `/device-subpackage/device-detail/device-detail?id=${id}&alarmStatus=${alarmStatus}&lastOnlineTime=${lastOnlineTime}&tbDeviceId=${tbDeviceId}&transportType=${transportType}`
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.device-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>