<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-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="80">
									<uni-data-select v-model="list1.value" :localdata="range" @change="change" placeholder="请选择开票项目"></uni-data-select>
								</uni-forms-item>
								<uni-forms-item label="合并开票:" required name="name" :label-width="80">
									<uni-data-checkbox v-model="list1.value2" :localdata="sex"></uni-data-checkbox>
								</uni-forms-item>
								<uni-forms-item label="用户编号:" required name="name" :label-width="80">
									<uni-combox v-model="list1.value3" :border="false" :candidates="candidates" placeholder="请选择或输入用户编号" @input="change"></uni-combox>
								</uni-forms-item>
								<uni-forms-item label="到期:" required name="name" placeholder="请选择账期" :label-width="80">
									<picker mode="date" fields="month" v-model="list1.value4" @change="bindDateChange" style="height: 36px;line-height: 36px;">
										<view class="picker_box">
											<view class="uni-input">{{list1.value4}}</view>
											<view><uni-icons type="down" size="30rpx"></uni-icons></view>
										</view>
									</picker>
								</uni-forms-item>
								<view class="form-title">接收方式：</view>
								<uni-forms-item label="手机号:" required name="name" :label-width="80">
									<uni-easyinput type="text" v-model="list1.phoneNumber" :styles="styles" :inputBorder="false" @blur="onInput" placeholder="请输入可用手机号码"></uni-easyinput>
								</uni-forms-item>
								<uni-forms-item label="邮箱:" required name="name" :label-width="80">
									<uni-easyinput 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="80">
								<uni-data-checkbox v-model="list2.value" :localdata="headerType"></uni-data-checkbox>
							</uni-forms-item>
							<uni-forms-item label="名称" required name="name" :label-width="80">
								<uni-easyinput type="text" v-model="list2.name" :inputBorder="false" placeholder="请输入抬头名称"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="税号" required name="name" :label-width="80">
								<uni-easyinput type="text" v-model="list2.taxiD"  @blur="taxiD" :inputBorder="false" placeholder="请输入纳税人识别号"></uni-easyinput>
							</uni-forms-item>
						</uni-forms>
					</view>
					<!-- 提交申请 -->
					<view v-if="stepsIndex === 2">
						<view class="form-title">开票信息</view>
						<uni-forms :modelValue="list3" ref="form2">
							<uni-forms-item label="开票项目" name="name" :label-width="80">
								<!-- <uni-easyinput disabled type="text" v-model="" :inputBorder="false" placeholder="请输入纳税人识别号"></uni-easyinput> -->
								<view class="list3_box">{{list1.value}}</view>
							</uni-forms-item>
							<uni-forms-item label="开票金额" name="name" :label-width="80">
								<view class="list3_box">{{list3.amount}}</view>
							</uni-forms-item>
							<view class="form-title">抬头信息</view>
							<uni-forms-item label="抬头类型" name="name" :label-width="80">
								<uni-data-checkbox v-model="list3.value" :localdata="headerType1"></uni-data-checkbox>
							</uni-forms-item>
							<uni-forms-item label="名称" name="name" :label-width="80">
								<view class="list3_box">{{list2.name}}</view>
							</uni-forms-item>
							<uni-forms-item label="税号" name="name" :label-width="80">
								<view class="list3_box">{{list2.taxiD}}</view>
							</uni-forms-item>
							<view class="form-title">接收方式</view>
							<uni-forms-item label="邮箱" name="name" :label-width="80">
								<view class="list3_box">{{list1.email}}</view>
							</uni-forms-item>
							<uni-forms-item label="手机号" name="name" :label-width="80">
								<view class="list3_box">{{list1.phoneNumber}}</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>
		  </view>
	</view>

</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({format: true})
			return {
				date: currentDate,
				// 表单数据
				list1:{
					value: null,//
					value2: null,
					value3: '',
					value4: '',
					email:'',
					phoneNumber:'',//
				},
				// 抬头信息
				list2:{
					value: null,
					name: '',
					taxiD:''
				},
				// 提交申请
				list3:{
					value: 0,
					amount: 9
				},
				// 手机号输入颜色
				styles: {
					color:"#d5213c"
				},
				// 步骤条数据
				stepsIndex: 0,
				stepsDatas: [
					{ text: '开票信息' },
					{ text: '抬头信息' },
					{ text: '提交申请' },
				],
				// 开票下拉框数据
				range: [
					{ value: 1, text: "垃圾费" },
					{ value: 2, text: "污水费" },
					{ value: 3, text: "游泳" },
				],
				headerType1: [{text: '单位',value: 0,disable: true},{text: '个人',value: 1,disable: true}],
				headerType: [{text: '单位',value: 0},{text: '个人',value: 1}],
				// 用户编号
				candidates: ['12345689512', '54687913246', '54967846513', '48795123187'],
				//合并开票
				sex: [{text: '不合并',value: 1},{text: '合并',value: 2}]
			}
		},
		methods: {
			// 上一步下一步
			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.value){
						uni.showToast({title: '请选择开票项目',icon: 'none'});
						this.stepsIndex = 0
						return
					}
					if(!this.list1.value2){
						uni.showToast({title: '请选择是否合并开票',icon: 'none'});
						this.stepsIndex = 0
						return
					}
					if(!this.list1.value3){
						uni.showToast({title: '请选择或输入用户编号',icon: 'none'});
						this.stepsIndex = 0
						return
					}
					if(!this.list1.value4){
						uni.showToast({title: '请选择到期时间',icon: 'none'});
						this.stepsIndex = 0
						return
					}
					if(!this.list1.phoneNumber){
						uni.showToast({title: '请输入手机号',icon: 'none'});
						this.stepsIndex = 0
						return
					}
					if(!this.list1.email){
						uni.showToast({title: '请输入邮箱号',icon: 'none'});
						this.stepsIndex = 0
						return
					}
					const list1 = this.$refs.form.modelValue
					console.log('表单数据信息：', list1);
				}
				if(this.stepsIndex == 2){
					if(!this.list2.value){
						uni.showToast({title: '请选择抬头类型',icon: 'none'});
						this.stepsIndex = 0
						return
					}
					if(!this.list2.name){
						uni.showToast({title: '请输入抬头名称',icon: 'none'});
						this.stepsIndex = 0
						return
					}
					if(!this.list2.taxiD){
						uni.showToast({title: '请输入税号',icon: 'none'});
						this.stepsIndex = 0
						return
					}
					const list2 = this.$refs.form1.modelValue
					console.log('表单数据信息：', list2);
				}
			},
			change(e) {
				console.log("e:", e);
			},
			bindDateChange(e) {
				let value = e.detail.value;
				this.list1.value4 = value.replace(/-/g, '');
			},
			// 限制手机号
			onInput(event) {
				// 使用正则表达式过滤非数字字符
				const phonePattern = /^1[3-9]\d{9}$/;
				if (!phonePattern.test(event.detail.value) && event.detail.value) {
					uni.showToast({
						title: '您输入的手机号格式有误',
						icon: 'none'
					});
					this.list1.phoneNumber = ''; // 清空输入框
				}else{
					this.list1.phoneNumber = event.detail.value
				}
			},
			// 限制邮箱
			validateEmail(event) {
				const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
				if (!emailPattern.test(event.detail.value) && event.detail.value) {
					uni.showToast({
						title: '请输入有效的邮箱地址',
						icon: 'none'
					});
					this.list1.email = ''; // 清空输入框
				}else{
					this.list1.email = event.detail.value
				}
			},
			// 限制税号
			taxiD(event){
				const taxiD1 = /^([A-Z0-9]{18})$/
				if (!taxiD1.test(event.detail.value) && event.detail.value) {
					uni.showToast({
						title: '请输入有效的税号',
						icon: 'none'
					});
					this.list2.taxiD = ''; // 清空输入框
				}else{
					this.list2.taxiD = event.detail.value
				}
			},
			// 显示日期
			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 + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}${month}${day}`;
			},
			//获取抬头
			Obtain(){
				// #ifdef MP-WEIXIN||APP-PLUS
					wx.chooseInvoiceTitle({
						success: (res) => {
							let type = parseInt(res.type)
							this.list2.value = type;
							this.list2.name = res.title;
							this.list2.taxiD = res.taxNumber;
							console.log('发票抬头信息：', res);
						},
						fail: (err) => {
							console.error('获取发票抬头失败：', err);
						}
					});
				// #endif
				// #ifdef H5
					
				// #endif
			},
			// 数据提交
			submitForm() {
				uni.redirectTo({
					url:`/pages/Invoiced/Invoiced?bool=${true}`
				})
			}
		}
	}
</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;
}
.uni-forms-item__label{
	width: 160rpx !important;
}
</style>
