<template>
	<view class="page-box">
		<!--抬头内容-->
		<view class="application-box">
			<view class="application-listIn">
				<view class="listIn-name">抬头类型<text>*</text></view>
				<view class="listIn-inputBox">
					<radio-group class="inputBox-radio" @change="radioChange">
						<label class="radio-txt" v-for="(item,index) in riseList" :key="index">
							<radio style="transform: scale(0.7)" :value="item.value" :checked="index === riseNum" />
							{{item.name}}
						</label>
					</radio-group>
				</view>
			</view>
			<view class="application-listIn">
				<view class="listIn-name">票种</view>
				<view class="listIn-inputBox">
					<view class="inputBox-text">数电票(普通发票)</view>
				</view>
			</view>
			<view class="application-listIn">
				<view class="listIn-name">发票抬头<text>*</text></view>
				<view class="listIn-inputBox">
					<input class="uni-input inputBox-inputStyle" placeholder="填写发票抬头" />
				</view>
			</view>
			<view class="application-listIn">
				<view class="listIn-name">公司税号<text>*</text></view>
				<view class="listIn-inputBox">
					<input class="uni-input inputBox-inputStyle" placeholder="填写纳税人识别码(必填)" />
				</view>
			</view>
			<view class="application-listIn">
				<view class="listIn-name">地址电话</view>
				<view class="listIn-inputBox">
					<input class="uni-input inputBox-inputStyle" placeholder="填写企业注册地址、电话" />
				</view>
			</view>
			<view class="application-listIn">
				<view class="listIn-name">开户行及账号</view>
				<view class="listIn-inputBox">
					<input class="uni-input inputBox-inputStyle" placeholder="填写开户行及账号" />
				</view>
			</view>
		</view>
		<!--接收方式-->
		<view class="application-box">
			<view class="application-label">
				<view class="label-name">接收方式</view>
			</view>
			<view class="application-listIn">
				<view class="listIn-name">电子邮箱<text>*</text></view>
				<view class="listIn-inputBox">
					<input class="uni-input inputBox-inputStyle" placeholder="填写邮箱地址" />
				</view>
			</view>
		</view>
		<!--备注说明-->
		<view class="application-box">
			<view class="application-label">
				<view class="label-name">备注说明</view>
			</view>
			<view class="application-textarea">
				<u--textarea v-model="textareaModel" placeholder="该内容会打印在发票上" height="100rpx" maxlength="80" count border="none"></u--textarea>
			</view>
		</view>
		<!--发票金额-->
		<view class="application-box">
			<view class="application-label">
				<view class="label-name">发票金额</view>
				<view class="label-money">
					<text>¥</text>
					30.00
				</view>
			</view>
			<view class="application-listOrder">
				<view class="listOrder-title">
					<view class="title-name">长江索道 (索道南站单程)</view>
					<view class="title-money">¥20.00</view>
				</view>
				<view class="listOrder-message">
					<view class="message-timer">游玩时间: 2025-02-20</view>
					<view class="message-buyNum">购买数量: 1张</view>
				</view>
			</view>
			<view class="application-listOrder">
				<view class="listOrder-title">
					<view class="title-name">长江索道 (索道南站单程)</view>
					<view class="title-money">¥20.00</view>
				</view>
				<view class="listOrder-message">
					<view class="message-timer">游玩时间: 2025-02-20</view>
					<view class="message-buyNum">购买数量: 1张</view>
				</view>
			</view>
		</view>
		<!--底部提交按钮-->
		<view class="application-btnCase">
			<view class="btnCase-btn">提交电子发票</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      riseList: [
        {
          value: '0',
          name: '个人',
        },
        {
          value: '1',
          name: '企业'
        },
      ],
      riseNum: 0,//头部选择类型
      textareaModel:'',//多行输入框
    }
  },
  onLoad(option) {
			
  },
  methods: {
    radioChange(){//点击radio
      for (let i = 0; i < this.riseList.length; i++) {
        if (this.riseList[i].value === evt.detail.value) {
          this.riseNum = i
          break
        }
      }
    },
  }
}
</script>

<style scoped="scoped" lang="scss">
.page-box{
	background: #F7F8FA;
	min-height: 100vh;
	padding: 20rpx 0 148rpx 0;
}
.application-box{
	width: 750rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
}
.application-listIn{//填写内容
	display: flex;
	width: 100%;
	padding: 0 0 0 36rpx;
	border-bottom: solid 2rpx #F5F5F5;
	.listIn-name{
		width: 208rpx;
		height: 100rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 100rpx;
		text{
			color: #F53F3F;
		}
	}
	.listIn-inputBox{
		flex: 1;
		display: flex;
		.inputBox-text{
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 100rpx;
		}
		.inputBox-radio{
			display: flex;
			width: 100%;
			::v-deep .wx-radio-input.wx-radio-input-checked {
				background-color: #FE6600 !important;
				border-color: #FE6600 !important;
				color: #ffffff !important;
			}
			.radio-txt{
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 100rpx;
				margin-right: 80rpx;
			}
		}
		.inputBox-inputStyle{
			flex: 1;
			height: 100rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 100rpx;
		}
	}
}
.application-listIn:nth-last-child(1){
	border-bottom: none;
}
.application-label{//title样式
	display: flex;
	justify-content: space-between;
	height: 80rpx;
	padding: 20rpx 36rpx 0 36rpx;
	.label-name{
		font-weight: 600;
		font-size: 28rpx;
		color: #333333;
		line-height: 60rpx;
	}
	.label-money{
		font-weight: 600;
		font-size: 36rpx;
		color: #FE6600;
		line-height: 60rpx;
		text{
			font-size: 28rpx;
		}
	}
}
.application-textarea{//多行输入框
	width: 100%;
	position: relative;
	::v-deep .u-textarea{
		padding: 10rpx 36rpx !important;
	}
	::v-deep .u-textarea__field{
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #333333 !important;
	}
}
.application-listOrder{//订单列表
	padding: 24rpx 36rpx 26rpx 36rpx;
	border-bottom: solid 2rpx #F5F5F5;
	.listOrder-title{
		display: flex;
		justify-content: space-between;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		margin-bottom: 8rpx;
	}
	.listOrder-message{
		display: flex;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 34rpx;
		.message-timer{
			margin-right: 48rpx;
		}
	}
}
.application-listOrder:nth-last-child(1){
	border-bottom: none;
}
.application-btnCase{//按钮
	width: 750rpx;
	height: 128rpx;
	background: #FFFFFF;
	border-top: solid 1px #DCDFE6;
	padding: 20rpx 0 0 0;
	position: fixed;
	bottom: 0;
	left: 0;
	.btnCase-btn{
		width: 686rpx;
		height: 88rpx;
		background: #FE6600;
		border-radius: 44rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin: 0 auto;
	}
}
</style>
