<template>
	<view style="padding: 30rpx 0px 0rpx 0px;">
		<view class="steps_box">
			<block class="block-step" v-for="(item, index) in stepsDatas" :key="index">
				<view class="view_item">
					<!-- 打钩 -->
					<!-- <icon v-if="stepsIndex >= index ? true : false" type="success" size="48rpx" color="#007aff" /> -->
					<view  v-if="stepsIndex >= index ? true : false" style="color: #fff;background-color: #228def;"> {{ index + 1 }} </view>
					<!-- 圆圈数字 -->
					<view v-else> {{ index + 1 }} </view>
					<!-- 标题 -->
					<text :style="{ color: stepsIndex >= index ? '#228ded' : '#909090' }" style="font-weight: bold;">{{ item.text }}</text>
				</view>
				<!-- 横线 -->
				<view v-if="index == stepsDatas.length - 1 ? false : true" :class="['view_line', stepsIndex <= index ? 'line_bgcolor1' : 'line_bgcolor']"></view>
			</block>
	    </view>
		 
		<view class="write" :isFull="true">
			<view class="flex flex-direction-column">
				<view class="header">
					<!-- 开票信息 -->
					<view v-if="stepsIndex === 0">
						<view class="form-title">开票信息：</view>
						<view class="form-box">
							<uni-forms :modelValue="list1" ref="form">
								<uni-forms-item label="开票项目:" required name="name" :label-width="90">
									<uni-data-select v-model="list1.project_id" :clear="false" :localdata="range" placeholder="请选择开票项目"></uni-data-select>
								</uni-forms-item>
								<uni-forms-item label="合并开票:" required name="name" :label-width="90">
									<!-- <uni-data-checkbox v-model="list1.merge" :localdata="mergelist"></uni-data-checkbox> -->
									<radio-group @change="radioChange" style="height: 100%;display: flex;align-items: center;margin-left: 20rpx;">
										<label v-for="(item,index) in mergelist" :key="item.value">
											<radio :value="item.value" :checked="list1.merge === item.value" /><text>{{item.text}}</text>
										</label>
									</radio-group>
								</uni-forms-item>
								<uni-forms-item label="用户编号:" required name="name" :label-width="90">
									<uni-combox v-model="list1.pucode" :border="false" :candidates="candidates" placeholder="请选择或输入用户编号"></uni-combox>
								</uni-forms-item>
								<uni-forms-item label="账期:" required name="name" :label-width="90">
									<view @click="showPopup" style="height: 72rpx;line-height: 72rpx;margin-left: 20rpx;margin-right: 18rpx;">
										<view  style="font-size: 28rpx;height: 100%;display: flex;justify-content: space-between;" v-if="list1.expire_time">
											<view>{{list1.expire_time}}</view>
											<view><uni-icons type="down" size="30rpx" color="rgb(153, 153, 153)"></uni-icons></view>
										</view>
										<view v-else style="color: #999;font-size: 28rpx;height: 100%;display: flex;justify-content: space-between;">
											<view>请选择账期</view>
											<view><uni-icons type="down" size="30rpx" color="rgb(153, 153, 153)"></uni-icons></view>
										</view>
									</view>
								</uni-forms-item>
								<view class="form-title">接收方式：</view>
								<uni-forms-item label="手机号码" required name="name" :label-width="90">
									<uni-easyinput style="margin-left: 16rpx;" type="text" v-model="list1.phone" :inputBorder="false" @blur="onInput" placeholder="请输入可用手机号码"></uni-easyinput>
								</uni-forms-item>
								<uni-forms-item label="邮箱" name="name" :label-width="82" style="margin-left: 40rpx;">
									<uni-easyinput style="margin-left: 16rpx;" type="text" v-model="list1.email"  :inputBorder="false" placeholder="请输入邮箱" @blur="validateEmail"></uni-easyinput>
								</uni-forms-item>
							</uni-forms>
						</view>
					</view>
					<!-- 抬头信息 -->
					<view v-if="stepsIndex === 1">
						<view class="lookup">
							<view class="lookup-title">抬头信息：</view>
							<!-- <view class="lookup-title1" @click="Obtain"><uni-icons type="redo-filled" size="30rpx" color="#007aff"></uni-icons>导入发票抬头</view> -->
						</view>
						<uni-forms :modelValue="list2" ref="form1">
							<uni-forms-item label="抬头类型" required name="name" :label-width="90">
								<!-- <uni-data-checkbox v-model="list2.type" :localdata="headerType"></uni-data-checkbox> -->
								<radio-group @change="radioChange2" style="height: 100%;display: flex;align-items: center;">
									<label v-for="(item,index) in headerType" :key="item.value">
										<radio :value="item.value" :checked="list2.type === item.value" disabled /><text>{{item.text}}</text>
									</label>
								</radio-group>
							</uni-forms-item>
							<uni-forms-item label="名称" required name="name" :label-width="90" v-if="list2.type=='0'||!list2.type">
								<view class="list3_box" v-if="list2.title" :style="{color: list2.title ? '#000' : '#999'}">{{list2.title?list2.title:'请输入抬头名称'}}</view>
								<uni-easyinput type="text" v-else v-model="list2.title1" :inputBorder="false" placeholder="请输入抬头名称"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="税号" required name="name" :label-width="90" v-if="list2.type=='0'||!list2.type">
								<view class="list3_box" v-if="list2.tax_number" :style="{color: list2.tax_number ? '#000' : '#999'}">{{list2.tax_number?list2.tax_number:'请输入请输入纳税人识别号'}}</view>
								<uni-easyinput type="text" v-else v-model="list2.tax_number1"  @blur="taxiD" :inputBorder="false" placeholder="请输入纳税人识别号"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="姓名" required name="name" :label-width="90" v-if="list2.type=='1'">
								<view class="list3_box" v-if="list2.title" :style="{color: list2.title ? '#000' : '#999'}">{{list2.title?list2.title:'请输入姓名'}}</view>
								<uni-easyinput type="text" v-else v-model="list2.title1" :inputBorder="false" placeholder="请输入抬头名称"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="身份证" name="name" :label-width="90" v-if="list2.type=='1'">
								<view class="list3_box" v-if="list2.tax_number" :style="{color: list2.tax_number ? '#000' : '#999'}">{{list2.tax_number?list2.tax_number:'请输入纳税人身份证号'}}</view>
								<uni-easyinput type="text" v-else v-model="list2.tax_number1" :inputBorder="false" placeholder="请输入抬头名称"></uni-easyinput>
							</uni-forms-item>
						</uni-forms>
					</view>
					<!-- 提交申请 -->
					<view v-if="stepsIndex === 2">
						<view class="form-title">开票信息</view>
						<uni-forms>
							<uni-forms-item label="开票项目" name="name" :label-width="90">
								<view class="list3_box">{{project_id1(list1.project_id)}}</view>
							</uni-forms-item>
							<uni-forms-item label="开票金额" name="name" :label-width="90">
								<view class="list3_box">{{amount}}</view>
							</uni-forms-item>
							<view class="form-title">抬头信息</view>
							<uni-forms-item label="抬头类型" name="name" :label-width="90">
								<radio-group @change="radioChange2" style="height: 100%;display: flex;align-items: center;color: #999;" >
									<label v-for="(item,index) in headerType" :key="item.value">
										<radio :value="list2.type" :checked="list2.type === item.value" disabled /><text>{{item.text}}</text>
									</label>
								</radio-group>
							</uni-forms-item>
							<uni-forms-item label="名称" name="name" :label-width="90" v-if="list2.type=='0'">
								<view class="list3_box">{{list2.title}}</view>
							</uni-forms-item>
							<uni-forms-item label="税号" name="name" :label-width="90" v-if="list2.type=='0'">
								<view class="list3_box">{{list2.tax_number?list2.tax_number:list2.tax_number1}}</view>
							</uni-forms-item>
							<uni-forms-item label="姓名" name="name" :label-width="90" v-if="list2.type=='1'">
								<view class="list3_box">{{list2.title}}</view>
							</uni-forms-item>
							<uni-forms-item label="身份证" name="name" :label-width="90" v-if="list2.type=='1'">
								<view class="list3_box">{{list2.tax_number?list2.tax_number:list2.tax_number1}}</view>
							</uni-forms-item>
							<view class="form-title">接收方式</view>
							<uni-forms-item label="电子邮箱" name="name" :label-width="90">
								<view class="list3_box" :style="{color: list1.email ? '#000' : '#999'}">{{list1.email?list1.email:'请选择电子邮箱'}}</view>
							</uni-forms-item>
							<uni-forms-item label="电话号码" name="name" :label-width="90">
								<view class="list3_box">{{list1.phone}}</view>
							</uni-forms-item>
						</uni-forms>
					</view>
				</view>
			</view>
		</view>
		
		<view class="flex justify-end">
			<view class="bottom">
				<button class="btn1" v-if="stepsIndex !== 0" @click="changeSteps" data-type="prev">上一页</button>
			</view>
			<view class="bottom bottom-next">
				<button class="btn" v-if="stepsIndex !== 2" @click="changeSteps" data-type="next">下一页</button>
			</view>
			<view class="bottom bottom-next" style="padding-bottom: 30rpx;">
				<button v-if="stepsIndex !== 0 && stepsIndex !== 1" class="btn" @click="submitForm">确认提交</button>
			</view>
		</view>
		
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="base" title=" " :showClose="false"
			confirmText="知道了" :content="text"></uni-popup-dialog>
		</uni-popup>
		<!-- 账期弹框 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view style="height: 280px;">
				<view class="popup-header">
					<view @click="cancel" style="color: #999;">取消</view>
					<view style="color: #488fd2;"><!-- 更多账期 --></view>
					<view @click="confirm" style="color: #646a8e;">确认</view>
				</view>
				
				<picker-view :indicator-style="indicatorStyle" :value="pickerValue" @change="onPickerChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item < 10 ? '0' + item : item}}月</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import API from '@/common/js/api.js'
	import wxApi from "@/common/js/wxApi.js"
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			// 获取年份
			// year + 1000
			for (let i = 2006; i <=  year; i++) {
			    years.push(i)
			}
			// 获取月份
			for (let i = 1; i <= 12; i++) {
			    months.push(i)
			}
			// 获取当前年份
			const currentYearIndex = years.indexOf(year);
			return {
				years,
				year,
				months,
				month,
				selectedYear: year, // 当前选择的年份
				selectedMonth: month, // 当前选择的月份
				pickerValue: [currentYearIndex, month - 1],
				indicatorStyle: `height: 50px;`,
				// 表单数据
				list1:{
					project_id: '',//开票项目 
					pucode: '',//用户编号id
					merge: '0',//合并开票
					expire_time: '',//到期时间
					email: '',//邮箱
					phone: ''//手机号
				},
				// 抬头信息
				list2:{
					type: '',//抬头类型 
					title: '',//抬头名称
					tax_number:'',//税号
					address: '',//地址
					telephone: '',//电话
					bank_name:'',//开户行
					bank_account:'',//账户
					title1:'',
					tax_number1:''
				},
				amount: "",//开票总金额
				// 步骤条数据
				stepsIndex: 0,
				// 步骤条的名称
				stepsDatas: [
					{ text: '开票信息' },
					{ text: '抬头信息' },
					{ text: '提交申请' },
				],
				// 开票下拉框数据列表
				range: [],
				// 提交申请的抬头类型
				headerType1: [{text: '单位',value: '0',disable: true},{text: '个人',value: '1',disable: true}],
				// 抬头信息的抬头类型
				headerType: [{text: '单位',value: '0'},{text: '个人',value: '1'}],
				// 用户编号数据列表
				candidates: [],
				//合并开票
				mergelist: [{text: '不合并',value: '0'}],
				// ,{text: '合并',value: '1'}
				form1:{},
				form2:{},
				text:''
			}
		},
		onLoad() {
			this.dropdown()
			this.Obtain()
		},
		watch: {
			// 监听selectedYear和selectedMonth的变化，以更新pickerValue
			selectedYear(newVal) {
				const yearIndex = this.years.indexOf(newVal);
				this.pickerValue[0] = yearIndex; // 更新年份的索引
			},
			selectedMonth(newVal) {
				const monthIndex = newVal - 1; // 月份索引
				this.pickerValue[1] = monthIndex; // 更新月份的索引
			}
		},
		methods: {
			// 获取开票信息的下拉数据
			dropdown(){
				API.getApplyData({}, res => {
					this.range = res.data.project_arr;
					this.candidates.push(res.data.pucode)
				})
			},
			// 把开票项目的 value 换成 名称显示
			project_id1(num){
				let name = ""
				this.range.forEach((item)=>{
					if(item.value == num){
						name = item.text
					}
				})
				return name
			},
			// 上一步，下一步
			changeSteps(evt) {
				let { type } = evt.currentTarget.dataset;
				if (type == "prev") {
					if (this.stepsIndex > 0) {
						this.stepsIndex = this.stepsIndex - 1;
					} else {
						this.$tip.toast("已经是初始位置", "none");
					}
				} else {
					if (this.stepsIndex < this.stepsDatas.length - 1) {
						this.stepsIndex = this.stepsIndex + 1;
						this.nextstep()
					} else {
						this.$tip.toast("已经是最后一个", "none");
					}
				}
			},
			// 进行判断每一步的验证
			nextstep(){
				if(this.stepsIndex == 1){
					if(!this.list1.project_id){
						uni.showToast({title: '请选择开票项目',icon: 'none'});
						this.stepsIndex = 0;
						return
					}
					if(!this.list1.merge){
						uni.showToast({title: '请选择是否合并开票',icon: 'none'});
						this.stepsIndex = 0;
						return
					}
					if(!this.list1.pucode){
						uni.showToast({title: '请选择或输入用户编号',icon: 'none'});
						this.stepsIndex = 0;
						return
					}
					if(!this.list1.expire_time){
						uni.showToast({title: '请选择账期',icon: 'none'});
						this.stepsIndex = 0;
						return
					}
					if(!this.list1.phone){
						uni.showToast({title: '请输入手机号',icon: 'none'});
						this.stepsIndex = 0;
						return
					}
					// 使用正则表达式过滤非数字字符
					const phonePattern = /^1[3-9]\d{9}$/;
					if (!phonePattern.test(this.list1.phone)) {
						uni.showToast({
							title: '您输入的手机号格式有误',
							icon: 'none'
						});
						this.stepsIndex = 0;
						return
					}
					const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
					if (!emailPattern.test(this.list1.email)&&this.list1.email) {
						uni.showToast({
							title: '请输入有效的邮箱地址',
							icon: 'none'
						});
						this.stepsIndex = 0;
						return
					}
					// if(!this.list1.email){
					// 	uni.showToast({title: '请输入邮箱号',icon: 'none'});
					// 	this.stepsIndex = 0;
					// 	return
					// }
					this.pay()
					this.form1 = this.$refs.form.modelValue;
					// this.Obtain()
				}
				
				if(this.stepsIndex == 2){
					if(!this.list2.type){
						uni.showToast({title: '请选择抬头类型',icon: 'none'});
						this.stepsIndex = 1
						return
					}
					if(!this.list2.title){
						uni.showToast({title: '请输入抬头名称',icon: 'none'});
						this.stepsIndex = 1
						return
					}
					if(!this.list2.tax_number&&this.list2.type=='0'){
						uni.showToast({title: '请输入税号',icon: 'none'});
						this.stepsIndex = 1
						return
					}
					const taxiD1 = /^([A-Z0-9]{18})$/
					if (!taxiD1.test(this.list2.tax_number)&&this.list2.type=='0') {
						uni.showToast({
							title: '请输入有效的税号',
							icon: 'none'
						});
						this.stepsIndex = 1;
						return
					}
					this.form2 = this.$refs.form1.modelValue;
					
				}
			},
			// 获取日期值
			showPopup() {
			  this.$refs.popup.open();
			},
			// 进行滚动日期时获取数据
			onPickerChange(e){
				const val = e.detail.value;
				this.selectedYear = this.years[val[0]];
				
				if(this.selectedYear===2006){
					this.months = []
					for (let i = 11; i <= 12; i++) {
					    this.months.push(i)
					}
				}else{
					this.months = []
					for (let i = 1; i <= 12; i++) {
					    this.months.push(i)
					}
				}
				
				this.selectedMonth = this.months[val[1]];
			},
			// 确认日期时进行赋值
			confirm() {
				const formattedMonth = this.selectedMonth < 10 ? '0' + this.selectedMonth : this.selectedMonth; // 格式化月份
				this.list1.expire_time = `${this.selectedYear}-${formattedMonth}`; // 赋值并格式化为YYYY-MM
				this.$refs.popup.close(); // 关闭弹窗
			},
			// 关闭日期
			cancel() {
				this.$refs.popup.close(); // 关闭弹窗
			},
			// 获取是否合并开票数据
			radioChange(e){
				this.list1.merge = e.detail.value;
			},
			radioChange2(e){
				this.list2.type = e.detail.value;
			},
			// 限制手机号
			onInput(event) {
				this.list1.phone = event.detail.value
			},
			// 限制邮箱
			validateEmail(event) {
				this.list1.email = event.detail.value
			},
			// 限制税号
			taxiD(event){
				this.list2.tax_number = event.detail.value
			},
			//获取抬头
			Obtain(){
				let _this = this
				// #ifdef MP-WEIXIN||APP-PLUS
					// wx.chooseInvoiceTitle({
					// 	success: (res) => {
					// 		this.list2.type = res.type;
					// 		this.list2.title = res.title;
					// 		this.list2.address = res.companyAddress;
					// 		this.list2.telephone = res.telephone;
					// 		this.list2.bank_name = res.bankName;
					// 		this.list2.bank_account = res.bankAccount;
					// 		console.log('发票抬头信息：', res);
					// 	},
					// 	fail: (err) => {
					// 		console.error('获取发票抬头失败：', err);
					// 	}
					// });
				// #endif
				// #ifdef H5
					// wxApi.wxRegister(() => {
					// 	wx.invoke('chooseInvoiceTitle', {"scene": "1"}, function (res) {
					// 		let info = JSON.parse(res.choose_invoice_title_info);
					// 		_this.list2.type = info.type;
					// 		_this.list2.title = info.title;
					// 		_this.list2.address = info.companyAddress;
					// 		_this.list2.telephone = info.telephone;
					// 		_this.list2.bank_name = info.bankName;
					// 		_this.list2.bank_account = info.bankAccount;
					// 		_this.list2.tax_number = info.taxNumber;
					// 	})
					// })
					API.getFeeInvoiceHead({}, res => {
						_this.list2.type = String(res.data.type);
						_this.list2.title = res.data.title;
						_this.list2.tax_number = res.data.tax_number;
						_this.list1.email = res.data.email;
						console.log(res.data.email);
					})
				// #endif
			},
			pay(){
				let data = {
					pucode: this.list1.pucode,
					expire_time: this.list1.expire_time,
					project_id: this.list1.project_id
				}
				if(!this.amount){
					this.stepsIndex = 0;
				}
				API.validateFeePay(data, res => {
					this.amount = res.data.amount;
					this.text = res.msg;
					if(!this.amount){
						this.$refs.inputDialog.open();
						this.stepsIndex = 0;
						return
					}else{
						this.stepsIndex = 1;
					}
				})
			},
			// 数据提交
			submitForm() {
				let list1 = this.form1;
				let list2 = this.form2;
				const url = '/api/invoiceIssuance/add'
				if(this.list2.type=='1'){
					this.list2.address = "";
					this.list2.telephone = "";
					this.list2.bank_name = "";
					this.list2.bank_account = "";
				}
				let data = {
					project_id: list1.project_id,
					pucode: list1.pucode,
					expire_time: list1.expire_time,
					mobile: +list1.phone,// + 是为了把字符串转换为数字类型，因为组件不好设置数字类型
					email: list1.email,
					merge: +list1.merge,
					type: +list2.type,
					title: list2.title ? list2.title : list2.title1,
					tax_number: list2.tax_number ? list2.tax_number : list2.tax_number1,
					address: list2.address,
					telephone: list2.telephone,
					bank_name: list2.bank_name,
					bank_account: list2.bank_account,
					amount: this.amount
				}
				API.request(url,data, res => {
					if(res.code==1){
						uni.showToast({title: '开票申请完成',icon: 'none'});
						setTimeout(()=>{
							uni.redirectTo({
								url:`/pages/Invoiced/Invoiced?bool=${true}`
							})
						},2000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.write {
  // height: 69%;
}

.header {
  background: #fff;
  border-radius: 20rpx;
  margin: 40rpx 30rpx;
  
  .form-box {
	// padding: 0rpx 25rpx 25rpx 25rpx;
	.picker_box{
		padding: 0px 20rpx;
		display: flex;
		justify-content: space-between;
	}
  }
  .form-title{
  	font-size: 36rpx;
  	font-weight: bold;
  	padding: 25rpx;
  	border-bottom: 2rpx solid #e8e8e8;
  }
}

.lookup{
	padding: 25rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2rpx solid #e8e8e8;
	
	.lookup-title{
		font-size: 36rpx;
		font-weight: bold;
	}
	.lookup-title1{
		color: #007aff;
	}
}

.list3_box{
	height: 72rpx;
	line-height: 72rpx;
}

.steps_box {
  // width: 100%;
  display: flex;
  align-items: center;
  margin: 0px 30rpx;
  padding: 40rpx;
  border-radius: 20rpx;
  justify-content: center;
  background-color: #fff;
}

.block-step {
  display: flex;
  flex-direction: row;
}

.view_item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.view_item text {
  font-size: 30rpx;
  margin-top: 20rpx;
}

.view_item view {
  width: 45rpx;
  height: 45rpx;
  border: 3rpx solid #909090;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909090;
  font-size: 30rpx;
  content: "\e732";
}

.view_line {
  width: 15%;
  height: 5rpx;
  margin: 0rpx 2% 40rpx 2%;
}

.line_bgcolor1 {
  background-color: #e0e0e0;
}

.line_bgcolor {
  background: linear-gradient(to right, #5fe7ff, #00a336);
}

.flex-direction-column {
  height: 100%;
  flex-direction: column;
}

.bottom {
  width: 100%;

  .btn {
    // width: 90%;
    /* margin-top: 30rpx; */
	margin: 0px 30rpx;
    height: 80rpx;
    border-radius: 10rpx;
    background-image: linear-gradient(to right, #2974cf, #448eee);
    color: white;
    text-align: center;
    line-height: 80rpx;
  }
  .btn1{
	// width: 90%;
	margin: 0px 30rpx;
	height: 80rpx;
	border-radius: 10rpx;
	line-height: 80rpx;
	color: #808080;
	border: 2rpx solid #d1d1d1;
	background-color: #efefef;
  }
}

.justify-end {
  position: relative;

  .bottom-next {
    position: absolute;
    top: 100rpx;
  }
}

.padding{
	padding: 25rpx;
}

/deep/.uni-select{
	border: 0px;
}
/deep/.uni-forms-item{
	padding: 5rpx 0px;
	margin: 0rpx 25rpx;
	border-bottom: 2rpx solid #f4f4f4;
}
/deep/.uni-data-checklist .checklist-group{
	height: 72rpx;
}
/deep/.uni-forms-item__label{
	font-size: 30rpx;
	color: #000 !important;
}
/deep/.uni-radio-input{
	width: 35rpx;
	height: 35rpx;
}
/deep/.uni-label-pointer{
	margin-right: 20rpx;
}
/deep/.uni-select__input-placeholder{
	color: #999;
	font-size: 28rpx;
}
/deep/.uni-easyinput__placeholder-class{
	font-size: 28rpx;
}
/deep/.uni-easyinput__content-input{
	padding-left: 0px !important;
}
.popup-header {
	display: flex;
	justify-content: space-between;
	padding: 10px;
}
.picker-view {
	width: 750rpx;
	height: 600rpx;
	margin-top: 20rpx;
}
.item {
	line-height: 100rpx;
	text-align: center;
}
</style>
