<template>
	<view class="marketing-wrap">
		<template v-for="(i,j) in list">
			<image class="marketing-image" :src="`${image}${j+1}@2x.png`" :key="j" mode="widthFix"></image>
		</template>
		<view class="marketing-view" :style="{'height':`${height}px`}">
			<image class="marketing-image-form" :src="`${image}5@2x.png`" mode="widthFix"></image>
			<view class="marketing-form">
				<u-form :model="formData" :rules="rules" ref="uForm" labelPosition="top" labelWidth="300">
					<u-form-item label="Your name" prop="name" required>
						<u-input v-model="formData.name" type="text" maxlength="50"></u-input>
					</u-form-item>
					<u-form-item label="Your email" prop="email" required>
						<u-input v-model="formData.email" type="email" maxlength="50"></u-input>
					</u-form-item>
					<u-form-item label="WhatsApp" prop="whatsApp">
						<u-input v-model="formData.whatsApp" type="text" maxlength="50"></u-input>
					</u-form-item>
					<u-form-item label="The products you need" prop="productNeed" class="product">
						<u-textarea v-model="formData.productNeed" type="text" maxlength="70" count></u-textarea>
					</u-form-item>
				</u-form>
				<view class="marketing-action" @click="handleSubmit()">Submit</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			image: 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/sharefly-marketing-0',
			list:[],
			height: 0,
			disabled:false,
			tips:'获取验证码',
			formData:{
				name:''
			},
			rules: {
				name: [{
					type: 'string',
					required: true,
					message: 'Please enter your name',
					trigger: ['change', 'blur']
				}],
				email: [{
					type: 'email',
					required: true,
					len: 50,
					message: 'Please enter your email',
					trigger: ['change', 'blur']
				},{
					validator: (rule, value, callback) => {
						return uni.$u.test.email(value);
					},
					message: "Please enter a valid email",
					trigger: ["change", "blur"],
				}],
				// whatsApp: [{
				// 	type: 'string',
				// 	required: true,
				// 	message: 'Please enter your whatsapp id',
				// 	trigger: ['change', 'blur']
				// }],
				// productNeed: [{
				// 	type: 'string',
				// 	required: true,
				// 	message: 'Please enter the product you need',
				// 	trigger: ['change', 'blur']
				// }],
			}
		}
	},
	mounted(){
		this.list = new Array(4)
		if(uni.getSystemInfoSync().screenWidth > 768){
			this.height = 672
		}else{
			this.height = Math.floor(uni.getSystemInfoSync().screenWidth / 375 * 672)
		}
	},
	methods:{
		//提交数据
		handleSubmit(){
			// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
			this.$refs.uForm.validate().then(async val => {
				// if(!uni.getStorageSync('clientInfo')){
					let res = await this.$httpRequest({
						url: this.$api.insertClientInfo,
						method: 'POST',
						data: this.formData
					})
					if(res && res.code == '200'){
						// uni.setStorageSync('clientInfo',true)
						this.$refs.uForm.resetFields()
						this.formData = {
							name:'',
							email:'',
							whatsApp:'',
							productNeed:''
						}
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 300
						});
						uni.showToast({
							title: 'Thank you for your participation!',
							icon: 'none'
						})
					}else{
						uni.showToast({
							title: 'Data submission failed',
							icon: 'none'
						})
					}
				// }else{
				// 	uni.showToast({
				// 		title: 'Do not submit multiple times!',
				// 		icon: 'none'
				// 	})
				// }
			}).catch(err => {
				return
			})
		},
	}
}

</script>

<style lang="scss" scoped>
page{
	background-color: #041D5A;
}
 @media screen and (min-width:768px) {
	.marketing-wrap{
		width: 375px !important;
	}
}
.marketing-wrap{
	position: relative;
	min-height: 100vh;
	height: auto;
	width: 100%;
	margin: 0 auto;
	background-color: #fff;
	.marketing-image{
		width:100%;
		margin-top: -8px;
	}
	.marketing-view{
		position: relative;
		width:100%;
		margin-top: -8px;
		padding-top: 258rpx;
		box-sizing: border-box;
		background: #3366FF;
		.marketing-image-form{
			position: absolute;
			top: 0;
			left: 0;
			width:100%;
		}
		.marketing-form{
			width:calc(100% - 200rpx);
			height: auto;
			margin: 0 auto;
		}
		.marketing-action{
			position: relative;
			width: 552rpx;
			height: 86rpx;
			margin: 0 auto;
			background: #3366FF;
			border-radius: 10rpx;
			text-align: center;
			line-height: 86rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 12rpx;
		}
		.marketing-action:active{
			transform: scale(0.96);
			filter: brightness(0.96);
			transition-duration: 168ms;
			transition-timing-function: ease-in-out;
		}
	}
}
::v-deep{
	.u-form-item__body__left__content__label{
		font-size: 32rpx;
		font-weight: 500;
		color: #622C05;
		line-height: 44rpx;
	}
	.u-form-item__body__left__content__required{
		// right: 0;
	}
	.u-input__content__field-wrapper__field{
		height: 60rpx;
		border-radius: 10rpx;
		border: 2rpx solid #622C05;
		padding: 0 8rpx;
	}
	.u-textarea{
		border: 2rpx solid #622C05;
		padding: 4rpx 10rpx;
		.u-textarea__field{
			height: 92rpx !important;
		}
	}
	.product{
		.u-input__content__field-wrapper__field{
			height: 92rpx;
		}
	}
	.u-form-item__body__left__content__label{
		margin-left:20rpx;
	}
	.u-form-item__body__left__content__required{
		left: 0;
	}
	.u-input{
		padding: 0 !important;
	}
	.u-form-item__body{
		padding:10rpx 0 10rpx 0;
	}
	.u-form-item__body__right__message{
		z-index: 1;
	}
}

</style>