<template>
	<view class="employee_control">
		<!-- 员工列表 -->
		<view class="employeeList">
			<view class="header">
				<view class="list_card">
					<text>时间</text>
					<text>价格</text>
					<text>状态</text>
					<text>设置</text>
				</view>
			</view>
			<view class="list">
				<view v-for="(item, index) in vipList" :key="index" class="list_card">
					<text class="flex-box">{{ item.time }}</text>
					<text class="flex-box">￥{{ item.price }}</text>
					<text class="flex-box" :style="{color: item.status === 1 ? '#1784FC' : '#FC1717'}">{{ item.status === 1 ? '正常' : '下架' }}</text>
					<u-icon name="setting" size="16" color="#333" @click="editEmployee(item)"></u-icon>
				</view>
			</view>
		</view>
		<!-- 添加员工 -->
		<view class="add_vipCard" @click="addEmployee">
			<u-icon name="plus-circle"></u-icon>
			<text class="m-l-20">添加会员卡</text>
		</view>
		<!-- 添加与修改vip弹出框 -->
		<u-popup :show="show" mode="center" :round="12" @close="show = false">
			<view class="employeeForm">
				<u--form :model="form" ref="uForm" labelWidth="60">
					<u-form-item label="时间" prop="time">
						<u-input v-model="form.time" border="bottom" placeholder="请填写天数" />
					</u-form-item>
					<u-form-item label="价格" prop="price">
						<u-input v-model="form.price" border="bottom" placeholder="请填写价格"  suffixIcon="rmb" suffixIconStyle="color: #333"/>
					</u-form-item>
					<u-form-item label="状态" prop="status">
						<u-switch v-model="form.status" :activeValue="1" :inactiveValue="0" activeColor="#1784FC" inactiveColor="#FC1717"></u-switch>
					</u-form-item>
					<u-form-item>
						<view class="btn">
							<u-button text="提交" color="#333" shape="circle" @click="show = false"></u-button>
							<u-button text="取消" color="#DDD" shape="circle" @click="show = false"></u-button>
						</view>
					</u-form-item>
				</u--form>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit: false, // 是否为编辑
				show: false, // 是否显示弹出框
				form: { time: '', price: '', status: 0 },
				vipList: [
					{ time: '1天', price: '30', status: 1 },
					{ time: '30天', price: '900', status: 0 },
					{ time: '180天', price: '3600', status: 1 },
					{ time: '360天', price: '7200', status: 1 }
				],
				rules: {
					name: [
						{ required: true, message: '请输入员工姓名', trigger: ['blur', 'change'] }
					],
					phone: [
						{ required: true, message: '请输入手机号', trigger: ['change'] },
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change','blur'],
						}
					],
					password: [
						{ required: true, message: '请输入密码', trigger: ['change'] },
						{ pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字',
							trigger: ['change']
						},
						{ min: 6, max: 8, message: '长度在6-8个字符之间', trigger: ['change'] }
					]
				}
			}
		},
		onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			// 添加员工
			addEmployee(){
				this.form = { name: '', phone: '', password: '' }
				this.isEdit = false
				this.show = true
			},
			// 编辑员工
			editEmployee(item){
				this.isEdit = true
				this.form = item
				this.show = true
			},
			// 提交
			submit() {
				this.$refs.uForm.validate().then(valid => {
					if(this.isEdit) {
						uni.$u.toast('编辑')
					} else {
						uni.$u.toast('添加')
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.employee_control{
	padding: 20rpx 30rpx;
	.employeeList{
		border-radius: 12rpx;
		overflow: hidden;
		.header{
			padding: 0 20rpx;
			background: #E6F7FF;
			color: #1784FC;
			font-weight: 500;
			font-size: 28rpx;
			line-height: 38rpx;
		}
		.list{
			background-color: #fff;
			padding: 0 20rpx;
			color: #333;
			font-size: 28rpx;
			line-height: 38rpx;
			.list_card{
				border-bottom: 2rpx solid #eee;
				&:last-child{
					border-bottom: 0;
				}
			}
		}
		.list_card{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 120rpx;
			padding: 0 36rpx;
		}
	}
	.add_vipCard{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		line-height: 38rpx;
		color: #999;
		height: 120rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 12rpx;
	}
}

// 添加员工
.employeeForm{
	width: 680rpx;
	padding: 20rpx 30rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	box-sizing: border-box;
	.btn {
		display: flex;
		align-items: center;
		justify-content: space-around;
		gap: 50rpx;
	}
}
</style>