<template>
	<page-meta>
		<navigation-bar :title="$tt('share.userDetail')" title-align="center" background-color="#007AFF" />
	</page-meta>
	<view class="device-share-detail-wrap">
		<view class="user-info-wrap">
			<view class="title-wrap">
				<u--text bold size="15" prefixIcon="account-fill" iconStyle="font-size: 40rpx; margin-right: 10rpx;"
					:text="$tt('share.userMsg')"></u--text>
			</view>
			<view class="container-wrap">
				<u--text :text="$tt('share.userId')+form.userId" lineHeight="28"></u--text>
				<u--text :text="$tt('share.userName')+form.userName" lineHeight="28"></u--text>
				<u--text :text="$tt('share.phoneNumber')+form.phonenumber" lineHeight="28"></u--text>
			</view>
		</view>
		<view class="permission-wrap">
			<view class="title-wrap">
				<u--text bold size="15" prefixIcon="integral-fill" iconStyle="font-size: 40rpx; margin-right: 10rpx;"
					:text="$tt('share.userPermissions')"></u--text>
			</view>
			<view class="container-wrap">
				<u-checkbox-group placement="column" @change="checkboxChange">
					<view class="checkbox-item-wrap" v-for="(item, index) in permissionList">
						<u-checkbox :customStyle="{marginBottom: '26rpx'}" :key="index"
							:label="`${item.modelName} (${item.identifier})`" :name="item.modelName"
							:checked="item.checked">
						</u-checkbox>
						<u--text type="info" :text="item.remark ? item.remark: $tt('share.notRemark')" size="14"
							margin="-20rpx 0rpx 20rpx 48rpx"></u--text>
					</view>
				</u-checkbox-group>
			</view>
		</view>

		<view class="remark-wrap">
			<view class="title-wrap">
				<u--text bold size="15" prefixIcon="file-text-fill" iconStyle="font-size: 40rpx; margin-right: 10rpx;"
					:text="$tt('share.remark')"></u--text>
			</view>
			<view class="container-wrap">
				<u--textarea v-model="form.remark" :placeholder="$tt('deviceDetail.inputMsg')" border="bottom" confirmType="done"></u--textarea>
			</view>
		</view>

		<view class="btn-wrap">
			<u-button v-if="type === 1" type="success" customStyle="margin: 20rpx; padding: 30rpx;" @tap="handleAddUser"
				size="small">{{$tt('share.confirmShare')}}</u-button>
			<u-button v-if="type === 2" type="error" @tap="handleDeleteUser" size="small"
				customStyle="margin: 20rpx; padding: 30rpx;">{{$tt('common.delete')}}</u-button>
			<u-button v-if="type === 2" type="primary" @tap="handleEditUser" size="small"
				customStyle="margin: 20rpx; padding: 30rpx;">{{$tt('common.save')}}</u-button>
		</view>
	</view>
</template>
<script>
	import { addDeviceUser, updateDeviceUser, delDeviceUser } from '@/apis/modules/deviceUser';
	import { getModelPermList } from "@/apis/modules/model";

	export default {
		data () {
			return {
				type: 1, // 类型: 1=新增，2=更新
				permissionList: [], // 权限列表
				selectPerms: [], // 选中的权限列表
				// 表单参数
				form: {
					deviceId: null,
					userId: null,
					deviceName: null,
					userName: null,
					perms: null,
					phonenumber: null,
					remark: null
				}
			};
		},
		onLoad (option) {
			this.form.phonenumber = option.phonenumber;
			this.form.remark = option.remark;
			this.form.userId = option.userId;
			this.form.userName = option.userName;
			this.form.deviceId = option.deviceId;
			this.form.deviceName = option.deviceName;
			this.form.productId = option.productId;
			this.form.perms = option.perms;
			this.type = Number(option.type);

			this.getPermissionList();
		},
		methods: {
			// 查询产品物模型设备权限列表 
			async getPermissionList () {
				if (this.form.perms) {
					this.selectPerms = this.form.perms.split(',');
				}
				getModelPermList(this.form.productId).then((response) => {
					// 固定增加设备系统相关权限
					this.permissionList = [{
						identifier: "ota",
						modelName: this.$tt('share.deviceUpgradation'),
						remark: this.$tt('share.otaUpgradation')
					}, {
						identifier: "timer",
						modelName: this.$tt('share.timing'),
						remark: this.$tt('share.timedTaskExecution')
					}, {
						identifier: "log",
						modelName: this.$tt('share.deviceLog'),
						remark: this.$tt('share.contains')
					}, {
						identifier: "monitor",
						modelName: this.$tt('share.monitior'),
						remark: this.$tt('share.afterMonitior')
					}, {
						identifier: "statistic",
						modelName:this.$tt('share.monitioringStatic'),
						remark: this.$tt('share.chartDisplay')
					}];
					this.permissionList = this.permissionList.concat(response.data);

					if (this.selectPerms.length > 0) {
						for (let i = 0; i < this.permissionList.length; i++) {
							for (let j = 0; j < this.selectPerms.length; j++) {
								if (this.permissionList[i].identifier == this.selectPerms[j]) {
									this.permissionList[i].checked = true;
									break;
								}
							}
						}
					}
				});
			},
			// 复选框改变事件
			checkboxChange (data) {
				this.selectPerms = [];
				console.log(data)
				for (let i = 0; i < this.permissionList.length; i++) {
					if (data.indexOf(this.permissionList[i].modelName) != -1) {
						this.selectPerms.push(this.permissionList[i].identifier)
					}
				}
				console.log(this.selectPerms)
			},
			// 添加设备用户
			handleAddUser () {
				this.form.perms = this.selectPerms.join(',');
				addDeviceUser(this.form).then(response => {
					uni.showToast({
						icon: 'success',
						title: this.$tt('share.deviceShareSuccess')
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
							success: (e) => {
								var pages = getCurrentPages();
								var page = pages[pages.length - 2];
								if (page === undefined || page === null)
									return;
								// 更新列表
								if (uni.getSystemInfoSync().platform === 'devtools') {
									page.$vm.dataList = [];
									page.$vm.getList();
								} else {
									page.dataList = [];
									page.getList();
								}
							}
						});
					}, 1000);
				});
			},
			// 编辑
			handleEditUser () {
				this.form.perms = this.selectPerms.join(',');
				updateDeviceUser(this.form).then(response => {
					uni.showToast({
						icon: 'success',
						title: this.$tt('common.updateSuccessful')
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
							success: (e) => {
								var pages = getCurrentPages();
								var page = pages[pages.length - 2];
								if (page === undefined || page === null)
									return;
								// 更新列表
								if (uni.getSystemInfoSync().platform === 'devtools') {
									page.$vm.dataList = [];
									page.$vm.getList();
								} else {
									page.dataList = [];
									page.getList();
								}
							}
						});
					}, 1000);
				});
			},
			// 删除
			handleDeleteUser () {
				uni.showModal({
					title: this.$tt('share.title'),
					content:  this.$tt('share.alert'),
					success: result => {
						if (result.confirm) {
							uni.showLoading({
								title:  this.$tt('share.delete')
							});
							delDeviceUser(this.form).then(res => {
								if (res) {
									uni.showToast({
										icon: 'success',
										title: res.msg
									});
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
											success: (e) => {
												var pages = getCurrentPages();
												var page = pages[pages.length - 2];
												if (page === undefined || page ===
													null)
													return;
												// 更新列表
												if (uni.getSystemInfoSync()
													.platform === 'devtools') {
													page.$vm.dataList = [];
													page.$vm.getList();
												} else {
													page.dataList = [];
													page.getList();
												}
											}
										});
									}, 1000);
								}
							}).finally(() => {
								uni.hideLoading();
							});
						}
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: #eef3f7;
	}

	.device-share-detail-wrap {

		padding: 40rpx 0;

		.user-info-wrap,
		.permission-wrap,
		.remark-wrap {
			.title-wrap {
				padding: 0 40rpx;
			}

			.container-wrap {
				margin-top: 10rpx;
				padding: 30rpx 40rpx;
				background: #ffffff;
			}
		}

		.permission-wrap,
		.remark-wrap {
			margin-top: 40rpx;
		}

		.btn-wrap {
			display: flex;
			margin: 80rpx 0;
		}
	}
</style>