<template>
	<view class=" page padding ">
		<view class=" padding bg-white radius">
			<view class="flex justify-between align-center">
				<view class="flex align-center">
					<view class="border-tite"></view>
					<view class="text-bold margin-left-xs" @click="show = true">湘西自治州和谐网络科技有限公司</view>
					<up-picker :show="show" :columns="columns"></up-picker>
				</view>
				<view class="tag-outline">负责人</view>
			</view>
			
			<view class="flex margin-top">
				<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
				<view class="margin-left">
					<view class="flex">
						<view>罗燚</view>
						<view class="margin-left-xs light bg-olive padding-left-xs padding-right-xs">正常</view>
					</view>
					<view class="flex text-gray">
						<view>手机设置：</view>
						<view>未设置</view>
					</view>
					<view class="flex text-gray">
						<view>登录IP：</view>
						<view>45.135.228.172</view>
					</view>
				</view>
				<button class="bg-blue btn-lock" @click="Lock()">锁定</button>
			</view>
			
		</view>
		<button class="lg cuIcon-add bg-blue round margin-top-xl" @click="showPopup = true">添加成员</button>
		
		<!-- 添加成员弹出框 -->
		<u-popup :show="showPopup" mode="center" round="20" @close="showPopup = false">
			<view class="popup-content">
				<view class="popup-header">
					<view class="popup-title text-bold">添加成员</view>
					<view class="popup-close" @click="showPopup = false">×</view>
				</view>
				
				<view class="popup-body">
					<!-- 用户名 -->
					<view class="form-item">
						<view class="form-label">用户名<text class="text-red">*</text></view>
						<input class="form-input" v-model="formData.username" placeholder="请输入用户名" />
					</view>
					
					<!-- 昵称 -->
					<view class="form-item">
						<view class="form-label">昵称</view>
						<input class="form-input" v-model="formData.nickname" placeholder="请输入昵称" />
					</view>
					
					<!-- 手机号 -->
					<view class="form-item">
						<view class="form-label">手机号</view>
						<input class="form-input" v-model="formData.phone" placeholder="请输入手机号" type="number" />
					</view>
					
					<!-- 密码 -->
					<view class="form-item">
						<view class="form-label">密码<text class="text-red">*</text></view>
						<input class="form-input" v-model="formData.password" placeholder="请输入密码（6-16位）" password />
					</view>
					
					<!-- 主部门 -->
					<view class="form-item">
						<view class="form-label">主部门<text class="text-red">*</text></view>
						<view class="form-input form-select" @click="showDeptPicker = true">
							<text :class="formData.department ? '' : 'text-gray'">
								{{ formData.department || '请选择主部门' }}
							</text>
						</view>
					</view>
				</view>
				
				<view class="popup-footer">
					<button class="btn-cancel" @click="showPopup = false">取消</button>
					<button class="btn-confirm bg-blue" @click="handleSubmit">确定</button>
				</view>
			</view>
		</u-popup>
	
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';

const showPopup = ref(false);
const showDeptPicker = ref(false);

const formData = reactive({
	username: '',
	nickname: '',
	phone: '',
	password: '',
	department: ''
});

const handleSubmit = () => {
	// 表单验证
	if (!formData.username) {
		uni.showToast({ title: '请输入用户名', icon: 'none' });
		return;
	}
	if (!formData.password || formData.password.length < 6 || formData.password.length > 16) {
		uni.showToast({ title: '请输入6-16位密码', icon: 'none' });
		return;
	}
	if (!formData.department) {
		uni.showToast({ title: '请选择主部门', icon: 'none' });
		return;
	}
	
	// 提交逻辑
	console.log('提交数据：', formData);
	uni.showToast({ title: '添加成功', icon: 'success' });
	showPopup.value = false;
};

// 锁定成员
const Lock = () => {
	uni.showModal({
		title: '提示',
		content: '确定要锁定该成员吗？',
		confirmColor: '#2667E9',
		success: (res) => {
			if (res.confirm) {
				// 确认锁定
				console.log('用户点击确定');
				uni.showToast({ title: '锁定成功', icon: 'success' });
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
};
//选择部门
const show = ref(false);
const columns = reactive([
  ['湘西自治州和谐网络科技有限公司',  '湘西自治州和谐云科技有限公司']
]);
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #EBF2FC;
	}

	.border-tite {
		width: 8rpx;
		height: 32rpx;
		background: #2667E9;
		border-radius: 8rpx;
	}

	.tag-outline {
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		background:#EEF3FF;
		color: #2E7CF3 ;
		font-size: 24rpx;
		flex-shrink: 0;
		margin-right: -30rpx;
		border-radius: 24rpx 0rpx 0rpx 24rpx;
	}

	.btn-lock {
		width: 112rpx;
		height: 52rpx;
		line-height: 52rpx;
		padding: 0;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// 弹出框样式
	.popup-content {
		width: 600rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.popup-title {
		font-size: 34rpx;
		color: #333;
	}

	.popup-close {
		font-size: 48rpx;
		color: #999;
		line-height: 1;
	}

	.popup-body {
		max-height: 700rpx;
		overflow-y: auto;
	}

	.form-item {
		margin-bottom: 24rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 12rpx;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid #E5E5E5;
		border-radius: 12rpx;
		padding: 0 24rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.form-select {
		display: flex;
		align-items: center;
		line-height: 80rpx;
	}

	.popup-footer {
		display: flex;
		justify-content: center;
		gap: 30rpx;
		margin-top: 40rpx;
	}

	.btn-cancel {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border: 2rpx solid #2667E9;
		border-radius: 40rpx;
		background: #fff;
		color: #2667E9;
		font-size: 30rpx;
	}

	.btn-confirm {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
	}
</style>
