<template>
	<view class="box">
		<view class="fapiaolist">
			<picker @change="selecttaitou" :value="index" :range="array" range-key="name">
				<view class="fapiaoitem">


					<view class="fleft lei">抬头类型</view>
					<view class="fright">
						<!-- <view class="qdan">企业单位</view> -->
						<view class="qdan">
							{{array[index].name}}
						</view>
						<view class="qirow">
							<image src="/static/img/rowright.png"></image>
						</view>
					</view>

				</view>
			</picker>
			<view class="fapiaoitem">
				<view class="fleft lei">发票抬头</view>
				<view class="fright fatai">
					<input type="text" placeholder="填写发票抬头" placeholder-class="fapiao" v-model="taitou" />
				</view>
			</view>
			<view class="fapiaoitem">
				<view class="fleft lei">税号</view>
				<view class="fright fatai">
					<input type="text" placeholder="填写纳税人识别号" placeholder-class="fapiao" v-model="shuihao" />
				</view>
			</view>
			<view class="fapiaoitem">
				<view class="fleft">备注</view>
				<view class="fright fatai">
					<input type="text" placeholder="填写备注说明" placeholder-class="fapiao" v-model="remark" />
				</view>
			</view>
			<view class="fapiaoitem">
				<view class="fleft">地址</view>
				<view class="fright fatai">
					<input type="text" placeholder="填写地址" placeholder-class="fapiao" v-model="address" />
				</view>
			</view>
			<view class="fapiaoitem">
				<view class="fleft">电话</view>
				<view class="fright fatai">
					<input type="text" placeholder="填写电话" placeholder-class="fapiao" v-model="phone" />
				</view>
			</view>
			<view class="fapiaoitem">
				<view class="fleft">开户行</view>
				<view class="fright fatai">
					<input type="text" placeholder="填写开户行" placeholder-class="fapiao" v-model="bank" />
				</view>
			</view>
			<view class="fapiaoitem">
				<view class="fleft">开户行账号</view>
				<view class="fright fatai">
					<input type="number" placeholder="填写开户行账号" placeholder-class="fapiao" v-model="banknum" />
				</view>
			</view>

		</view>

		<!-- 消费记录 -->
		<view class="fapiaolist">
			<view class="fapiaoitem" @click="selectjilu">
				<view class="fleft">选择消费记录</view>
				<view class="fright">
					<view class="xiaorow">
						<image src="/static/img/rowright.png"></image>
					</view>
				</view>
			</view>
			<view class="fapiaoitem">
				<view class="fleft">发票金额</view>
				<view class="fright fajine">
					<!-- <input type="number" placeholder="填写发票金额" placeholder-class="fapiao" v-model="fapiaomoney" style="text-align: right;" /> -->
				{{fapiaomoney}}
				
				</view>
			</view>
		</view>

		<!-- 收件人信息 -->
		<view class="fapiaolist">
			<view class="shouinfo">收件人信息</view>
			<view class="fapiaoitem">
				<view class="fleft lei">姓名</view>
				<view class="fright fatai">
					<input type="text" placeholder="填写收件人姓名" placeholder-class="fapiao" v-model="shouname" />
				</view>
			</view>
			<view class="fapiaoitem">
				<view class="fleft lei">电话</view>
				<view class="fright fatai">
					<input type="text" placeholder="填写收件人电话" placeholder-class="fapiao" v-model="shouphone" />
				</view>
			</view>
			<view class="fapiaoitem">
				<view class="fleft lei">地址</view>
				<view class="fright fatai">
					<input type="text" placeholder="填写收件人地址" placeholder-class="fapiao" v-model="shouaddress" />
				</view>
			</view>
		</view>

		<view class="surekai" @click="queshen" v-if="kaipiaoshow">确认开票</view>
		<view class="surekai" v-else>确认开票</view>
	</view>
</template>

<script>
	import app from "../../App.vue"
	export default {
		data() {
			return {
				array: [{
						name: "企业单位",
						id: 0
					},
					{
						name: "个人/非企业单位 ",
						id: 1
					}
				],
				index: 0,
				selectid: 0,
				taitou: '',
				shuihao: '',
				remark: '',
				address: '',
				phone: '',
				bank: '',
				banknum: '',
				shouname: '',
				shouphone: '',
				shouaddress: '',
				fapiaomoney:0,
				// 选中的id
				select_id:"",
				kaipiaoshow:true

			}
		},
		methods: {
			
			selecttaitou(e) {
				this.index = e.detail.value,
					this.selectid = this.array[e.detail.value].id

			},
			
			// 选择消费记录
			selectjilu() {
				let obj={};
				obj.selectid=this.selectid;
				obj.taitou=this.taitou;
				obj.shuihao=this.shuihao;
				obj.remark=this.remark;
				obj.address=this.address;
				obj.phone=this.phone;
				obj.bank=this.bank;
				obj.banknum=this.banknum;
				obj.fapiaomoney=this.fapiaomoney;
				obj.shouname=this.shouname;
				obj.shouphone=this.shouphone;
				obj.shouaddress=this.shouaddress;
				// 
				 uni.setStorageSync("canshu",obj)
				uni.navigateTo({
					url: '/pages/selectxiaofeijilu/selectxiaofeijilu?id='+this.select_id
				})
			},
			//确认审核
			queshen() {
				console.log(this.bank)
				if (this.taitou == '') {
					uni.showToast({
						title: '请填写发票抬头',
						icon: 'none',
					})

					return false
				}

				if (this.shuihao == '') {
					uni.showToast({
						title: '请填写税号',
						icon: 'none',
					})

					return false
				}

// 				if (this.remark == '') {
// 					uni.showToast({
// 						title: '请填写备注说明',
// 						icon: 'none',
// 					})
// 
// 					return false
// 				}
// 
// 				if (this.address == '') {
// 					uni.showToast({
// 						title: '请填写地址',
// 						icon: 'none',
// 					})
// 
// 					return false
// 				}
// 
// 				if (this.phone == '') {
// 					uni.showToast({
// 						title: '请填写电话',
// 						icon: 'none',
// 					})
// 
// 					return false
// 				}

// 				var regphone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
// 				if (!regphone.test(this.phone)) {
// 					uni.showToast({
// 						title: '请填写正确的电话',
// 						icon: 'none',
// 					})
// 
// 					return false
// 				}

// 				if (this.bank == '') {
// 					uni.showToast({
// 						title: '请填写开户行',
// 						icon: 'none',
// 					})
// 
// 					return false
// 				}

// 				if (this.banknum == '') {
// 					uni.showToast({
// 						title: '请填写开户行账号',
// 						icon: 'none',
// 					})
// 
// 					return false
// 				}

				if (this.shouname == '') {
					uni.showToast({
						title: '请填写收件人姓名',
						icon: 'none',
					})
					return false
				}

				if (this.shouphone == '') {
					uni.showToast({
						title: '请填写收件人电话',
						icon: 'none',
					})

					return false
				}

				var regshouphone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!regshouphone.test(this.shouphone)) {
					uni.showToast({
						title: '请填写正确的收件人电话',
						icon: 'none',
					})
					return false
				}

				if (this.shouaddress == '') {
					uni.showToast({
						title: '请填写收件人地址',
						icon: 'none',
					})
					return false
				}
				
				this.kaipiaoshow=false
				var param = {
					order_ids:this.select_id,
					type: this.selectid,
					payable: this.taitou,
					paragraph: this.shuihao,
					mark: this.remark,
					address: this.address,
					mobile: this.phone,
					open_bank: this.bank,
					open_account: this.banknum,
					money: this.fapiaomoney,
					user_name: this.shouname,
					user_mobile: this.shouphone,
					user_address: this.shouaddress

				}
				app.post("api/person/applyInvoice", param, 'post')
					.then(res => {
						console.log(res);
						uni.showToast({
							title: '开具发票成功',
							icon: 'none',
						})
						
						uni.removeStorageSync('select_id');
						uni.removeStorageSync('totalmoney');
						uni.removeStorageSync('totalnum');
						uni.removeStorageSync('canshu');

						setTimeout(function() {
							// uni.navigateBack({
							// 	checked:true
							// })

							
							uni.switchTab({
								url: '/pages/personcenter/personcenter'
							})
						}, 1500)
					})
					.catch(err => {
						console.log(err);
						uni.showToast({
							title: err.msg,
							icon: 'none',
						})

					});
			},
		
		
		
		},
		onLoad(options) {
			console.log('123456789',options)
			// this.select_id = options.select_id;
			// console.log(this.select_id,"选中的id")
			// if(options.money!=undefined){
			// 	this.fapiaomoney=options.money
			// }
		},
		onShow() {
			
			this.kaipiaoshow=true
			let totalmoney=uni.getStorageSync("totalmoney");
			console.log('9090902222',totalmoney)
			if(totalmoney!=''){
				
				this.fapiaomoney=totalmoney;
				console.log('77777777',this.fapiaomoney)
			}
			
			
			let obj=uni.getStorageSync("canshu");
			if(obj!=''){
				this.selectid=obj.selectid;
				this.taitou=obj.taitou;
				this.shuihao=obj.shuihao;
				this.remark=obj.remark;
				this.address=obj.address;
				this.phone=obj.phone;
				this.bank=obj.bank;
				this.banknum=obj.banknum;
				// this.fapiaomoney=obj.fapiaomoney;
				this.shouname=obj.shouname;
				this.shouphone=obj.shouphone;
				this.shouaddress=obj.shouaddress;
			};
			
			let pages = getCurrentPages();
			
			let currPage = pages[pages.length - 1]; //当前页面
			this.select_id = currPage.data.selectId;
			console.log(this.selectId)
			
			if(currPage.data.totlemoney!=undefined){
				this.fapiaomoney=currPage.data.totlemoney
			}
			
			
			
			
		}
	}
</script>

<style>
	.fapiaoitem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 0;
		box-sizing: border;
		border-bottom: 1rpx solid #f5f5f5
	}

	.fapiaolist {
		width: 686rpx;
		margin: 20rpx auto 0;
		background: #fff;
		padding: 0 32rpx;
		box-sizing: border-box;
	}


	.qirow {
		width: 48rpx;
		height: 48rpx;
		font-size: 0;
		transform: rotate(90deg);
		margin-left: 16rpx;
	}

	.fright {
		display: flex;
		align-items: center;
	}

	.fleft {
		color: #0A0808;
		font-size: 30rpx;
	}

	.qdan {
		color: #7F8389;
		font-size: 28rpx;
	}

	.fatai {
		color: #7F8389;
		font-size: 28rpx;
		text-align: right;

	}

	.fapiao {
		color: #7F8389;
		font-size: 28rpx;
	}

	.xiaorow {
		width: 48rpx;
		height: 48rpx;
		font-size: 0;
	}

	.fajine {
		color: #7F8389;
		font-size: 28rpx;
	}

	.shouinfo {
		color: #0A0808;
		font-size: 32rpx;
		font-weight: bold;
		padding: 38rpx 0;
		box-sizing: border-box;

	}

	.surekai {
		width: 686rpx;
		height: 100rpx;
		background: rgba(243, 152, 0, 1);
		box-shadow: 0rpx 4rpx 18rpx rgba(0, 0, 0, 0.04);
		opacity: 1;
		border-radius: 10rpx;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 100rpx;
		margin: 34rpx auto;
	}
	.lei{
		position: relative;
		
	}
	.lei:before{
		display:block;
		content: "*";
		color:#E60000;
		font-size: 30rpx;
		position: absolute;
		top:0;
		left:-15rpx;
	}
</style>