<template>
	<view class="page">
		<view class="box">
			<view>
				<uni-forms :model="userForm" :rules="rules" err-show-type="toast" validateTrigger="submit" ref="form"
					:border="true" label-position="top" label-width="350">
					<view class="block">
						<uni-forms-item label="用户名" required  >
							<uni-easyinput paddingNone :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="userForm.nickName" placeholder="填写用户名" />
						</uni-forms-item>
						<uni-forms-item label="手机号" required >
							<uni-easyinput paddingNone :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="userForm.phone" placeholder="填写号码" />
						</uni-forms-item>
						<uni-forms-item label="生日" required >
							<view style="display: none;">
								<uni-easyinput paddingNone :inputBorder="inputBorder" v-model="userForm.birthDay"
									placeholder="选择日期" />
							</view>
							<picker mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindDateChange">
								<view class="u-flex u-row-between u-p-b-10 lh40">
									<view class="color-333">{{userForm.birthDay||'选择日期'}}</view>
									<uni-icons type="right"></uni-icons>
								</view>
							</picker>
						</uni-forms-item>

						<uni-forms-item label="性别" required >
							<radio-group class="u-flex u-flex-wrap" @change="sizeChange($event,'sex')">
								<label class="radio u-m-r-60">
									<radio value="1" :checked="userForm.sex == '1'" class="scale7" />
									<text>男</text>
								</label>
								<label class="radio u-m-r-60">
									<radio value="2" :checked="userForm.sex == '2'" class="scale7" />
									<text>女</text>
								</label>
							</radio-group>
						</uni-forms-item>

						<!-- 	<uni-forms-item label="用户余额" required name="balance">
							<uni-easyinput paddingNone :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="userForm.balance" placeholder="填写余额" />
						</uni-forms-item>
						<uni-forms-item label="用户积分" required name="integral">
							<uni-easyinput paddingNone :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
								v-model="userForm.integral" placeholder="填写积分" />
						</uni-forms-item> -->
					</view>
					<!-- 	<view class="block border-top-0">
						<uni-forms-item label="" required>
							<view class="u-flex u-row-between lh40">
								<view class="label-title">状态</view>
								<my-switch v-model="userForm.isVip"></my-switch>
							</view>
						</uni-forms-item>
					</view> -->

				</uni-forms>
			</view>

			<view class="save-btn-box">
				<my-button @tap="save" shape="circle">保存</my-button>
			</view>
		</view>
		<view class="bottom" ref="bottom"></view>
	</view>
</template>

<script setup>
	import { onLoad, onReady } from '@dcloudio/uni-app';
	import { reactive, nextTick, ref } from 'vue';
	import go from '@/commons/utils/go.js';
	import mySwitch from '@/components/my-components/my-switch.vue'
	import myButton from '@/components/my-components/my-button.vue'
	import { shopUserAdd, shopUserPut } from '@/http/api/shopUser.js';

	// 表单样式
	const placeholderStyle = ref('font-size:28rpx;')
	const paddingNone = true
	//表单边框
	const inputBorder = ref(false)
	const form = ref(null)
	const bottom = ref(null)
	const props = defineProps({
		item:{type:''}
	})
	
	const startDate = getDate('start')
	let date = getDate()
	const endDate = getDate('end')
	
	let userForm = reactive({
		nickName: '',
		phone: '',
		birthDay: '',
		balance: '',
		integral: '',
		isVip: true,
		level: 1,
		sex: 1
	})
	//表单验证
	const rules = {
		nickName: {
			rules: [{
				required: true,
				errorMessage: '请填写用户名'
			}]
		},
		phone: {
			rules: [{
					required: true,
					errorMessage: '请输入手机号'
				},
				{
					validateFunction: function(rule, value, data, callback) {
						const isPas = /^1\d{10}$/.test(value);
						if (!isPas) {
							callback('请输入正确的手机号')
						}
						return isPas
					}
				}
			]
		}
	}
	
	const option = reactive({
		type: 'add'
	})
	onReady(() => {
		form.value.setRules(rules)
	})
	onLoad(params => {
		if (params.id) {
			let items = params
			uni.setNavigationBarTitle({
				title: '编辑用户'
			})
			userForm.nickName=items.nickName
			userForm.birthDay=items.birthDay
			userForm.id=items.id
			userForm.phone = items.phone
			userForm.sex = items.sex
			option.type = 'edit'
		} else {
			uni.setNavigationBarTitle({
				title: '新增用户'
			})
			option.type = 'add'
		}
	})
	
	/**
	 * 生日监听
	 * @param {Object} e
	 */
	function bindDateChange(e) {
		userForm.birthDay = e.detail.value
	}
	
	/**
	 * 性别监听
	 * @param {Object} e
	 * @param {Object} name
	 */
	function sizeChange(e, name) {
		userForm[name] = e.detail.value
	}

	/**
	 * 保存
	 */
	function save() {
		form.value.validate().then(async res => {
			let obj = {
				...userForm,
				name: userForm.nickName,
				telephone: userForm.phone,
				birthday:userForm.birthDay,
				status:1,
				levelConsume:0,
				sex:userForm.sex==1?1:2
			}
			if (res) {
				if (option.type == 'add') {
					const ele = await shopUserAdd(obj)
				} else {
					const ele = await shopUserPut(obj)
				}
				go.back()
			}
		})

	}
	
	/**
	 * 日期格式化
	 * @param {Object} type
	 */
	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year
		} else {
			year = year - 20
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}
</script>
<style scoped>
	page {
		background: #F9F9F9;
		height: 100vh;
	}
</style>
<style lang="scss" scoped>
	$icon-size: 34rpx;
	$icon-line-width: 20rpx;
	$icon-line-height: 4rpx;

	.page {
		background: #F9F9F9;
		padding: 30rpx;
		padding-bottom: 200rpx;
	}

	.my-switch {
		transform: scale(0.7);
	}

	::v-deep .uni-forms-item__error {
		display: none !important;
	}

	::v-deep .option .uni-forms-item {
		padding: 0;
		min-height: inherit;
		background-color: transparent;
		border-top: none;
	}

	.icon {
		width: $icon-size;
		height: $icon-size;
		position: relative;
		border-radius: 50%;

		&:before,
		&::after {
			position: absolute;
			display: block;
			content: '';
			background-color: #fff;
		}
	}

	.icon-add {
		background-color: $my-main-color;

		&::before {
			width: $icon-line-height;
			height: $icon-line-width;
			top: calc(($icon-size /2) - ($icon-line-width / 2));
			left: calc(($icon-size /2) - ($icon-line-height / 2));
		}

		&::after {
			width: $icon-line-width;
			height: 4rpx;
			top: calc(($icon-size /2) - ($icon-line-height / 2));
			left: calc(($icon-size /2) - ($icon-line-width / 2));
		}
	}

	.icon-reduce {
		background-color: $my-red-color;

		&::after {
			width: $icon-line-width;
			height: $icon-line-height;
			top: calc(($icon-size /2) - ($icon-line-height / 2));
			left: calc(($icon-size /2) - ($icon-line-width / 2));
		}
	}

	.label-title {
		font-size: 28rpx;
		font-weight: bold;
		font-family: Source Han Sans CN, Source Han Sans CN;
	}

	.lh40 {
		line-height: 40rpx;
	}

	.box {
		font-size: 28rpx;

		.block {
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			padding: 12rpx 24rpx;
			margin-bottom: 32rpx;
		}
	}

	.save-btn-box {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 60rpx;

	}

	::v-deep.uni-forms-item {
		align-items: inherit;
	}

	::v-deep .uni-forms-item .uni-forms-item__label {
		text-indent: 0;
		font-size: 28rpx !important;
		font-weight: bold;
		color: #333;
	}

	::v-deep .border-top-0 .uni-forms-item.is-direction-top {
		border-color: transparent !important;
	}

	.save-btn {
		background-color: $my-main-color;
		color: #fff;
		border-radius: 12rpx;
		font-size: 28rpx;
	}

	.btn-hover-class {
		opacity: .6;
	}

	.zuofa {
		padding: 28rpx 0;
		background: #F9F9F9;
		padding-left: 42rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	::v-deep .uni-input-placeholder {
		font-size: 28rpx;
	}

	.option {
		padding: 26rpx 30rpx 24rpx 24rpx;
		background: #F9F9F9;
	}

	.option-item {
		margin-bottom: 34rpx;
	}
</style>