<template>
	<uv-navbar
	  :fixed="false"
	  title="开票信息管理"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<view class="container">
		<view class="invoice-form">
			<!-- 发票类型选择 -->
			<view class="invoice-type">
				<text class="label">发票类型</text>
				<view class="radio-group">
					<view class="radio-item" @click="invoiceType = 'company'">
						<radio :checked="invoiceType === 'company'" color="#52ac41" />
						<text>企业单位</text>
					</view>
					<view class="radio-item" @click="invoiceType = 'personal'">
						<radio :checked="invoiceType === 'personal'" color="#52ac41" />
						<text>个人/非企业单位</text>
					</view>
				</view>
			</view>

			<!-- 企业单位表单 -->
			<block v-if="invoiceType === 'company'">
				<view class="form-item">
					<text class="label">发票抬头</text>
					<input 
						type="text" 
						placeholder="请输入发票抬头(必填)" 
						placeholderClass="placeholder"
						class="input-field"
						v-model="companyForm.title"
					/>
				</view>
				
				<view class="form-item">
					<text class="label">税号</text>
					<input 
						type="text" 
						placeholder="请写纳税人识别号(必填)" 
						placeholderClass="placeholder"
						class="input-field"
						v-model="companyForm.taxNumber"
					/>
				</view>
				
				<view class="form-item">
					<text class="label">单位地址</text>
					<input 
						type="text" 
						placeholder="公司地址(选填)" 
						placeholderClass="placeholder"
						class="input-field"
						v-model="companyForm.address"
					/>
				</view>
				
				<view class="form-item">
					<text class="label">电话号码</text>
					<input 
						type="text" 
						placeholder="公司电话(选填)" 
						placeholderClass="placeholder"
						class="input-field"
						v-model="companyForm.phone"
					/>
				</view>
				
				<view class="form-item">
					<text class="label">开户银行</text>
					<input 
						type="text" 
						placeholder="开户银行(选填)" 
						placeholderClass="placeholder"
						class="input-field"
						v-model="companyForm.bank"
					/>
				</view>
				
				<view class="form-item">
					<text class="label">银行账户</text>
					<input 
						type="text" 
						placeholder="银行账户(选填)" 
						placeholderClass="placeholder"
						class="input-field"
						v-model="companyForm.bankAccount"
					/>
				</view>
			</block>

			<!-- 个人/非企业单位表单 -->
			<block v-else>
				<view class="section-title">接收方式</view>
				
				<view class="form-item">
					<text class="label">邮箱地址<text class="required">*</text></text>
					<input 
						type="text" 
						placeholder="请输入接收邮箱地址(必填)" 
						placeholderClass="placeholder"
						class="input-field"
						v-model="personalForm.email"
					/>
				</view>
				
				<view class="form-item">
					<text class="label">手机号<text class="required">*</text></text>
					<input 
						type="text" 
						placeholder="填写手机号(必填)" 
						placeholderClass="placeholder"
						class="input-field"
						v-model="personalForm.mobile"
					/>
				</view>
			</block>

			<!-- 提交按钮 -->
			<view class="submit-btn-wrapper">
				<button class="submit-btn" @tap="submitInvoice">提交</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 发票类型（company: 企业单位, personal: 个人/非企业单位）
const invoiceType = ref('company')

// 企业单位表单数据
const companyForm = reactive({
	title: '',
	taxNumber: '',
	address: '',
	phone: '',
	bank: '',
	bankAccount: ''
})

// 个人/非企业单位表单数据
const personalForm = reactive({
	email: '',
	mobile: ''
})

// 提交发票信息
const submitInvoice = () => {
	if (invoiceType.value === 'company') {
		// 验证企业表单
		if (!companyForm.title) {
			uni.showToast({
				title: '请输入发票抬头',
				icon: 'none'
			})
			return
		}
		if (!companyForm.taxNumber) {
			uni.showToast({
				title: '请输入纳税人识别号',
				icon: 'none'
			})
			return
		}
		
		// 提交企业发票信息
		console.log('提交企业发票信息', companyForm)
		uni.showToast({
			title: '提交成功',
			icon: 'success'
		})
	} else {
		// 验证个人表单
		if (!personalForm.email) {
			uni.showToast({
				title: '请输入接收邮箱地址',
				icon: 'none'
			})
			return
		}
		if (!personalForm.mobile) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
			return
		}
		
		// 提交个人发票信息
		console.log('提交个人发票信息', personalForm)
		uni.showToast({
			title: '提交成功',
			icon: 'success'
		})
	}
}

// 页面加载时获取发票信息（如果有）
onLoad(() => {
	// 这里可以添加获取之前保存的发票信息的逻辑
})
</script>

<style lang="scss" scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding: 0;
}

.invoice-form {
	background-color: #ffffff;
	padding: 0 30rpx;
}

.invoice-type {
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.label {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 20rpx;
	display: inline-block;
}

.radio-group {
	display: flex;
	align-items: center;
	margin-top: 20rpx;
}

.radio-item {
	display: flex;
	align-items: center;
	margin-right: 60rpx;
}

.radio-item text {
	font-size: 28rpx;
	margin-left: 8rpx;
}

.form-item {
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.input-field {
	height: 60rpx;
	font-size: 28rpx;
	margin-top: 10rpx;
	width: 100%;
}

.placeholder {
	color: #cccccc;
	font-size: 28rpx;
}

.section-title {
	font-size: 30rpx;
	color: #333;
	padding: 30rpx 0;
	background-color: #f5f5f5;
	padding-left: 20rpx;
	margin: 0 -30rpx;
}

.required {
	color: #ff4d4f;
	margin-left: 5rpx;
}

.submit-btn-wrapper {
	padding: 50rpx 30rpx;
	box-sizing: border-box;
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	background-color: #52ac41;
	border-radius: 44rpx;
	color: white;
	font-size: 32rpx;
	border: none;
}
</style>
