<template>
	<!-- <view>填写发票信息</view> -->
	<view class="container">
		<view class="invoiceInfo">
			<view class="invoiceList-item flex">
				<view class="item-img">
					<image style="width: 170rpx;height: 170rpx;border-radius: 20rpx;" src="../../static/index/about.png"
						mode=""></image>
				</view>
				<view class="item-con">
					<view class="itenCon-actName" style="">活动名</view>
					<view class="itenCon-actPrice" style="">￥ 价格</view>
				</view>
			</view>
		</view>
		<!-- 表单 -->
		<view style="height: auto;">
			<u-form :model="form" :rules="rules" ref="uForm" label-width="auto" labelPostition="left">
				<view class="formBox">
					<u-form-item label="发票类型" prop="username">
						<view class="typeBOx">
							<view class="normalInv">
								<view class="typeImgs">
									<image style="width: 44rpx;height: 44rpx;" src="../../static/fabu/check.png" mode=""></image>
									<image style="width: 44rpx;height: 44rpx;" src="../../static/fabu/nocheck.png" mode=""></image>
								</view>
								<view class="typeText">普通发票</view>
							</view>
							<view class="specialInv"></view>
						</view>
						
					</u-form-item>
			
					<u-form-item label="发票内容" prop="password" required>
						<image style="width: 38rpx;height: 38rpx;" src="/static/tips.png" mode=""></image>
						<!-- <u-input inputAlign="right" v-model="form.password"  placeholder="请输入密码" border="none"/> -->
					</u-form-item>
			
					<u-form-item label="抬头类型" prop="confirmPassword" required>
						<!-- name和range-key绑定的值都是抬头类型的字段-->
						<picker @change="clickUpTypeShow" name="isUpType" :value="upTypelist" :range="upTypelist" range-key="isUpType">
							<view class="form_right">
								请选择抬头类型
								<u-icon name="arrow-right"></u-icon>
							</view>
						</picker>
					</u-form-item>
			
					<u-form-item label="发票抬头" prop="email">
						<u-input inputAlign="right" v-model="form.email" placeholder="请输入邮箱" border="none"/>
					</u-form-item>
			
					<u-form-item label="抬头名称" prop="age">
						<u-input inputAlign="right" v-model="form.age" type="number" placeholder="请输入抬头名称" border="none"/>
					</u-form-item>
					<u-form-item label="单位税号" prop="age">
						<u-input inputAlign="right" v-model="form.age" type="number" placeholder="请输入单位税号" border="none"/>
					</u-form-item>
					<u-form-item label="注册地址" prop="age">
						<u-input inputAlign="right" v-model="form.age" type="number" placeholder="必填" border="none"/>
					</u-form-item>
					<u-form-item label="注册电话" prop="age">
						<u-input inputAlign="right" v-model="form.age" type="number" placeholder="必填" border="none"/>
					</u-form-item>
					<u-form-item label="开户银行" prop="age">
						<u-input inputAlign="right" v-model="form.age" type="number" placeholder="必填" border="none"/>
					</u-form-item>
					<u-form-item label="银行账号" prop="age">
						<u-input inputAlign="right" v-model="form.age" type="number" placeholder="必填" border="none"/>
					</u-form-item>
					</view>
					<!-- <view style="background-color: #f5f5f5;height: 40rpx;"></view> -->
					
					<view class="recipientInfo" >
						<u-form-item label="手机号" prop="age">
							<u-input inputAlign="right" v-model="form.age" type="number" placeholder="请输入手机号" border="none"/>
						</u-form-item>
						<u-form-item label="邮箱地址" prop="age">
							<u-input inputAlign="right" v-model="form.age" type="number" placeholder="请输入邮箱地址" border="none"/>
						</u-form-item>
					</view>
					
					
						<!--<u-form-item>
							<u-button type="primary" @click="submit">申请开票</u-button>
							 <u-button @click="reset" style="margin-left: 30rpx">重置</u-button> 
						</u-form-item>-->
					
					
				
			</u-form>
			
			<view style="width: 100%;height: 140rpx;"></view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="footer-btn">
			<u-button color="#323232" shape="circle">申请开票</u-button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				upTypelist:[],//抬头类型列表
				id:1,
				order_no:'',
				form: {
					username: '',
					password: '',
					confirmPassword: '',
					email: '',
					age: ''
				},
				rules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '用户名长度在3到10个字符',
							trigger: 'blur'
						}
					],
					
					email: [{
						type: 'email',
						message: '邮箱格式不正确',
						trigger: 'blur'
					}],
					age: [{
							type: 'number',
							message: '年龄必须为数字',
							trigger: 'blur'
						},
						{
							min: 18,
							max: 60,
							type: 'number',
							message: '年龄必须在18到60岁之间',
							trigger: 'blur'
						}
					]
				}
			}
		},
		onLoad(options) {
			// this.userInfo = uni.getStorageSync("userInfo")
			this.id = options.id
			this.order_no = options.order_no
			console.log('id:',this.id,'order_no:',this.order_no);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						})
						console.log('表单数据:', this.form)
					} else {
						console.log('验证失败')
					}
				})
			},
			reset() {
				this.$refs.uForm.resetFields()
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss" scoped>
	
	.form_right {
		display: flex;
		align-items: center;
		margin-left: auto;
		color: #848484;
		width: 300rpx;
		padding: 0rpx 0rpx 0rpx 20rpx;
		position: relative;
		left:2rpx;
		font-size: 26rpx;
		font-weight: 400;
		text-align: right;
		justify-content: flex-end;
	}
	
	.typeBOx {
		width: 400rpx;
		display: flex;
		align-items: center;
		margin-left: auto;
		justify-content: center;
		
		.normalInv {
			display: flex;
			align-items: center;
			justify-content: center;
			
			.typeImgs {
				width: 44rpx;
				height:44rpx;
			}
			
			.typeText {
				font-size:30rpx;
				font-weight: 400;
				color: #999999;
			}
			
			.typeText2 {
				font-size:30rpx;
				font-weight: 400;
				color: #323232;
			}
		}
	}
	
	.container {
		padding: 40rpx 0;
		background-color: #f5f5f5;

		.invoiceInfo {
			.invoiceList-item {
				display: flex;
				justify-content: left;
				align-items: center;
				background-color: #ffffff;
				width: 100%;
				// margin-top: 20rpx;
				// padding: 20rpx;
				height: 220rpx;

				.item-img {
					width: 170rpx;
					height: 170rpx;
					margin-left: 40rpx;

				}

				.item-con {
					margin-left: 20rpx;
					width: 60%;
					height: 160rpx;
					position: relative;
					color: #323232;

					.itenCon-actName {
						position: absolute;
						top: 0;
						font-size: 28rpx;
						font-weight: 400;
					}

					.itenCon-actPrice {
						position: absolute;
						bottom: 0;
						font-size: 32rpx;
						font-weight: 900;
					}
				}


			}
		}

		.formBox {
			// width: 100%;
			margin-top: 30rpx;
			background-color: #ffffff;
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
		}
		
		.recipientInfo {
			margin-top: 30rpx;
			background-color: #ffffff;
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
		}
		
		.footer-btn {
			width: 95%;
			padding: 20rpx 20rpx 60rpx;
			display: flex;
			position: fixed;
			bottom: 0;
			// left: 0;
			right: -2rpx;
			z-index: 99;
			background-color: #ffffff;
		}

	}
</style>