<template>
	<view class="page-box">
		<!--开票信息-->
		<view class="application-box">
			<view class="application-label">
				<view class="label-name">开票信息</view>
			</view>
			<view class="application-listIn">
				<view class="listIn-name">开票状态</view>
				<view class="listIn-inputBox">
					<view v-if="arrForm.invoiceStatus==1" class="inputBox-text inputBox-textOrange">开票中</view>
					<view v-if="arrForm.invoiceStatus==2" class="inputBox-text inputBox-textGreen">已开票</view>
					<view v-if="arrForm.invoiceStatus==3" class="inputBox-text inputBox-textOrange">开票失败</view>
				</view>
			</view>
			<view class="application-listIn">
				<view class="listIn-name">发票抬头</view>
				<view class="listIn-inputBox">
					<view class="inputBox-text">{{arrForm.buyerName}}</view>
				</view>
			</view>
			<view class="application-listIn" v-if="arrForm.headType==1">
				<view class="listIn-name">税号</view>
				<view class="listIn-inputBox">
					<view class="inputBox-text">{{arrForm.taxNumber}}</view>
				</view>
			</view>
			<view class="application-listIn" v-if="arrForm.headType==1">
				<view class="listIn-name">地址</view>
				<view class="listIn-inputBox">
					<view class="inputBox-text">{{arrForm.buyerAddress}}</view>
				</view>
			</view>
			<view class="application-listIn" v-if="arrForm.headType==1">
				<view class="listIn-name">开户行及账号</view>
				<view class="listIn-inputBox">
					<view class="inputBox-text">{{arrForm.bankAccount}}</view>
				</view>
			</view>
			<view class="application-listIn">
				<view class="listIn-name">提交时间</view>
				<view class="listIn-inputBox">
					<view class="inputBox-text">{{arrForm.createTime}}</view>
				</view>
			</view>
			<view class="application-listIn">
				<view class="listIn-name">发票金额</view>
				<view class="listIn-inputBox">
					<view class="inputBox-text">¥<text>{{arrForm.invoicePrice}}</text></view>
				</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">电子邮箱</view>
				<view class="listIn-inputBox">
					<view class="inputBox-text">{{arrForm.emailAddress}}</view>
					<view class="inputBox-toEm" v-if="arrForm.invoiceStatus==2">已发送</view>
				</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">提供方</view>
				<view class="listIn-inputBox">
					<view class="inputBox-text">{{arrForm.merchantName}}</view>
				</view>
			</view>
		</view>
		<!--底部提交按钮-->
		<view class="application-btnCase" v-if="arrForm.invoiceStatus==2">
			<!-- <view class="btnCase-btn">催一催</view> -->
			<view class="btnCase-btnList">
				<view class="btnList-style" @click="downLoadImg(arrForm.pdfUrl)">发票下载</view>
				<!-- <view class="btnList-style btnList-styleOrange">申请重开发票</view> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      invoiceStatus:1,
      recordId:'',
      arrForm:{},
    }
  },
  onLoad(option) {
    this.recordId = option.recordId
    this.loadInvoiceInfoFun()
  },
  methods: {
    loadInvoiceInfoFun(){//详情加载
      var data = {
			  recordId:this.recordId
      }
      this.$request('wechatUser/invoice/loadInvoiceInfo',data).then((res)=>{
			  if(res.code=='00'){
			    this.arrForm = res.data
          this.arrForm.invoicePrice = Number(this.arrForm.invoicePrice).toFixed(2)
			  }else{
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      })
    },
    downLoadImg(imgUrl){
      // uni.setClipboardData({
      //     data: imgUrl, // e是你要保存的内容
      //     success: function () {
      // 		uni.showToast({
      // 			title:'复制成功,请到本地浏览器下载发票',
      // 			icon:'none'
      // 		})
      //     }
      // })
      uni.showLoading({
			  title: '下载中',
			  mask: true
      })
      let fileName = new Date().getTime()
      uni.downloadFile({ //下载文件资源到本地
			  url:imgUrl,
			  filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.pdf', //filePath指定文件下载后存储的路径，wx.env.USER_DATA_PATH,时间戳为文件名
			  success: res => { //下载到本地成功
			    if(res.statusCode==200){
			      let filePath = res.filePath
			      uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
						  filePath,
						  success: file => { //保存成功
			          uni.showToast({
			            title: '下载成功',
			            icon: 'success',
			            mask: true
			          })
						  },
						  fail: err => {
						    uni.hideLoading()
						    this.getPermissions(err)
						  }
			      })
			    }
			  },
			  fail: err => { //下载失败
			    uni.hideLoading()
			    uni.showToast({
			      title: '下载失败',
			      icon: 'none',
			      mask: true
			    })
			  }
      })
    },
  },
}
</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 36rpx 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{
			flex: 1;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 100rpx;
			text-align: right;
			text{
				font-size: 36rpx;
				font-weight: 600;
			}
		}
		.inputBox-textOrange{
			color: #FE6600;
		}
		.inputBox-textGreen{
			color: #00B42B;
		}
		.inputBox-toEm{
			font-weight: 400;
			font-size: 28rpx;
			color: #165DFF;
			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;
	}
}
.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: #FFFFFF;
		border-radius: 44rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		line-height: 84rpx;
		border: 2rpx solid rgba(0,0,0,0.15);
		text-align: center;
		margin: 0 auto;
	}
	.btnCase-btnList{
		display: flex;
		justify-content: space-between;
		padding:  0 24rpx;
		.btnList-style{
			//width: 340rpx;
			width: 100%;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 50rpx;
			border: 2rpx solid rgba(0,0,0,0.15);
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			line-height: 86rpx;
			text-align: center;
		}
		.btnList-styleOrange{
			background: #FE6600;
			border: 2rpx solid #FE6600;
			color: #FFFFFF;
		}
	}
}
</style>
