<template>
	<view class="deviceGrop-box">
		<u-search class="search-box" placeholder="输入分组名搜索" :show-action="true" v-model="searchValue" @custom="onSearchFn" @change="onSearchFn" @search="onSearchFn"></u-search>
		<mescroll-body top="100" ref="mescrollRef" bottom="100" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="user-list">
				<view class="user-item" v-for="(item,index) in deviceGroupList" :key="item.id" @click.stop="goDevice(item)">
					<view class="user-left">
						<view class="user-icon">
							<view class="diconfont dicon-shebei_shebeizu"></view>
						</view>
						<view class="user-main">
							<view class="user-name">分组名：{{item.groupName}}</view>
							<view class="user-phone">分组码：{{item.groupCode}}</view>
						</view>
					</view>
					<view class="user-btn" >
						<view @click.stop="openEditMenu(item)">
							<u-icon name="edit-pen" size="40" color="#0066cc" style="padding: 20rpx;"></u-icon>
						</view>
						<view @click.stop="delDeviceGrop(item)">
							<u-icon name="trash" size="40" color="#dc2727" style="padding: 20rpx;"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view class="btn-list" @click="openAddDeviceGropModel">
			<view class="btn-box">
				添加设备分组
			</view>
		</view>
		<u-modal v-model="deviceGropModalShow" ref="uModal" :async-close="true" :title="deviceGropModalTitle" :show-cancel-button="true"
			@confirm="addDeviceGrop">
			<view class="slot-content">
				<u-input v-model="groupName" border type="text" placeholder="请输入分组名,如:配电箱1" ></u-input>
				<view class="form-item-value" v-if="deviceGropModalTitle == '添加设备分组'">
					<u-input type="text" border v-model="groupCode" placeholder="请输入分组码" style="flex: 1;"/>
					<u-button type="primary" size="mini" style="margin-left: 10rpx;" :custom-style="customStyle" @click="scanCode">
						<u-icon name="scan" border color="#fff" size="32"></u-icon>
					</u-button>
				</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins:[MescrollMixin],
		data() {
			return {
				deviceGroupList:[],
				deviceGropModalShow:false,
				deviceGropModalTitle:'添加设备分组',
				searchValue:'',
				groupName:'',
				groupCode:'',
				projectId:'',
				activeDeviceGrop:{},
				customStyle: {
					height:'70rpx',
					display: 'flex', 
					alignItems: 'center'
				}
			}
		},
		onLoad(option) {
			console.log("option",option)
			this.projectId = option.projectId;
		},
		methods:{
			scanCode(){
				uni.scanCode({
					// scanType: ['barCode'],
					success: (data) => {
						console.log('条码类型：' + data.scanType);
						console.log('条码内容：' + data.result);
						this.groupCode = data.result;
					},
					fail: (err) => {
						console.log('扫码失败：' + err);
					}
				});
			},
			goDevice(data){
				uni.navigateTo({
					url:'./deviceList?groupId=' + data.id + '&groupName=' + data.groupName
				})
			},
			openEditMenu(val){
				this.activeDeviceGrop = val;
				this.groupName = val.groupName;
				this.groupCode = val.groupCode;
				this.deviceGropModalTitle = '编辑设备分组';
				this.deviceGropModalShow = true;
			},
			openAddDeviceGropModel(){
				this.groupName = '';
				this.groupCode = '';
				this.deviceGropModalTitle = '添加设备分组'
				this.deviceGropModalShow = true;
			},
			addDeviceGrop(){
				if(!this.groupName){
					this.$refs.uToast.show({
						title: '请添加分组名',
						type: 'error',
					})
					this.$refs.uModal.clearLoading();
				}else if(!this.groupCode && this.deviceGropModalTitle == '添加设备分组'){
					this.$refs.uToast.show({
						title: '请添加分组码',
						type: 'error',
					})
					this.$refs.uModal.clearLoading();
				}else if(!this.groupCode.startsWith("201") && this.deviceGropModalTitle == '添加设备分组'){
					this.$refs.uToast.show({
						title: '当前分组码错误，请添加正确分组码',
						type: 'error',
					})
					this.$refs.uModal.clearLoading();
				}else if(this.deviceGropModalTitle == '添加设备分组'){
					this.$post("/iot/group",{
						projectId:this.projectId,
						groupName:this.groupName,
						groupCode:this.groupCode,
					}).then((res)=>{
						console.log("res",res)
						if(res.code == 200){
							this.$refs.uToast.show({
								title: '添加成功',
								type: 'success',
							})
							this.deviceGropModalShow = false;
							this.mescroll.resetUpScroll();
						}else{
							this.$refs.uModal.clearLoading();
						}
					}).catch((err)=>{
						this.$refs.uModal.clearLoading();
					})
				}else if(this.deviceGropModalTitle == '编辑设备分组'){
					this.$put("/iot/group",{
						id:this.activeDeviceGrop.id,
						groupName:this.groupName,
					}).then((res)=>{
						console.log("res",res)
						if(res.code == 200){
							this.$refs.uToast.show({
								title: '编辑成功',
								type: 'success',
							})
							this.deviceGropModalShow = false;
							this.mescroll.resetUpScroll();
						}else{
							this.$refs.uModal.clearLoading();
						}
					}).catch((err)=>{
						this.$refs.uModal.clearLoading();
					})
				}
				
			},
			delDeviceGrop(item){
				console.log("item",item)
				uni.showModal({
					title: '提示',
					content:'确认要删除分组(' + item.groupName + ')吗？',
					confirmText:'确认',
					cancelText:'取消',
					success: (res) => {
						if (res.confirm) {
							this.$DELETE("/iot/group/" + item.id,{}).then((res)=>{
								console.log("res",res)
								if(res.code == 200){
									this.$refs.uToast.show({
										title: '删除成功',
										type: 'success',
									})
									this.mescroll.resetUpScroll();
								}else{
									this.$refs.uToast.show({
										title: res.msg,
										type: 'error',
									})
								}
							}).catch((err)=>{
								this.$refs.uToast.show({
									title: err.msg,
									type: 'error',
								})
							})
						}else if (res.cancel) {
							
						}
					}
				});
			},
			onSearchFn(e){
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let obj = {
					groupName:this.searchValue,
					projectId: this.projectId,
				}
				this.$get("/iot/group/list",obj).then((res)=>{
					if (res.rows && res.rows.length>0) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows; 
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length; 
						//设置列表数据
						this.deviceGroupList = curPageData; //追加新数据
						this.mescroll.endBySize(curPageLen, res.total); // 推荐
						// this.mescroll.endByPage(curPageLen, res.data.total)
						// this.mescroll.endSuccess(curPageData.length);
					} else{
						this.deviceGroupList = [];
						this.mescroll.endErr();
						this.mescroll.showEmpty();
						// this.mescroll.endUpScroll(true);
					}
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
	.search-box{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		background-color: #fff;
		z-index: 10;
	}
	.user-list{
		padding: 20rpx;
		.user-item{
			background: #fff;
			border-radius: 20rpx;
			border: 1px solid #ddd;
			padding: 20rpx;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.user-left{
				display: flex;
				align-items: center;
				.user-icon{
					padding: 15rpx;
					margin-right: 10rpx;
					// background-color: #0066cc;
					background: linear-gradient(0deg, #45AAFF, #2568FF);
					border-radius: 10rpx;
					.diconfont{
						font-size: 50rpx;
						color: #fff;
						
					}
				}
				.user-main{
					font-size:25rpx;
					color: #666;
					
				}
			}
			.user-btn{
				padding: 10rpx;
				display: flex;
				align-items: center;
			}
		}
	}
	.slot-content{
		padding: 20rpx ;
		.form-item-value{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
		}
	}
	
	.btn-list{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 140rpx;
		padding: 20rpx 20rpx;
		background: #fff;
		.btn-box{
			background: #0066cc;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 36rpx;
			height: 100rpx;
			border-radius: 50rpx;
		}
	}
	
</style>