<template>
	<BaseContainer class="apply-invoicing">
		<NavBar title="申请开票" />
		<view class="order-info info-box">
			<view class="info-item flex flex-center-x">
				<view class="item-label">订单编号</view>
				<view class="item-content">{{ orderNum }}</view>
			</view>
			<view class="info-item flex flex-center-x">
				<view class="item-label">开票金额</view>
				<view class="item-content money-content">￥<text>{{ money }}</text></view>
			</view>
		</view>
		<view class="invoicing-info info-box">
			<view class="info-item flex flex-center-x">
				<view class="item-label">抬头类型</view>
				<view class="item-content">
					<radio-group @change="changeRadioType">
						<label>
							<radio value="个人" :checked="invoicingInfo.type === '个人'" color="#F8473E"/><text>个人</text>
						</label>
						<label>
							<radio value="企业" :checked="invoicingInfo.type === '企业'"  color="#F8473E"/><text>企业</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="info-item flex flex-center-x">
				<view class="item-label">发票抬头</view>
				<view class="item-content">
					<input type="text" :value="invoicingInfo.invoiceHeader" placeholder="抬头名称" placeholder-class="input-placeholder" />
				</view>
			</view>
			<template v-if="invoicingInfo.type === '企业'">
				<view class="info-item flex flex-center-x">
					<view class="item-label">税号</view>
					<view class="item-content">
						<input type="text" :value="invoicingInfo.dutyParagraph" placeholder="纳税人识别号或社会统一征信代码" placeholder-class="input-placeholder" />
					</view>
				</view>
				<view class="info-item flex flex-center-x">
					<view class="item-label">地址</view>
					<view class="item-content">
						<input type="text" :value="invoicingInfo.address" placeholder="选填" placeholder-class="input-placeholder" />
					</view>
				</view>
				<view class="info-item flex flex-center-x">
					<view class="item-label">开户行</view>
					<view class="item-content">
						<input type="text" :value="invoicingInfo.bank" placeholder="选填" placeholder-class="input-placeholder" />
					</view>
				</view>
			</template>
		</view>
		<view class="footer">
			<view class="submit-btn btn" @click="submit">提交申请</view>
			<view class="cancel-btn btn" @click="cancel">不开发票</view>
		</view>
	</BaseContainer>
</template>

<script>
	export default {
		data() {
			return {
				orderNum: '',
				money: '',
				invoicingInfo: {
					type: '个人',
					invoiceHeader: '',
					dutyParagraph: '',
					address: '',
					bank: '',
				},
			};
		},
		onLoad(options) {
			console.log(options);
			this.orderNum = options.orderNum || '';
			this.money = options.money || 0;
		},
		methods: {
			changeRadioType(e) {
				console.log(e, this.invoicingInfo.type);
				this.invoicingInfo.type = e.detail.value;
			},
			submit() {
				
			},
			cancel() {
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.input-placeholder {
		color: #CFCFCF;
		font-size: 24rpx;
	}
	.apply-invoicing {
		background: #f5f5f5;
		.info-box {
			width: 690rpx;
			margin: 20rpx auto 0;
			background: #fff;
			border-radius: 10rpx;
			padding: 20rpx 40rpx;
			.info-item {
				height: 64rpx;
				line-height: 64rpx;
				color: #999999;
				font-size: 26rpx;
				.item-label {
					width: 130rpx;
					margin-right: 40rpx;
				}
				.item-content {
					flex: 1;
					color: #000;
					&.money-content {
						color: #F8473E;
						font-size: 22rpx;
						text {
							font-size: 32rpx;
						}
					}
					::v-deep {
						uni-radio-group,  {
							display: flex;
							align-items: center;
							justify-content: flex-end;
							.uni-radio-input {
								width: 34rpx;
								height: 34rpx;
							}
						}
						.uni-label-pointer {
							display: flex;
							align-items: center;
							margin-left: 63rpx;
						}
						input {
							text-align: right;
						}
					}
				}
			}
		}
		.footer {
			position: fixed;
			left: 30rpx;
			width: 690rpx;
			bottom: 173rpx;
			.btn {
				width: 100%;
				height: 80rpx;
				background: #E5E5E5;
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				color: #A2A2A2;
				font-size: 32rpx;
				&.submit-btn {
					background: #F8473E;
					color: #fff;
					margin-bottom: 40rpx;
				}
			}
		}
	}
</style>