<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 === uploadMes.headType" />
							{{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" v-model="uploadMes.buyerName" placeholder="填写发票抬头" />
				</view>
			</view>
			<view class="application-listIn" v-if="uploadMes.headType==1">
				<view class="listIn-name">公司税号<text>*</text></view>
				<view class="listIn-inputBox">
					<input class="uni-input inputBox-inputStyle" v-model="uploadMes.taxNumber" placeholder="填写纳税人识别码(必填)" />
				</view>
			</view>
			<view class="application-listIn" v-if="uploadMes.headType==1">
				<view class="listIn-name">地址电话</view>
				<view class="listIn-inputBox">
					<input class="uni-input inputBox-inputStyle" v-model="uploadMes.buyerAddress" placeholder="填写企业注册地址、电话" />
				</view>
			</view>
			<view class="application-listIn" v-if="uploadMes.headType==1">
				<view class="listIn-name">开户行及账号</view>
				<view class="listIn-inputBox">
					<input class="uni-input inputBox-inputStyle" v-model="uploadMes.bankAccount" 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" v-model="uploadMes.emailAddress" 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="uploadMes.note" 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>
					{{checkOrderMoney}}
				</view>
			</view>
			<view class="application-listOrder" v-for="(item,index) in uploadMes.orderVoList" :key="index">
				<view class="listOrder-title">
					<view class="title-name">{{item.merchantName}}({{item.productName}})</view>
					<view class="title-money">¥{{item.orderMoney.toFixed(2)}}</view>
				</view>
				<view class="listOrder-message">
					<view class="message-timer">游玩时间: {{item.playDate}}</view>
					<view class="message-buyNum">购买数量: {{item.orderNum}}张</view>
				</view>
			</view>
		</view>
		<!--底部提交按钮-->
		<view class="application-btnCase">
			<view class="btnCase-btn" @click="uploadIssueInvoice()">提交电子发票</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      riseList: [
        {
          value: '0',
          name: '个人',
        },
        {
          value: '1',
          name: '企业'
        },
      ],
      //正式数据
      uploadMes:{
        companyId:'',
        merchantId:'',
        merchantName:'',
        openid:'',
        phone:'',
        headType:'',//抬头类型0个人1企业
        taxNumber:'',//税号
        buyerName:'',//购买方名称
        buyerAddress:'',//购买方地址
        invoiceType:'81',//发票类型81 专票82普票
        invoicePrice:'',//开票金额 总金额
        emailAddress:'',//邮箱地址
        note:'',//备注
        bankAccount:'',//银行账号
        orderVoList:[],
      },
      checkOrderMoney:0,//总价
    }
  },
  onLoad(option) {
    this.uploadMes.merchantId = option.merchantId
    this.uploadMes.companyId = option.companyId
    this.uploadMes.orderVoList = JSON.parse(option.checkMessage)	
    this.uploadMes.openid = uni.getStorageSync('openid')
    this.uploadMes.phone = this.uploadMes.orderVoList[0].ticketPhone
    this.uploadMes.merchantName = this.uploadMes.orderVoList[0].merchantName
    this.checkOrderMoney = 0
    this.uploadMes.orderVoList.forEach(item=>{
      item.createDate = item.orderTime//订单创建日期
      item.openid = this.uploadMes.openid
      item.orderId = item.id//订单id
      item.phone = item.ticketPhone//ticketPhone 联系电话
      item.buyNumber = item.orderNum//购买数量
      this.checkOrderMoney+=item.orderMoney
    })
    this.checkOrderMoney = this.checkOrderMoney.toFixed(2)
    this.loadInvoiceHeadFun()//抬头查询
  },
  methods: {
    radioChange(evt){//点击radio
      for (let i = 0; i < this.riseList.length; i++) {
        if (this.riseList[i].value === evt.detail.value) {
          this.uploadMes.headType = i
          break
        }
      }
    },
    uploadIssueInvoice(){//申请开发票
      if(this.uploadMes.buyerName==''){
			  uni.showToast({
				  title: '发票抬头不可为空',
				  icon: 'none'
			  })
        return false
      }
      if(this.uploadMes.headType==1&&this.uploadMes.taxNumber==''){
			  uni.showToast({
				  title: '公司税号不可为空',
				  icon: 'none'
			  })
        return false
      }
      if(this.uploadMes.emailAddress==''){
			  uni.showToast({
				  title: '电子邮箱不可为空',
				  icon: 'none'
			  })
        return false
      }
      this.$request('wechatUser/invoice/issueInvoice',this.uploadMes).then((res)=>{
			  if(res.code=='00'){
			    uni.navigateTo({
			      url: '/pages/my/electronicInvoice/submitSuccessfully/submitSuccessfully?merchantId='+this.uploadMes.merchantId+'&companyId='+this.uploadMes.companyId+'&search='+this.uploadMes.phone
			    })
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    loadInvoiceHeadFun(){
      var data={
        companyId:this.uploadMes.companyId,
        merchantId:this.uploadMes.merchantId,
        phone:this.uploadMes.phone,
        openid:this.uploadMes.openid,
      }
      this.$request('wechatUser/invoice/loadInvoiceHead',data).then((res)=>{
			  if(res.code=='00'){
          var messageData = res.data
			    this.uploadMes.headType = messageData.headType||''
          this.uploadMes.buyerName = messageData.buyerName||''
          this.uploadMes.emailAddress = messageData.emailAddress||''
          if(messageData.headType==1){
            this.uploadMes.taxNumber = messageData.taxNumber||''
            this.uploadMes.buyerAddress = messageData.buyerAddress||''
            this.uploadMes.bankAccount = messageData.bankAccount||''
          }
			  }else{
          if(res.code=='04'){
            console.log('无历史抬头')
          }else{
            uni.showToast({
						  title: res.message,
						  icon: 'none'
            })
          } 
			  }
      })
    },
  }
}
</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>
