<template>
	<view class="device-tab">
		<!-- 自定义导航栏 -->
		<view class="tabback">
			<view class="rtjt" @click="btnback">←</view>
			<view class="name">{{ i18n.t('userPageTitle') }}</view>
			<view class="edit"></view>
		</view>
		<view class="sm">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uI1CkSvmF77uLe21wptC" mode=""></image>{{ i18n.t('privacyAdminNote') }}
		</view>
		<view class="ul">
			<view class="li" v-for="(item,index) in yonghulist" :key="index" @click="btnitem(item)">
				<view class="lt">
					<view class="img">
						<image :src="item.userAvatar" mode="aspectFill"></image>
					</view>
					<view class="ltxx">
						<view class="tit">
							{{item.userName}}
						</view>
						<view class="yx">
							{{item.userEmail}}
						</view>
						<view class="js">
						  {{ item.permissions.includes('admin') ? i18n.t('admin') : i18n.t('user') }}
						</view>
					</view>
				</view>
				<view class="rt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uGFlq3Y6VPGsCUv6lfid" mode=""></image>
				</view>
			</view>
			<view class="" v-if="yonghulist.length == 0" style="text-align: center;color: #ccc;margin-top: 30rpx;width: 100%;">
				{{ i18n.t('noMembersYet') }}
			</view>
		</view>
		<view class="anniu" @click="page()">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uCCxhbSs7SuXk1llho9j" mode=""></image> {{ i18n.t('sendInvitation') }}
		</view>
	</view>
</template>
<script>
	import i18n from '@/common/i18n/index.js';
	export default {
		data() {
			return {
				kjid:'',
				yonghulist:[],
				i18n: i18n
			}
		},
		onShow() {
			this.getlist()
		},
		onLoad() {
			
		},
		methods: {
			// 请求成员列表
			getlist(){
				this.kjid = uni.getStorageSync('kjid')
				this.$http.get(`/bst/spaceUser/list?spaceId=${this.kjid}&pageNum=1&pageSize=99`).then(res =>{
					if(res.code == 200){
						this.yonghulist = res.rows
					}
				})
			},
			// 点击自定义返回上一级
			btnback() {
				uni.navigateBack()
			},
			// 点击跳转新增用户
			page(){
			   uni.navigateTo({
			   	   url:'/pages/kongjian/addinfo'
			   })	
			},
			// 点击用户跳转用户设置
			btnitem(item){
				uni.navigateTo({
					url:'/pages/kongjian/infoxq?id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.anniu{
		width: 560rpx;
		height: 94rpx;
		border-radius: 55rpx 55rpx 55rpx 55rpx;
		border: 2rpx solid #3D3D3D;
		text-align: center;
		line-height: 94rpx;
		font-size: 28rpx;
		color: #3D3D3D;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		image{
			width: 44rpx;
			height: 44rpx;
			margin-right: 20rpx;
		}
	}
	.ul{
		margin-top: 40rpx;
		height: 64vh;
		overflow: scroll;
		.li{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			height: 160rpx;
			padding: 0 32rpx;
			padding-bottom: 10rpx;
			padding-top: 10rpx;
			border-bottom: 1px solid #D8D8D8;
			.lt{
				display: flex;
				width: 100%;
				.img{
					width: 80rpx;
					height: 80rpx;
					margin-right: 42rpx;
					image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}
				.ltxx{
					.tit{
						font-size: 30rpx;
						color: #3D3D3D;
						font-weight: 600;
					}
					.yx{
						font-size: 30rpx;
						color: #817F7F;
						margin-top: 2rpx;
					}
					.js{
						border: 1px solid #75AF61;
						border-radius: 6rpx;
						font-size: 26rpx;
						color: #75AF61;
						margin-top: 6rpx;
						padding: 6rpx 10rpx;
						width: max-content;
					}
				}
			}
			.rt{
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
	.sm{
		width: 750rpx;
		max-height: 364rpx;
		background: #F9F9F9;	
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-size: 30rpx;
		color: #3D3D3D;
		margin-top: 170rpx;
		padding: 0 32rpx;
		padding-top: 42rpx;
		box-sizing: border-box;
		image{
			width: 40rpx;
			height: 40rpx;
			margin-right: 18rpx;
			vertical-align: bottom;
		}
	}
	.device-tab{
		background-color: #F3F5F6;
	}
	.tabback {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 170rpx;
		padding: 0 20rpx;
		padding-top: 80rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999 !important;
		background-color: #fff;
		box-shadow: -140rpx -20rpx 40rpx -10rpx black;

		.rtjt {
			font-size: 36rpx;
		}

		.name {
			font-size: 36rpx;
			color: #3D3D3D;
		}

		.edit {
			font-weight: 500;
			font-size: 36rpx;
			color: #3D3D3D;
		}
	}
</style>