<template>
	<page-meta>
		<navigation-bar :title="$tt('share.deviceShare')" background-color="#F1F3F9" front-color="#000000" />
	</page-meta>
	<view class="device-share-list-wrap">

		<u-sticky>
			<view class="nav-bar">
				<view class="left-wrap">
					<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="phoneNumber"
							:placeholder="$tt('share.inputUserPhone')" shape="circle" clearable maxlength="11"
							@input="changeInputValue">
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input :customStyle="{ padding: '17rpx 36rpx', background: '#FFFFFF' }"
								v-model="phoneNumber" :placeholder="$tt('share.inputUserPhone')" shape="circle"
								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="handleUserSearch">{{$tt('share.query')}}</span>
									</view>
								</template>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
				</view>

			</view>
			<view class="message-wrap" v-if="message != ''">
				<u--text :text="message" prefixIcon="info-circle" iconStyle="margin-right:5px; color: #f56c6c;"
					type="error" size="14" margin="0 0 0 20rpx"></u--text>
			</view>
		</u-sticky>
		<view class="list-wrap" v-if="dataList.length > 0">
			<view class="title-wrap">
				<u--text prefixIcon="share-fill" iconStyle="size:16px;margin-right:5px;" size="16" color="#666"
					:text="$tt('share.sharedUsers')"></u--text>
			</view>
			<view class="container-wrap">

				<view class="group-wrap">
					<u-cell-group :border="false">
						<view class="cell-wrap" v-for="(item,index) in dataList" :key="index" @click="gotoEdit(item)">
							<u-cell :border="false">
								<view slot="title" class="slot-title">
									<view class="info">
										<u--image src="/static/avatar.png" radius="4" width="28" height="28"></u--image>
										<view>
											<text class="cell-text">{{item.userName}}</text>
											<view class="cell-flex">
												<view class="cell-text">
													<u--text lines="1" type="info" prefixIcon="phone"
														iconStyle="margin-right:6rpx;" size="12"
														:text="item.phonenumber"></u--text>
												</view>
											</view>
										</view>
									</view>
									<view class="right">
										<text v-if="item.isOwner === 1" class="title"
											style="color: #3c9cff; margin-right: 48rpx">{{$tt('share.master')}}</text>
										<text v-else class="title" style="color: #3c9cff;">{{$tt('share.share')}}</text>
										<u--text v-if="item.isOwner !== 1" margin="0 10rpx" suffixIcon="arrow-right"
											align="right"></u--text>
									</view>
								</view>
							</u-cell>
						</view>
					</u-cell-group>
				</view>
				<u-loadmore :status="loadmoreStatus" v-if="total > queryParams.pageSize"
					:loading-text="$tt('scene.tryingToLoad')" :loadmoreText="$tt('scene.gentlyPullUp')"
					:nomoreText="$tt('scene.emptyData')" marginTop="20" />
			</view>
		</view>
		<u-modal :show="show" :title="title" :content='content' @confirm="show = false"></u-modal>
		<u-modal :show="showTip" :title="title" :content='contentTip' @confirm="showTip = false"></u-modal>
	</view>
</template>

<script>
	import {
		getShareUser,
		getUserList
	} from '@/apis/modules/deviceUser';

	export default {
		data() {
			return {
				deviceId: 0, //设备信息
				productId: 0,
				deviceName: '',
				phoneNumber: null, // 手机号码查询
				message: '', // 消息提示
				loadStatus: 'loadmore', // 加载更多
				queryParams: {
					pageNum: 1,
					pageSize: 6,
					deviceId: 0
				},
				isSearch: true,
				total: 0, // 总条数
				dataList: [], // 列表数据
				show: false,
				title: this.$tt('share.share-0'),
				content: this.$tt('share.share-1'),
				isShowOwner: false,
				showTip: false,
				contentTip: this.$tt('share.share-2'),
			};
		},
		onLoad(option) {
			this.queryParams.deviceId = option.deviceId;
			this.deviceId = option.deviceId;
			this.productId = option.productId;
			this.deviceName = option.deviceName;
			this.getList();
		},
		methods: {
			// 获取列表数据
			getList() {
				this.queryParams.userId = this.profile.userId;
				getUserList(this.queryParams).then(response => {
					const {
						rows,
						total
					} = response;
					if (this.queryParams.pageNum == 1) {
						this.dataList = rows;
					} else {
						this.dataList = this.dataList.concat(rows);
					}
					this.total = total;
					if (rows[0].isOwner == 1) {
						this.isShowOwner = true;
					}
					const {
						pageNum,
						pageSize
					} = this.queryParams;
					this.loadStatus = total > pageNum * pageSize ? 'loadmore' : 'nomore';
					uni.stopPullDownRefresh();
				});
			},
			// 查询用户列表
			handleUserSearch() {
				if (this.phoneNumber === this.profile.phonenumber) {
					this.show = true;
					return
				}
				if (this.isShowOwner) {
					this.showTip = true;
					return
				}
				if (this.phoneNumber && uni.$u.test.mobile(this.phoneNumber)) {
					let params = {
						phonenumber: this.phoneNumber,
						deviceId: this.deviceId
					};
					getShareUser(params).then(response => {
						if (response.data) {
							this.message = '';
							let user = response.data;
							uni.$u.route({
								url: '/pagesA/device/share/detail',
								params: {
									userName: user.userName,
									phonenumber: user.phonenumber,
									createTime: user.createTime,
									perms: user.perms,
									userId: user.userId,
									remark: user.remark,
									deviceId: this.deviceId,
									deviceName: this.deviceName,
									productId: this.productId,
									type: 1 // 类型,1=新增，2=更新
								}
							});
						} else {
							this.message = this.$tt('share.unable');
						}
					});
				} else {
					this.message = this.$tt('share.correct');
				}
			},
			// 编辑
			gotoEdit(item) {
				if (item.isOwner !== 1) {
					uni.$u.route({
						url: '/pagesA/device/share/detail',
						params: {
							userName: item.userName,
							phonenumber: item.phonenumber,
							createTime: item.createTime,
							remark: item.remark,
							userId: item.userId,
							deviceId: this.deviceId,
							deviceName: this.deviceName,
							productId: this.productId,
							perms: item.perms,
							type: 2, // 类型: 1=新增，2=更新
						}
					});
				}
			},
			changeInputValue(value) {
				this.phoneNumber = value;
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.dataList = [];
				this.queryParams.pageNum = 1;
				this.getList();
			},
			// 上拉加载
			onReachBottom() {
				this.queryParams.pageNum = this.queryParams.pageNum + 1;
				if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize > this.total) {
					this.loadStatus = 'nomore';
				} else {
					this.getList();
					this.loadStatus = 'loading';
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background: $uni-bg-color-grey;
	}

	.device-share-list-wrap {
		.nav-bar {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 30rpx 28rpx;
			height: 74rpx;
			background: $uni-bg-color-grey;

			.left-wrap {
				flex: 1;
			}

			.message-wrap {
				padding: 26rpx 0 0;
			}


		}

		.search-wrap {
			margin-top: 40rpx;
			padding: 60rpx 40rpx;
			background: #ffffff;
			box-shadow: 0 2rpx 1px 0 rgba(0, 0, 0, 0.1);


		}

		.group-wrap {
			//width: 100%;
			margin: 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;
					justify-content: space-between;

					.right {
						display: flex;
						justify-content: flex-end;
					}

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

						.cell-text {
							font-size: 28rpx;
							margin-left: 20rpx
						}

						.cell-flex {
							display: flex;
							margin-top: 15rpx;
						}
					}
				}


			}


		}

		.list-wrap {
			//margin-top: 40rpx;

			.title-wrap {
				padding: 20rpx 30rpx 0;
			}
		}


	}
</style>