<template>
	<page-meta>
		<navigation-bar :title="$tt('group.equipment')" background-color="#F1F3F9" front-color="#000000" />
	</page-meta>
	<view class="scene-product-wrap">
		<!--  -->
		<u-sticky zIndex="98" bgColor="#F1F3F9">
			<view class="nav-bar">
				<view v-if="!isSearch" style="margin-right: 20rpx;">
					<u-icon name="search" size="27" @click="isSearch = true"></u-icon>
				</view>
				<view v-else style="width: 100%;">
					<!-- #ifndef APP-NVUE -->
					<u-input :customStyle="{ padding: '17rpx 36rpx', background: '#FFFFFF' }"
						v-model="queryParams.groupName" :placeholder="$tt('group.inputContent')" shape="circle"
						@clear="handleClearSearch" clearable>
					<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input :customStyle="{ padding: '17rpx 36rpx', background: '#FFFFFF' }"
							v-model="queryParams.groupName" :placeholder="$tt('group.inputContent')" shape="circle"
							@clear="handleClearSearch" clearable>
						<!-- #endif -->
							<template slot="prefix">
								<u-icon name="search" color="rgb(192, 196, 204)" size="26"
									@click="isSearch = false"></u-icon>
							</template>
							<template slot="suffix">
								<view style="display: flex; flex-direction: row; align-items: center;">
									<span
										style="width: 0px; height: 14px; border: 1px solid #000000; opacity: 0.1;"></span>
									<span style="font-size: 14px; font-weight: 400; color: #3378FE; margin-left: 24rpx;"
										@click="handleSearch">{{$tt('common.search')}}</span>
								</view>
							</template>
					<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</view>
				<view class="right-wrap" @click="handleNextStep"
					style="font-size: 28rpx; width: 104rpx; font-weight: 400; color: #3378FE">
					{{$tt('product.next')}}
				</view>

			</view>
			<!-- <view class="all">
				<span>
					全部
				</span>
			</view> -->
		</u-sticky>
		<view class="container-wrap">


			<u-radio-group v-model="groupId">
				<view class="group-wrap">
					<u-cell-group :border="false">
						<view class="cell-wrap">
							<u-cell :border="false">
								<view slot="title" class="slot-title">
									<u--image src="/static/common/device.png" radius="4" width="28"
										height="28"></u--image>
									<text class="cell-text">全部</text>
								</view>
								<view slot="value">
									<u-radio shape="circle" name="noSelect" iconSize="16"></u-radio>
									<!-- <u-icon name="arrow-right" color="#909399" size="16"></u-icon> -->
								</view>
							</u-cell>
						</view>
						<view class="cell-wrap" v-for="(item,index) in list" :key="index">
							<u-cell :border="false" @click="goToDeviceList(item)">
								<view slot="title" class="slot-title">
									<u--image src="/static/common/device.png" radius="4" width="28"
										height="28"></u--image>
									<text class="cell-text">{{item.groupName}}</text>
								</view>
								<view slot="value">
									<u-radio shape="circle" :name="item.groupId" iconSize="16"></u-radio>
									<!-- <u-icon name="arrow-right" color="#909399" size="16"></u-icon> -->
								</view>
							</u-cell>
						</view>
					</u-cell-group>
				</view>
			</u-radio-group>
			<u-loadmore :status="loadmoreStatus" v-if="total > queryParams.pageSize"
				:loading-text="$tt('scene.tryingToLoad')" :loadmoreText="$tt('scene.gentlyPullUp')"
				:nomoreText="$tt('scene.nothingLeft')" marginTop="20" />

		</view>

	</view>
</template>

<script>
	import {
		getProductList
	} from '@/apis/modules/product.js';
	import {
		getGroupList
	} from '@/apis/modules/group';

	import {
		navigateBackTo
	} from '@/utils/common.js';

	export default {
		data() {
			return {
				type: 'trigger',
				editIndex: null, // null 代表新增
				editDevice: null, //null代表这个设备是新增的，否则这个设备是修改的
				isSearch: true,
				queryParams: {
					pageNum: 1,
					pageSize: 12,
					userId: 0,
					groupName: null,
				},
				list: [], // 产品列表
				total: 0,
				loadmoreStatus: 'loadmore', // 刷新和加载相关
				productId: null, // 选择产品
				groupId: null, //选择分组
				isModel: false, // 物模选择
				modelType: null, // 物模类型
				trigger: {},
				action: {}
			};
		},
		onLoad(option) {
			const {
				type,
				editIndex,
				editDevice
			} = option;
			//console.log(option)
			this.type = type;
			this.editIndex = editIndex ? Number(editIndex) : null;
			this.editDevice = editDevice || editDevice === 0 ? Number(editDevice) : null;
			//console.log("判断是否新增设备", this.editDevice)
			//console.log("判断是否是修改分组",this.editIndex)
			this.trigger = uni.getStorageSync('trigger');
			this.action = uni.getStorageSync('action');
			if (!Number.isNaN(this.editIndex) && this.editIndex != null && this.editIndex !== "") {
				//console.log(type)
				if (type === "trigger") {
					this.groupId = this.trigger.groupId
				}
				if (type === "action") {
					this.groupId = this.action.groupId
				}
			} else {
				this.groupId = 'noSelect'
			}
			this.queryParams.userId = this.profile.userId;
			this.getGroupDatas();
		},
		methods: {
			// 获取区设备列表
			getGroupDatas() {
				getGroupList(this.queryParams).then(response => {
					if (this.queryParams.pageNum == 1) {
						this.list = response.rows;
					} else {
						this.list = this.list.concat(response.rows);
					}
					this.total = response.total;
				})

			},
			handleSearch() {
				this.list = [];
				this.queryParams.pageNum = 1;
				this.getGroupDatas();
			},
			handleClearSearch() {
				this.handleSearch();
			},

			// 下拉刷新
			onPullDownRefresh() {
				this.list = [];
				this.queryParams.pageNum = 1;
				// 模拟网络请求
				setTimeout(x => {
					this.getGroupDatas();
					uni.stopPullDownRefresh();
				}, 1000);
			},
			// 上拉加载
			onReachBottom() {
				this.loadmoreStatus = 'loading';
				this.queryParams.pageNum = ++this.queryParams.pageNum;
				// 模拟网络请求
				setTimeout(() => {
					if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize >= this.total) {
						this.loadmoreStatus = 'nomore';
					} else {
						this.loadmoreStatus = 'loading';
						this.getGroupDatas();
					}
				}, 1000);
			},
			// 设备跳转
			goToDeviceList(item) {

				//console.log(item)
				if (this.type === 'trigger') {
					//console.log(this.trigger.source)

					if (this.trigger.source === 5) {
						let trigger = uni.getStorageSync('trigger');
						trigger = {
							...trigger,
							groupId: item.groupId,
							groupName: item.groupName
						};
						uni.setStorageSync('trigger', trigger);
						//console.log(trigger)
						uni.$u.route('/pagesA/scene/product/device', {
							type: this.type
						});
					}
				} else {
					//console.log(this.action.sourse)
					if (this.action.source === 6) {
						//console.log('跳转动作执行设备')
						let action = uni.getStorageSync('action');
						//console.log(action)
						action = {
							...action,
							groupId: item.groupId,
							groupName: item.groupName
						};
						uni.setStorageSync('action', action);
						uni.$u.route('/pagesA/scene/product/device', {
							type: this.type
						});
					}
				}
			},
			// 下一步
			handleNextStep() {
				if (this.groupId && this.groupId !== 'noSelect') {
					//this.isModel = true;
					const {
						groupId,
						groupName
					} = this.list.find(item => item.groupId === this.groupId);
					if (!Number.isNaN(this.editIndex) && this.editIndex != null && this.editIndex !== "") {
						// 修改

					}
					let action = uni.getStorageSync(this.type);
					action = {
						...action,
						groupId,
						groupName,
						deviceNums: this.groupId === action.groupId ? deviceNums : [],
						productId: this.groupId === action.groupId ? productId : '',
						productName: this.groupId === action.groupName ? productName : ''
					};
					uni.setStorageSync(this.type, action);
					// console.log(action)
					// console.log(this.editDevice)
					uni.$u.route('/pagesA/scene/product/device', {
						type: this.type,
						editIndex: this.editDevice || this.editDevice === 0 ? this.editDevice : null
					});
				}
				if (!this.groupId) {
					uni.showToast({
						icon: 'none',
						title: this.$tt('product.selectProducts')
					});
				}
				if (this.groupId === 'noSelect') {
					let action = uni.getStorageSync(this.type);
					action = {
						...action,
						groupId: '',
						groupName: '',
						deviceNums: this.groupId === action.groupId ? deviceNums : [],
						productId: this.groupId === action.groupId ? productId : '',
						productName: this.groupId === action.groupName ? productName : ''
					};
					// console.log(this.editDevice)
					uni.setStorageSync(this.type, action);
					uni.$u.route('/pagesA/scene/product/device', {
						type: this.type,
						editIndex: this.editDevice || this.editDevice === 0 ? this.editDevice : null
					});
				}
			},

		}
	};
</script>

<style>
	page {
		height: 100%;
		background: #eef3f7;
	}
</style>
<style lang="scss" scoped>
	.scene-product-wrap {
		.nav-bar {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 30rpx 28rpx;

			.left-wrap {
				flex: 1;
			}

			.right-wrap {
				margin-left: 30rpx;

				::v-deep .u-icon__icon {
					top: -0.5px !important;
					margin-right: 0 !important;
				}
			}
		}

		.all {
			padding: 24rpx 30rpx 28rpx;
			font-size: 28rpx;
		}

		.container-wrap {
			padding-bottom: 54rpx;

			.group-wrap {
				width: 100%;
				margin: 0 30rpx 20rpx 30rpx;

				.cell-wrap {
					background-color: #fff;
					border-radius: 10rpx;
					padding: 2rpx 0;

					&:not(:first-child) {
						margin-top: 20rpx;
					}

					.slot-title {
						display: flex;
						flex-direction: row;
						align-items: center;

						.cell-text {
							font-size: 28rpx;
							margin-left: 20rpx
						}
					}
				}
			}
		}
	}
</style>