<template>
	<view class="device-page">
		<!-- 设备头部 -->
		<header-search @openOrg="openOrg" @openSearchDialog="openSearchDialog" :total="total" :totalText="totalText">
			<!-- 不能写在封装组件里传placeholder，mp-wenxin端编译要报错 -->
			<u--input prefixIcon="search" placeholder="请输入设备名称或别名搜索" 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: '设备数',
				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) {
				this.loadData(1);
			} else {
				let params = JSON.parse(e.deviceState);
				this.conditions = {
					deviceState: params
				}
				this.loadData(1, {
					deviceState: params
				});
			}
		},
		onShow() {
			if (getApp().getBindNot()) {
				return
			}
			if (this.ordId) {
				this.loadData(1, {
					organizationId: this.ordId
				});
				this.conditions = {
					organizationId: this.ordId
				}
			}
		},
		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('请进行账号绑定')
					return
				}
				useNavigateTo('/pages/organization/organization')
			},
			close() {
				this.show = false;
			},
			openSearchDialog() {
				if (getApp().getBindNot()) {
					uni.$u.toast('请进行账号绑定')
					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>