<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" style="position: relative;">
					<view class="" style="padding-top:12rpx;width: 176rpx;">身份类型</view> <input type="text" disabled="false" v-model="sheng" :placeholder="sheng" />
					<!-- <u-select v-model="show" :list="arr" @confirm="confirm"></u-select> -->
				</view>
				<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="bili"
						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" v-if="item.name == '查看运营区'">
						<u-switch v-model="item.checked" :disabled="true" active-color="#2b2929" size="36"
							inactive-color="#eee"></u-switch>
					</view>
					<view class="rt" v-else>
						<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: '',
				areaId: '',
				jiamid: '',
				// 权限映射配置
				permissionConfig: {
					'查看运营区': 'area:view',
					'操作运营区': 'area:edit',
					'查看子区域': 'areaSub:view',
					'操作子区域': 'areaSub:edit',
					'查看故障': 'fault:view',
					'故障审核': 'fault:edit',
					'查看订单': 'order:view',
					'操作订单': 'order:edit',
					'查看车辆': 'device:view',
					'操作车辆': 'device:edit',
					'查看订单金额': 'order:view:amount',
					'查看客服': 'customerService:view',
					'操作客服': 'customerService:edit',
					'查看卡券': 'vip:view',
					'操作卡券': 'vip:edit',
					'查看卡券订单': 'vipOrder:view',
					'操作卡券订单': 'vipOrder:edit',
					'查看用户卡券': 'vipUser:view',
					'操作用户卡券': 'vipUser:edit'
				},
				list: [{
						name: '查看运营区',
						tit: '是否允许',
						checked: true,
						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
					},
					
					{
						name: '查看卡券',
						tit: '是否允许',
						checked: false,
						txt: 13
					},{
						name: '操作卡券',
						tit: '是否允许',
						checked: false,
						txt: 14
					},{
						name: '查看卡券订单',
						tit: '是否允许',
						checked: false,
						txt: 15
					},{
						name: '操作卡券订单',
						tit: '是否允许',
						checked: false,
						txt: 16
					},{
						name: '查看用户卡券',
						tit: '是否允许',
						checked: false,
						txt: 17
					},{
						name: '操作用户卡券',
						tit: '是否允许',
						checked: false,
						txt: 18
					},
				],
			}
		},

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

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

		methods: {
			// 初始化表单数据
			initFormData(obj) {
				this.tel = obj.userPhone
				this.areaId = obj.areaId
				this.bili = obj.point
				this.jiamid = obj.id
				this.beizhu = obj.remark
				this.jiamtype = obj.type

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

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

			// 设置权限选中状态
			setPermissionStatus(permissions) {
				const permissionMap = {
					'area:view': 0,
					'area:edit': 1,
					'areaSub:view':2,
					'areaSub:edit':3,
					'fault:view': 4,
					'fault:edit': 5,
					'order:view': 6,
					'order:edit': 7,
					'device:view': 8,
					'device:edit': 9,
					'customerService:view': 10,
					'customerService:edit': 11,
					'vip:view': 12,
					'vip:edit': 13,
					'vipOrder:view': 14,
					'vipOrder:edit': 15,
					'vipUser:view': 16,
					'vipUser:edit': 17
				}

				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,
					areaId: this.areaId,
					point: this.bili,
					type: 3,
					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/areaJoin'
				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">
	/deep/ .u-title,
	/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>