<template>
	<view>
		<view class="form-box">
			<picker mode="selector" @change="bindPickerBillType" :range="billType">
				<view class="main-between cross-center item">
					<view class="title_1">票据类型<text>*</text></view>
					<view class="main-right cross-center">
						<text :class="{'val':invoice_info.bill_type!=='','pla':invoice_info.bill_type===''}">{{invoice_info.bill_type!==''?invoice_info.bill_type:'请选择'}}</text>
						<image class="arrow-right"
							src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode="">
						</image>
					</view>
				</view>
			</picker>
		</view>
		<view class="form-box">
			<!-- <view class="title">楼盘信息</view> -->
			<picker mode="selector" @change="bindPickerHeaderType" :range="headerType">
				<view class="main-between cross-center item">
					<view class="title_1">抬头类型<text>*</text></view>
					<view class="main-right cross-center">
						<text :class="{'val':invoice_info.header_type!=='','pla':invoice_info.header_type===''}">{{invoice_info.header_type!==''?invoice_info.header_type:'请选择'}}</text>
						<image class="arrow-right"
							src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode="">
						</image>
					</view>
				</view>
			</picker>
			<view class="line"></view>
			<view class="main-between cross-center item">
				<view class="title_1">发票抬头<text>*</text></view>
				<view class="main-right cross-center">
					<input type="text" v-model="invoice_info.header_name" placeholder="企业名称" style="text-align: right;font-size: 28rpx;"
						placeholder-style="font-size: 28rpx;font-weight: 300;color: #999999;" />
				</view>
			</view>
			<view class="line"></view>
			<view class="main-between cross-center item">
				<view class="title_1">税号</view>
				<view class="main-right cross-center">
					<input type="text" v-model="invoice_info.duty_number" placeholder="抬头为企业单位时填写" style="text-align: right;font-size: 28rpx;"
						placeholder-style="font-size: 28rpx;font-weight: 300;color: #999999;" />
				</view>
			</view>
			<view class="line"></view>
			<view class="main-between cross-center item">
				<view class="title_1">单位地址</view>
				<view class="main-right cross-center">
					<input type="text" v-model="invoice_info.company_address" placeholder="请输入" style="text-align: right;font-size: 28rpx;"
						placeholder-style="font-size: 28rpx;font-weight: 300;color: #999999;" />
				</view>
			</view>
		</view>
		<view class="form-box">
			<view class="main-between cross-center item">
				<view class="title_1">电话号码</view>
				<view class="main-right cross-center">
					<input type="number" v-model="invoice_info.phone" placeholder="请输入" style="text-align: right;font-size: 28rpx;" maxlength="11"
						placeholder-style="font-size: 28rpx;font-weight: 300;color: #999999;" />
				</view>
			</view>
			<view class="line"></view>
			<view class="main-between cross-center item">
				<view class="title_1">开户银行</view>
				<view class="main-right cross-center">
					<input type="text" v-model="invoice_info.bank_name" placeholder="请输入" style="text-align: right;font-size: 28rpx;"
						placeholder-style="font-size: 28rpx;font-weight: 300;color: #999999;" />
				</view>
			</view>
			<view class="line"></view>
			<view class="main-between cross-center item">
				<view class="title_1">银行账户</view>
				<view class="main-right cross-center">
					<input type="text" v-model="invoice_info.bank_account" placeholder="请输入" style="text-align: right;font-size: 28rpx;"
						placeholder-style="font-size: 28rpx;font-weight: 300;color: #999999;" />
				</view>
			</view>
			<view class="line"></view>
			<view class="main-between cross-center item">
				<view class="title_1">开票金额<text>*</text></view>
				<view class="main-right cross-center">
					<input type="digit" v-model="invoice_info.amount" placeholder="请输入" style="text-align: right;font-size: 28rpx;" disabled
						placeholder-style="font-size: 28rpx;font-weight: 300;color: #999999;" />
				</view>
			</view>

		</view>
		<button type="default" :class="{'add':true, 'allow-add':isAllowSub, 'not-add':!isAllowSub}"  @click="submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				billType:['发票(普通)'],
				headerType:['个人/非企事业单位'],

				invoice_info: {
					bill_type: "",
					header_type: "",
					header_name: "",
					duty_number: "",
					company_address: "",
					phone: "",
					bank_name: "",
					bank_account: "",
					amount: '',
					delivery_address: "",
					user_address_id: ''
				},
				isAllowSub:false
			};
		},
		watch:{
			invoice_info:{
				handler:function(nVal,oVal){
					if(nVal.bill_type && nVal.header_type && nVal.header_name &&nVal.amount){
						this.isAllowSub=true
					}else{
						this.isAllowSub=false
					}
				},
				deep:true
			}
		},
		onLoad(option) {
			let storageInvoiceInfo=this.$storage.getStorageSync('invoice_info')
			if(storageInvoiceInfo){
				this.invoice_info=storageInvoiceInfo
			}
			this.invoice_info.amount=option.amount;
		},
		methods: {
			submit(){
				if(this.isAllowSub){
					this.$storage.setStorageSync('invoice_info', this.invoice_info);
					uni.navigateBack()
				}else{
					uni.showToast({
						title:'请填写完整信息',
						icon:'none'
					})
				}	
			},
			bindPickerBillType(e) {
				this.invoice_info.bill_type = this.billType[e.target.value]
			},
			bindPickerHeaderType(e) {
				this.invoice_info.header_type = this.headerType[e.target.value]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #F8F8F8;
		padding-top: 21rpx;
	}

	.lp {
		width: 678rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		padding: 0 43rpx 0 34rpx;
		margin: 0 auto;

		.name {
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
		}

		image {
			width: 18rpx;
			height: 11rpx;
		}
	}

	.form-box {
		width: 678rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 6rpx;
		margin: 21rpx auto;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
			border-bottom: 1rpx solid #E4E2E2;
			height: 99rpx;
			padding-left: 34rpx;
			line-height: 99rpx;
		}

		.item {
			height: 89rpx;
			padding: 0 32rpx 0 30rpx;
		}

		.title_1 {
			font-size: 28rpx;
			font-weight: bold;
			color: #000000;

			text {
				color: #FD1616;
			}
		}

		.pla {
			font-size: 28rpx;
			font-weight: 300;
			color: #999999;
			margin-right: 20rpx;
		}

		.val {
			font-size: 28rpx;
			font-weight: 500;
			color: #232323;
			margin-right: 20rpx;
		}
	}

	.add {
		width: 678rpx;
		height: 90rpx;
		border-radius: 6rpx;
		margin: 0 auto;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.allow-add {
		background: #A18353;
	}

	.not-add {
		background-color: #bab994;
	}

	.line {
		width: 618rpx;
		height: 1rpx;
		background-color: #EAEAEA;
		margin: 0 auto;
	}

	.arrow-right {
		width: 12.8rpx;
		height: 22.8rpx;
	}
</style>
