<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="beizhu" placeholder="请输入备注名" />
				</view>
				<view class="list_val" style="position: relative;">
					<view class="" style="padding-top:12rpx;width: 176rpx;">身份类型</view>
					<input hover-class="app-tap-hover" @click="show = true" type="text" disabled="false" v-model="sheng" :placeholder="sheng" />
					<u-icon name="arrow-down" style="position: absolute;top: 30%;right: 14rpx;" color="#808080"></u-icon>
					
					<u-popup v-model="show" mode="bottom" border-radius="20">
						<view class="custom-select-popup">
							<view class="popup-title">选择身份类型</view>
							<view hover-class="app-tap-hover" class="select-item" @click="selectType(2, '合伙人')">
								<view class="item-header">
									<text class="item-title">合伙人</text>
									<u-icon v-if="jiamtype === 2" name="checkbox-mark" color="#4C97E7" size="32"></u-icon>
								</view>
								<view class="item-desc">该角色会参与该运营区自营车辆产生的订单分成</view>
							</view>
							<view hover-class="app-tap-hover" class="select-item" @click="selectType(1, '加盟商')">
								<view class="item-header">
									<text class="item-title">加盟商</text>
									<u-icon v-if="jiamtype === 1" name="checkbox-mark" color="#4C97E7" size="32"></u-icon>
								</view>
								<view class="item-desc">该角色的车辆划拨到这个运营区后，会获得这些车辆的订单分成</view>
							</view>
							
							<view hover-class="app-tap-hover" class="popup-cancel" @click="show = false">取消</view>
						</view>
					</u-popup>
				</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>

			<!-- 权限区域 -->
			<view class="section-header">
				<view class="title">合作伙伴权限</view>
				<view class="global-actions" v-if="permissionGroups.length > 0">
					<text hover-class="app-tap-hover" class="action-btn" @click="handleSelectAllGlobal">全选</text>
					<text class="action-divider">|</text>
					<text hover-class="app-tap-hover" class="action-btn" @click="handleDeselectAllGlobal">取消全选</text>
				</view>
			</view>

			<view v-if="permissionsLoading" class="loading-tip">
				<u-loading mode="circle" size="36"></u-loading>
				<text style="margin-left: 12rpx; color: #999; font-size: 26rpx;">加载中...</text>
			</view>

			<view v-for="(group, gi) in permissionGroups" :key="gi" class="permission-group">
				<view class="group-header">
					<text class="group-name">{{ group.group }}</text>
					<view class="group-actions">
						<text hover-class="app-tap-hover" class="action-btn" @click="handleSelectAllGroup(gi)">全选</text>
						<text class="action-divider">|</text>
						<text hover-class="app-tap-hover" class="action-btn" @click="handleDeselectAllGroup(gi)">取消</text>
					</view>
				</view>
				<view class="swlist">
					<view class="swlist_val" v-for="(item, ii) in group.items" :key="ii">
						<view class="lt">
							<view class="one">{{ item.name }}</view>
							<view class="two">{{ item.description }}</view>
						</view>
						<view class="rt">
							<u-switch
								v-model="item.checked"
								:disabled="item.isDefault"
								:active-color="item.isDefault ? '#2b2929' : '#4C97E7'"
								size="36"
								inactive-color="#eee"
							></u-switch>
						</view>
					</view>
				</view>
			</view>

			<view hover-class="app-tap-hover" class="baocun" @click="btncj">{{ tit }}</view>
			<view hover-class="app-tap-hover" class="shanchu" @click="btnshanchu" v-if="jiamid">删除</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				bgc: { backgroundColor: "#fff" },
				tel: '',
				sheng: '请选择身份类型',
				arr: [
					{ label: '加盟商', value: 1 },
					{ label: '合伙人', value: 2 }
				],
				tit: '创建加盟伙伴',
				bili: '',
				beizhu: '',
				jiamtype: '',
				areaId: '',
				jiamid: '',
				permissionsLoading: false,
				permissionGroups: [],
				// 编辑时临时保存待回填的权限列表
				pendingPermissions: null
			}
		},

		onLoad(option) {
			this.areaId = uni.getStorageSync('adminAreaid')
			this.loadPermissions().then(() => {
				if (option.item) {
					this.tit = '保存加盟伙伴'
					const obj = JSON.parse(option.item)
					this.initFormData(obj)
				}
			})
		},

		methods: {
			/** 从接口加载权限分组 */
			loadPermissions() {
				this.permissionsLoading = true
				return this.$u.get('/bst/areaJoin/permissions').then(res => {
					if (res.code === 200 && res.data) {
						console.log(res.data,'4545454545454545');
						if(res.data.length > 0){
							// 为每个权限项添加 checked 状态
							this.permissionGroups = res.data.map(group => ({
								...group,
								items: group.items.map(item => ({
									...item,
									checked: !!item.isDefault
								}))
							}))
						}else{
							uni.showModal({
								title: '提示',
								content: '您当前没有查看权限',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										
									}
								}
							})
						}
					}else{
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									
								}
							}
						})
					}
				}).catch(() => {
					uni.showToast({ title: '权限列表加载失败', icon: 'none' })
				}).finally(() => {
					this.permissionsLoading = false
				})
			},

			/** 初始化表单数据 */
			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.sheng = obj.type === 1 ? '加盟商' : '合伙人'
				this.setPermissionStatus(obj.permissions || [])
			},

			/** 根据权限 code 数组回填开关状态 */
			setPermissionStatus(permissions) {
				const permSet = new Set(permissions)
				this.permissionGroups.forEach(group => {
					group.items.forEach(item => {
						if (!item.isDefault) {
							item.checked = permSet.has(item.code)
						}
					})
				})
			},

			/** 全部全选 */
			handleSelectAllGlobal() {
				this.permissionGroups.forEach(group => {
					group.items.forEach(item => { item.checked = true })
				})
			},

			/** 全部取消（保留默认权限） */
			handleDeselectAllGlobal() {
				this.permissionGroups.forEach(group => {
					group.items.forEach(item => {
						if (!item.isDefault) item.checked = false
					})
				})
			},

			/** 分组全选 */
			handleSelectAllGroup(gi) {
				this.permissionGroups[gi].items.forEach(item => { item.checked = true })
			},

			/** 分组取消（保留该组默认权限） */
			handleDeselectAllGroup(gi) {
				this.permissionGroups[gi].items.forEach(item => {
					if (!item.isDefault) item.checked = false
				})
			},

			/** 身份选择确认 */
			selectType(value, label) {
				this.sheng = label
				this.jiamtype = value
				this.show = false
			},

			/** 收集选中的权限 code */
			collectPermissions() {
				const codes = []
				this.permissionGroups.forEach(group => {
					group.items.forEach(item => {
						if (item.checked) codes.push(item.code)
					})
				})
				return codes
			},

			/** 构建请求数据 */
			buildRequestData() {
				return {
					id: this.jiamid,
					userPhone: this.tel,
					areaId: this.areaId,
					point: this.bili,
					type: this.jiamtype,
					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 successMessage = isEdit ? '编辑成功' : '创建成功'
				try {
					const res = await this.$u[apiMethod]('/bst/areaJoin', data)
					this.handleApiResponse(res, successMessage)
				} catch (error) {
					uni.showToast({ title: '请求失败，请重试', icon: 'none', duration: 2000 })
				}
			},
			
			/** 点击删除 */
			btnshanchu() {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '您确定要删除此合伙人吗？',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							that.$u.delete(`/bst/areaJoin/${that.jiamid}`).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'success',
										duration: 2000
									})
									setTimeout(() => { uni.navigateBack() }, 2000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						} else if (res.cancel) {

						}
					}
				})
			}
		}
	}
</script>

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

	.custom-select-popup {
		padding: 30rpx;
		background-color: #f7f8fa;
		
		.popup-title {
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 30rpx;
		}
		
		.select-item {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			
			.item-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
				
				.item-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
				}
			}
			
			.item-desc {
				font-size: 24rpx;
				color: #999;
				line-height: 1.5;
			}
		}
		
		.popup-cancel {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			text-align: center;
			font-size: 32rpx;
			color: #666;
			margin-top: 20rpx;
		}
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;

		.title {
			margin-top: 0;
		}

		.global-actions {
			display: flex;
			align-items: center;
		}
	}

	.action-btn {
		font-size: 26rpx;
		color: #4C97E7;
		padding: 0 10rpx;
	}

	.action-divider {
		font-size: 24rpx;
		color: #ccc;
	}

	.loading-tip {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
	}

	.permission-group {
		margin-top: 24rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 24rpx 28rpx;
		box-sizing: border-box;

		.group-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.group-name {
				font-size: 30rpx;
				font-weight: bold;
				color: #3D3D3D;
			}

			.group-actions {
				display: flex;
				align-items: center;
			}
		}

		.swlist {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.swlist_val {
				display: flex;
				justify-content: space-between;
				width: 48%;
				min-height: 120rpx;
				background: #F4F5F7;
				border-radius: 16rpx;
				padding: 20rpx 20rpx 20rpx 24rpx;
				box-sizing: border-box;
				margin-bottom: 16rpx;
			}

			.lt {
				flex: 1;
				padding-right: 12rpx;

				.one {
					font-size: 26rpx;
					color: #3D3D3D;
					line-height: 1.4;
				}

				.two {
					font-size: 22rpx;
					color: #808080;
					margin-top: 8rpx;
					line-height: 1.4;
				}
			}

			.rt {
				display: flex;
				align-items: center;
			}
		}
	}

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

	.page {
		width: 750rpx;

		.box {
			width: 750rpx;
			height: 100%;
			overflow-y: scroll;
			background: #F4F5F7;
			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;
				margin-top: 80rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
			}
			
			.shanchu {
				width: 584rpx;
				height: 90rpx;
				margin: auto;
				background: #FFF1F0;
				border-radius: 54rpx;
				margin-top: 30rpx;
				margin-bottom: 78rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FF4D4F;
				text-align: center;
				line-height: 90rpx;
			}

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

				.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;
						padding-left: 32rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						color: #808080;
					}
				}
			}
		}
	}
</style>
