<template>
	<view class="page">
		<u-navbar :title="tit" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000"
			title-size='36' height='50'></u-navbar>
		<view class="box">
			<view class="title">
				基本信息
			</view>
			<view class="list">
				<view class="list_val">
					<view class="" style="padding-top:12rpx">手机号码</view> <input type="text" v-model="tel"
						placeholder="请输入手机号码" />
				</view>
				<view class="list_val">
					<view class="" style="padding-top:12rpx">备注</view> <input type="text" v-model="beizhu"
						placeholder="请输入备注" />
				</view>
			</view>
			<view class="title">
				权限
			</view>
			<view class="swlist">
				<view class="swlist_val" v-for="(item,index) in list" :key="index">
					<view class="lt">
						<view class="one">
							{{item.name}}
						</view>
						<view class="two">
							{{item.tit}}
						</view>
					</view>
					<view class="rt">
						<u-switch v-model="item.checked" active-color="#4C97E7" size="36"
							inactive-color="#eee"></u-switch>
					</view>
				</view>
			</view>

			<view class="baocun" @click="btncj">
				{{tit}}
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				bgc: {
					backgroundColor: "#fff"
				},
				level: '',
				tel: '',
				sheng: '运维',
				arr: [{
						label: '加盟商',
						value: 1
					},
					{
						label: '合伙人',
						value: 2
					}
				],
				tit: '创建运维人员',
				userId: '',
				bili: '',
				beizhu: '',
				jiamtype: '',
				storeId: '',
				jiamid: '',
				// 权限映射配置
				permissionConfig: {
					'查看店铺': 'store:view',
					'修改店铺': 'store:edit',
					'查看设备': 'device:view',
					'修改设备': 'device:edit',
					'查看分区': 'part:view',
					'修改分区': 'part:edit',
					'查看卡座': 'booth:view',
					'修改卡座': 'booth:edit',
					'查看订单': 'order:view',
					'修改订单': 'order:edit',
					'查看套餐': 'suit:view',
					'修改套餐': 'suit:edit'
				},
				list: [{
						name: '查看店铺',
						tit: '是否允许',
						checked: false,
						txt: 1
					},
					{
						name: '修改店铺',
						tit: '是否允许',
						checked: false,
						txt: 2
					},
					{
						name: '查看设备',
						tit: '是否允许',
						checked: false,
						txt: 3
					},
					{
						name: '修改设备',
						tit: '是否允许',
						checked: false,
						txt: 4
					},
					{
						name: '查看分区',
						tit: '是否允许',
						checked: false,
						txt: 5
					},
					{
						name: '修改分区',
						tit: '是否允许',
						checked: false,
						txt: 6
					},
					{
						name: '查看卡座',
						tit: '是否允许',
						checked: false,
						txt: 7
					},
					{
						name: '修改卡座',
						tit: '是否允许',
						checked: false,
						txt: 8
					},
					{
						name: '查看订单',
						tit: '是否允许',
						checked: false,
						txt: 9
					},
					{
						name: '修改订单',
						tit: '是否允许',
						checked: false,
						txt: 10
					},{
						name: '查看套餐',
						tit: '是否允许',
						checked: false,
						txt: 11
					},
					{
						name: '修改套餐',
						tit: '是否允许',
						checked: false,
						txt: 12
					},
				],
			}
		},

		onLoad(option) {
			this.storeId = uni.getStorageSync('adminAreaid')

			if (option.item) {
				this.tit = '编辑运维人员'
				const obj = JSON.parse(option.item)
				this.initFormData(obj)
			}
		},

		methods: {
			// 初始化表单数据
			initFormData(obj) {
				console.log(obj);
				this.tel = obj.userPhone
				this.storeId = obj.storeId
				this.jiamid = obj.id
				this.beizhu = obj.remark
				this.jiamtype = obj.type

				// 设置权限选中状态
				this.setPermissionStatus(obj.permissions)

				// 设置身份类型显示
			},

			// 设置权限选中状态
			setPermissionStatus(permissions) {
				const permissionMap = {
					'store:view': 0,
					'store:edit': 1,
					'device:view': 2,
					'device:edit': 3,
					'part:view': 4,
					'part:edit': 5,
					'booth:view': 6,
					'booth:edit': 7,
					'order:view': 8,
					'order:edit': 9,
					// 'customerService:edit': 10,
					'suit:view': 10,
					'suit:edit': 11,
				}

				permissions.forEach(permission => {
					const index = permissionMap[permission]
					if (index !== undefined) {
						this.list[index].checked = true
					}
				})
			},

			// 身份选择确认
			confirm(e) {
				this.sheng = e[0].label
				this.jiamtype = e[0].value
			},

			// 收集选中的权限
			collectPermissions() {
				return this.list
					.filter(item => item.checked)
					.map(item => this.permissionConfig[item.name])
					.filter(Boolean) // 过滤掉undefined
			},

			// 构建请求数据
			buildRequestData() {
				return {
					id: this.jiamid,
					userPhone: this.tel,
					storeId: this.$store.state.storeId,
					remark: this.beizhu,
					permissions: this.collectPermissions()
				}
			},

			// 处理API响应
			handleApiResponse(res, successMessage) {
				if (res.code === 200) {
					uni.showToast({
						title: successMessage,
						icon: 'success',
						duration: 2000
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					})
				}
			},

			// 点击创建/编辑
			async btncj() {
				const data = this.buildRequestData()
				const isEdit = this.tit === '编辑运维人员'
				const apiMethod = isEdit ? 'put' : 'post'
				const apiUrl = '/bst/storeStaff'
				const successMessage = isEdit ? '编辑成功' : '创建成功'

				try {
					const res = await this.$u[apiMethod](apiUrl, data)
					this.handleApiResponse(res, successMessage)
				} catch (error) {
					uni.showToast({
						title: '请求失败，请重试',
						icon: 'none',
						duration: 2000
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .u-title,
	::v-deep .uicon-nav-back {
		padding-bottom: 22rpx;
	}

	.swlist {
		margin-top: 34rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.swlist_val {
			display: flex;
			justify-content: space-between;
			width: 324rpx;
			height: 144rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding-top: 28rpx;
			padding-left: 38rpx;
			box-sizing: border-box;
			margin-top: 18rpx;
		}

		.lt {
			.one {
				font-size: 28rpx;
				color: #3D3D3D;
			}

			.two {
				font-size: 24rpx;
				color: #808080;
				margin-top: 12rpx;
			}
		}

		.rt {
			margin-top: 24rpx;
			padding-right: 12rpx;
		}
	}

	.title {
		font-size: 32rpx;
		color: #3D3D3D;
	}

	.page {
		width: 750rpx;

		.box {
			width: 750rpx;
			height: 100%;
			overflow-y: scroll;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 32rpx 36rpx;
			box-sizing: border-box;
			padding-bottom: 100rpx;

			.baocun {
				width: 584rpx;
				height: 90rpx;
				margin: auto;
				background: linear-gradient(270deg, #4C97E7 0%, #4C97E7 100%);
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				margin-top: 110rpx;
				margin-bottom: 78rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
			}

			.swlist {
				margin-top: 34rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.swlist_val {
					display: flex;
					justify-content: space-between;
					width: 324rpx;
					height: 144rpx;
					background: #FFFFFF;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					padding-top: 28rpx;
					padding-left: 38rpx;
					box-sizing: border-box;
					margin-top: 18rpx;
				}

				.lt {
					.one {
						font-size: 28rpx;
						color: #3D3D3D;
					}

					.two {
						font-size: 24rpx;
						color: #808080;
						margin-top: 12rpx;
					}
				}

				.rt {
					margin-top: 24rpx;
					padding-right: 12rpx;
				}
			}

			.title {
				font-size: 32rpx;
				color: #3D3D3D;
			}

			.list {
				width: 680rpx;
				max-height: 578rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 46rpx 36rpx;
				box-sizing: border-box;
				margin-top: 34rpx;
				margin-bottom: 47rpx;

				.list_val {
					display: flex;
					font-size: 32rpx;
					color: #3D3D3D;
					justify-content: space-between;
					margin-bottom: 32rpx;

					input {
						width: 430rpx;
						height: 70rpx;
						background: #F0F0F0;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						padding-left: 32rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						color: #808080;
					}
				}
			}
		}
	}
</style>