<template>
	<view class="page-container">
		<swiper indicator-dots style="height: 120rpx;" autoplay indicator-active-color="#fff">
			<swiper-item>
				<image :src="imgAssets+'/banner_1.png'" style="width: 100vw;height: 120rpx;"></image>
			</swiper-item>
			<swiper-item>
				<image :src="imgAssets+'/banner_2.png'" style="width: 100vw;height: 120rpx;"></image>
			</swiper-item>
		</swiper>
		<view class="invoice-info-title mt-40" v-if="detailBean != null">
			<view>开票信息</view>
			<view :class="['record-title-status',invoiceStatusColor(detailBean.invoiceStatus)]">
				{{invoiceStatus(detailBean.invoiceStatus)}}
			</view>
		</view>
		<view class="invoice-info-box mt-20" v-if="detailBean != null">
			<view class="invoice-info-item">
				<view class="invoice-info-item-title gray-star">公司名称</view>
				<view class="invoice-info-item-content">
					{{detailBean.invoiceName}}
				</view>
			</view>
			<view class="invoice-info-item">
				<view class="invoice-info-item-title gray-star">纳税人识别号</view>
				<view class="invoice-info-item-content">
					{{detailBean.invoiceNumber}}
				</view>
			</view>
			<view class="invoice-info-item">
				<view class="invoice-info-item-title gray-star">公司地址</view>
				<view class="invoice-info-item-content">
					{{detailBean.invoiceOrgaddress}}
				</view>
			</view>
			<view class="invoice-info-item">
				<view class="invoice-info-item-title gray-star">联系电话</view>
				<view class="invoice-info-item-content">
					{{detailBean.invoiceOrgtel}}
				</view>
			</view>
			<view class="invoice-info-item">
				<view class="invoice-info-item-title gray-star">开户行</view>
				<view class="invoice-info-item-content">
					{{detailBean.invoiceBank}}
				</view>
			</view>
			<view class="invoice-info-item">
				<view class="invoice-info-item-title gray-star">开户行账号</view>
				<view class="invoice-info-item-content">
					{{detailBean.invoiceBanknumber}}
				</view>
			</view>
			<view class="invoice-info-item">
				<view class="invoice-info-item-title gray-star">开票内容</view>
				<view class="invoice-info-item-content">
					{{detailBean.invoicePurpose}}
				</view>
			</view>
			<view class="invoice-info-item">
				<view class="invoice-info-item-title gray-star">开票税率</view>
				<view class="invoice-info-item-content">
					{{detailBean.invoiceTaxrate}}
				</view>
			</view>
			<view class="invoice-info-item">
				<view class="invoice-info-item-title gray-star">发票类型</view>
				<view class="invoice-info-item-content">
					{{detailBean.invoiceClassify}}
				</view>
			</view>
		</view>
		<view class="invoice-info-title mt-40">开票内容</view>
		<view class="invoice-info-box mt-20" v-if="detailBean != null">
			<view class="invoice-info-item">
				<view class="invoice-info-item-title gray-star">开票金额</view>
				<view class="invoice-info-item-content">
					<rich-text :nodes="moneyTxt(10,14,detailBean.invoiceRechargeMoney)"></rich-text>
				</view>
			</view>
			<view class="invoice-info-item-ver">
				<view class="invoice-info-item-title" style="align-self: flex-start;">开票备注</view>
				<view class="invoice-remark">{{detailBean.invoiceRecord}}</view>
			</view>
			<view class="invoice-info-item-ver" v-if="detailBean != null && detailBean.invoiceFile != ''">
				<view class="invoice-info-item-title" style="align-self: flex-start;">发票</view>
				<view class="invoice-img-box">
					<block v-for="(item,index) in detailBean.imgFileList" :key="index">
						<view class="invoice-img-item" @click="downloadInvoice" :data-value="item">
							<view class="icon-invoice invoice-img"></view>
							<view class="invoice-btn-hint">点击下载</view>
						</view>
					</block>
				</view>
			</view>
			<view v-if="detailBean != null && detailBean.invoiceStatus =='0'">
				<view class="invoice-info-item-title">失败原因</view>
				<text class="reason-red">
					{{detailBean.invoiceFinalRecord}}
				</text>
			</view>
		</view>
		<uni-popup type="message" ref="msg">
			<uni-popup-message :type="msgType" :message="msgHint" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		previewUrl,
		operatorPlug
	} from '@/common/js/net/mainUrl.js'
	import {
		invoiceStatusColor,
		invoiceStatus,
		moneyTxt
	} from '@/common/js/conver.js'
	import {
		inject
	} from 'vue';
	export default {
		setup() {
			const globalData = inject('globalData')
			return {
				globalData
			}
		},
		data() {
			return {
				imgAssets: this.globalData.imgAssetsUrl,
				imgPrefix: previewUrl,
				detailBean: null,
				msgType: 'info',
				msgHint: ''
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "详情",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#F0F0F0",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});
			const beanStr = options.bean
			let bean = JSON.parse(beanStr)
			if (bean != null && bean.invoiceFile != '') {
				bean = this.parseFile(bean)
			}
			this.detailBean = bean
		},
		methods: {
			invoiceStatusColor,
			invoiceStatus,
			moneyTxt,
			parseFile(bean) {
				const prefix = this.imgPrefix;
				const splits = bean.invoiceFile.split(',')
				bean.imgFileList = []
				splits.map(item => {
					const img = operatorPlug + prefix + item
					bean.imgFileList.push(img)
				})
				return bean
			},
			downloadInvoice(e) {
				const url = e.currentTarget.dataset.value
				const _self = this
				uni.showLoading({
					title: '下载中...'
				})
				uni.downloadFile({
					url: url,
					success: res => {
						console.log(res)
						uni.hideLoading()
						if (res.statusCode == 200) {
							_self.msgHint = '下载成功'
							_self.msgType = 'success'
							_self.$refs.msg.open()
							_self.openDoc(res)
						} else {
							_self.msgHint = '下载失败,请稍后重试'
							_self.msgType = 'error'
							_self.$refs.msg.open()
						}
					},
					fail: err => {
						uni.hideLoading()
						_self.msgHint = err.msg ? err.msg : '下载失败,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
					}
				})
			},
			openDoc(res) {
				//判断文件后缀
				const canOpen = this.canOpenFile(res.tempFilePath)
				if (canOpen) {
					uni.openDocument({
						filePath: res.tempFilePath,
						fail: err => {
							this.msgHint = '当前文件类型暂不支持手机查看，建议通过电脑端访问获取更好体验'
							this.msgType = 'error'
							this.$refs.msg.open()
						}
					})
				} else {
					this.msgHint = '当前文件类型暂不支持手机查看，建议通过电脑端访问获取更好体验'
					this.msgType = 'error'
					this.$refs.msg.open()
				}
			},
			getFileExtension(filename) {
				const ext = filename.substring(filename.lastIndexOf('.') + 1).toLowerCase();
				return ext;
			},
			canOpenFile(filename) {
				const ext = this.getFileExtension(filename);
				return ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'].includes(ext);
			}
		},
	};
</script>

<style lang="scss" scoped>
	.invoice-info-title {
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.record-title-status {
		font-size: 24rpx;
		line-height: 32rpx;
		height: 32rpx;
		text-align: center;
		padding: 5rpx 10rpx;
		font-weight: bold;
		min-width: 80rpx;
		border-radius: 5rpx;
		margin-right: 15rpx;
	}

	.col-yellow {
		background-color: $primary-color;
		color: $text-color;
	}

	.invoice-img-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 15rpx;
	}


	.invoice-img-item {
		margin: 5rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.invoice-img {
		width: 150rpx;
		height: 120rpx;
		background-size: 100% 100%;
	}


	.col-gray {
		background-color: $bg-gray-color;
		color: $text-brown-color;
	}

	.col-green {
		background-color: $bg-green-color;
		color: $text-brown-color;
	}

	.col-red {
		background-color: $bg-red-color;
		color: $text-brown-color;
	}


	.invoice-info-box {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		background-color: white;
		border-radius: 10rpx;
	}

	.invoice-info-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}


	.invoice-info-item:nth-of-type(n+2) {
		margin-top: 20rpx;
	}

	.invoice-info-item-title {
		font-size: 28rpx;
	}

	.invoice-info-item-content {
		font-size: 28rpx;
		padding-left: 20rpx;
		flex: 1;
		align-items: center;
		justify-content: flex-end;
		display: flex;
		flex-direction: row;
	}


	.invoice-remark {
		height: 120rpx;
		border: 1rpx solid $divider-color;
		align-self: center;
		border-radius: 10rpx;
		width: 95%;
		padding: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		background-color: $bg-gray-input-color;
		font-size: 28rpx;
	}

	.invoice-info-item-ver {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.icon-invoice {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyBoZWlnaHQ9IjQwMCIgbm9kZS1pZD0iMSIgc2lsbHl2Zz0idHJ1ZSIgdGVtcGxhdGUtaGVpZ2h0PSI0MDAiIHRlbXBsYXRlLXdpZHRoPSI0MDAiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQwMCA0MDAiIHdpZHRoPSI0MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzIG5vZGUtaWQ9IjI3Ij48L2RlZnM+PHBhdGggZD0iTSA4OS4yMCAxMjIuMjAgTCAzMTYuMjAgMTIyLjIwIEwgMzE2LjIwIDI3Mi4yMCBMIDg5LjIwIDI3Mi4yMCBaIiBmaWxsPSIjY2RkY2ZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iIG5vZGUtaWQ9IjI5IiBzdHJva2U9Im5vbmUiIHRhcmdldC1oZWlnaHQ9IjE1MC4wMDAwMiIgdGFyZ2V0LXdpZHRoPSIyMjcuMDAwMDIiIHRhcmdldC14PSI4OS4yIiB0YXJnZXQteT0iMTIyLjIiLz48cGF0aCBkPSJNIDgzLjgwIDExNi4yMCBMIDMxMC44MCAxMTYuMjAgTCAzMTAuODAgMjY2LjIwIEwgODMuODAgMjY2LjIwIFoiIGZpbGw9IiNmMWY0ZmYiIGZpbGwtcnVsZT0ibm9uemVybyIgbm9kZS1pZD0iMzEiIHN0cm9rZT0ibm9uZSIgdGFyZ2V0LWhlaWdodD0iMTUwLjAwMDAyIiB0YXJnZXQtd2lkdGg9IjIyNi45OTk5OCIgdGFyZ2V0LXg9IjgzLjgiIHRhcmdldC15PSIxMTYuMiIvPjxwYXRoIGQ9Ik0gMzExLjMwIDI2Ni43MCBMIDgzLjMwIDI2Ni43MCBMIDgzLjMwIDExNS43MCBMIDMxMS4zMCAxMTUuNzAgWiBNIDg0LjMwIDI2NS43MCBMIDMxMC4zMCAyNjUuNzAgTCAzMTAuMzAgMTE2LjcwIEwgODQuMzAgMTE2LjcwIFoiIGZpbGw9IiMzMDM4NGEiIGZpbGwtcnVsZT0ibm9uemVybyIgbm9kZS1pZD0iMzMiIHN0cm9rZT0ibm9uZSIgdGFyZ2V0LWhlaWdodD0iMTUxLjAwMDAyIiB0YXJnZXQtd2lkdGg9IjIyNy45OTk5OCIgdGFyZ2V0LXg9IjgzLjMiIHRhcmdldC15PSIxMTUuNyIvPjxwYXRoIGQ9Ik0gOTYuODAgMTQ2LjIwIEwgMjk2LjgwIDE0Ni4yMCBMIDI5Ni44MCAxNjAuMjAgTCA5Ni44MCAxNjAuMjAgWiIgZmlsbD0iIzMxMzg0OSIgZmlsbC1ydWxlPSJub256ZXJvIiBub2RlLWlkPSIzNSIgc3Ryb2tlPSJub25lIiB0YXJnZXQtaGVpZ2h0PSIxNCIgdGFyZ2V0LXdpZHRoPSIxOTkuOTk5OTgiIHRhcmdldC14PSI5Ni44IiB0YXJnZXQteT0iMTQ2LjIiLz48cGF0aCBkPSJNIDI5Ni4zMCAxNjAuNzAgTCAyOTYuMzAgMjIxLjcwIEwgOTcuMzAgMjIxLjcwIEwgOTcuMzAgMTYwLjcwIEwgMjk2LjMwIDE2MC43MCBNIDI5Ni44MCAxNjAuMjAgTCA5Ni44MCAxNjAuMjAgTCA5Ni44MCAyMjIuMjAgTCAyOTYuODAgMjIyLjIwIEwgMjk2LjgwIDE2MC4yMCBaIiBmaWxsPSIjYjdjOGZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iIG5vZGUtaWQ9IjM3IiBzdHJva2U9Im5vbmUiIHRhcmdldC1oZWlnaHQ9IjYyIiB0YXJnZXQtd2lkdGg9IjE5OS45OTk5OCIgdGFyZ2V0LXg9Ijk2LjgiIHRhcmdldC15PSIxNjAuMiIvPjxwYXRoIGQ9Ik0gMjk2LjMwIDE3Mi43MCBMIDI5Ni4zMCAyMzMuNzAgTCA5Ny4zMCAyMzMuNzAgTCA5Ny4zMCAxNzIuNzAgTCAyOTYuMzAgMTcyLjcwIE0gMjk2LjgwIDE3Mi4yMCBMIDk2LjgwIDE3Mi4yMCBMIDk2LjgwIDIzNC4yMCBMIDI5Ni44MCAyMzQuMjAgTCAyOTYuODAgMTcyLjIwIFoiIGZpbGw9IiNiN2M4ZmYiIGZpbGwtcnVsZT0ibm9uemVybyIgbm9kZS1pZD0iMzkiIHN0cm9rZT0ibm9uZSIgdGFyZ2V0LWhlaWdodD0iNjIiIHRhcmdldC13aWR0aD0iMTk5Ljk5OTk4IiB0YXJnZXQteD0iOTYuOCIgdGFyZ2V0LXk9IjE3Mi4yIi8+PHBhdGggZD0iTSAyOTYuMzAgMjM0LjMwIEwgMjk2LjMwIDI0Ny4zMCBMIDk3LjMwIDI0Ny4zMCBMIDk3LjMwIDIzNC4zMCBMIDI5Ni4zMCAyMzQuMzAgTSAyOTYuODAgMjMzLjgwIEwgOTYuODAgMjMzLjgwIEwgOTYuODAgMjQ3LjgwIEwgMjk2LjgwIDI0Ny44MCBMIDI5Ni44MCAyMzMuODAgWiIgZmlsbD0iI2I3YzhmZiIgZmlsbC1ydWxlPSJub256ZXJvIiBub2RlLWlkPSI0MSIgc3Ryb2tlPSJub25lIiB0YXJnZXQtaGVpZ2h0PSIxNCIgdGFyZ2V0LXdpZHRoPSIxOTkuOTk5OTgiIHRhcmdldC14PSI5Ni44IiB0YXJnZXQteT0iMjMzLjgiLz48cGF0aCBkPSJNIDE1NC40MCAxNzIuMjAgTCAxNTQuOTAgMTcyLjIwIEwgMTU0LjkwIDIyMi4yMCBMIDE1NC40MCAyMjIuMjAgWiIgZmlsbD0iI2I3YzhmZiIgZmlsbC1ydWxlPSJub256ZXJvIiBub2RlLWlkPSI0MyIgc3Ryb2tlPSJub25lIiB0YXJnZXQtaGVpZ2h0PSI1MCIgdGFyZ2V0LXdpZHRoPSIwLjUiIHRhcmdldC14PSIxNTQuNCIgdGFyZ2V0LXk9IjE3Mi4yIi8+PHBhdGggZD0iTSAyMzIuNzAgMTcyLjIwIEwgMjMzLjIwIDE3Mi4yMCBMIDIzMy4yMCAyMjIuMjAgTCAyMzIuNzAgMjIyLjIwIFoiIGZpbGw9IiNiN2M4ZmYiIGZpbGwtcnVsZT0ibm9uemVybyIgbm9kZS1pZD0iNDUiIHN0cm9rZT0ibm9uZSIgdGFyZ2V0LWhlaWdodD0iNTAiIHRhcmdldC13aWR0aD0iMC41IiB0YXJnZXQteD0iMjMyLjciIHRhcmdldC15PSIxNzIuMiIvPjxwYXRoIGQ9Ik0gMjY3LjgwIDI1NS43MCBMIDI2My44MCAyNTUuNTAgTCAyNTkuOTAgMjU0LjkwIEwgMjU2LjMwIDI1NC4wMCBMIDI0OS44MCAyNTEuMDAgTCAyNDcuMDAgMjQ5LjEwIEwgMjQ0LjQwIDI0Ni45MCBMIDI0Mi4zMCAyNDQuNjAgTCAyNDAuNjAgMjQyLjAwIEwgMjM5LjQwIDIzOS4yMCBMIDIzOC42MCAyMzYuMzAgTCAyMzguMzAgMjMzLjIwIEwgMjM4LjYwIDIzMC4yMCBMIDIzOS40MCAyMjcuMzAgTCAyNDAuNjAgMjI0LjUwIEwgMjQyLjMwIDIyMS45MCBMIDI0NC40MCAyMTkuNTAgTCAyNDcuMDAgMjE3LjMwIEwgMjUyLjkwIDIxMy44MCBMIDI1OS45MCAyMTEuNTAgTCAyNjMuODAgMjEwLjkwIEwgMjY3LjgwIDIxMC43MCBMIDI3MS45MCAyMTAuOTAgTCAyNzUuNzAgMjExLjUwIEwgMjc5LjMwIDIxMi41MCBMIDI4NS45MCAyMTUuNDAgTCAyODguNzAgMjE3LjMwIEwgMjkxLjIwIDIxOS41MCBMIDI5My4zMCAyMjEuOTAgTCAyOTUuMDAgMjI0LjUwIEwgMjk2LjMwIDIyNy4zMCBMIDI5Ny4wMCAyMzAuMjAgTCAyOTcuMzAgMjMzLjIwIEwgMjk3LjAwIDIzNi4zMCBMIDI5Ni4zMCAyMzkuMjAgTCAyOTUuMDAgMjQyLjAwIEwgMjkzLjMwIDI0NC42MCBMIDI5MS4yMCAyNDYuOTAgTCAyODguNzAgMjQ5LjEwIEwgMjg1LjkwIDI1MS4wMCBMIDI3OS4zMCAyNTQuMDAgTCAyNzUuNzAgMjU0LjkwIEwgMjcxLjkwIDI1NS41MCBMIDI2Ny44MCAyNTUuNzAgWiBNIDI2Ny44MCAyMTEuNzAgTCAyNjAuMjAgMjEyLjUwIEwgMjU2LjcwIDIxMy40MCBMIDI1MC40MCAyMTYuMjAgTCAyNDUuMjAgMjIwLjEwIEwgMjQzLjIwIDIyMi40MCBMIDI0MS42MCAyMjQuOTAgTCAyNDAuMzAgMjI3LjUwIEwgMjM5LjYwIDIzMC4zMCBMIDIzOS4zMCAyMzMuMjAgTCAyMzkuNjAgMjM2LjIwIEwgMjQwLjMwIDIzOC45MCBMIDI0MS42MCAyNDEuNjAgTCAyNDMuMjAgMjQ0LjAwIEwgMjQ1LjIwIDI0Ni4zMCBMIDI0Ny43MCAyNDguNDAgTCAyNTMuNDAgMjUxLjgwIEwgMjYwLjIwIDI1NC4wMCBMIDI2My45MCAyNTQuNTAgTCAyNjcuODAgMjU0LjcwIEwgMjc1LjQwIDI1NC4wMCBMIDI3OC45MCAyNTMuMDAgTCAyODUuMzAgMjUwLjIwIEwgMjkwLjQwIDI0Ni4zMCBMIDI5Mi40MCAyNDQuMDAgTCAyOTQuMTAgMjQxLjYwIEwgMjk1LjMwIDIzOC45MCBMIDI5Ni4xMCAyMzYuMjAgTCAyOTYuMzAgMjMzLjIwIEwgMjk2LjEwIDIzMC4zMCBMIDI5NS4zMCAyMjcuNTAgTCAyOTQuMTAgMjI0LjkwIEwgMjkyLjQwIDIyMi40MCBMIDI5MC40MCAyMjAuMTAgTCAyODUuMzAgMjE2LjIwIEwgMjc4LjkwIDIxMy40MCBMIDI3MS43MCAyMTEuOTAgTCAyNjcuODAgMjExLjcwIFoiIGZpbGw9IiNlYjUwNjgiIGZpbGwtcnVsZT0ibm9uemVybyIgbm9kZS1pZD0iNDciIHN0cm9rZT0ibm9uZSIgdGFyZ2V0LWhlaWdodD0iNDUiIHRhcmdldC13aWR0aD0iNTguOTk5OTg1IiB0YXJnZXQteD0iMjM4LjMiIHRhcmdldC15PSIyMTAuNyIvPjxwYXRoIGQ9Ik0gMjUxLjIwIDIyOS42MCBMIDI1Mi42MCAyMzEuODAgTCAyNTQuMDAgMjI5LjUwIEwgMjU1LjIwIDIyOS41MCBMIDI1My4yMCAyMzIuMzAgTCAyNTUuMjAgMjM1LjMwIEwgMjU0LjAwIDIzNS4zMCBMIDI1Mi41MCAyMzMuMDAgTCAyNTEuMDAgMjM1LjMwIEwgMjQ5LjkwIDIzNS4zMCBMIDI1MS45MCAyMzIuMzAgTCAyNDkuOTAgMjI5LjUwIFoiIGZpbGw9IiNlYjUwNjgiIGZpbGwtcnVsZT0ibm9uemVybyIgbm9kZS1pZD0iNDkiIHN0cm9rZT0ibm9uZSIgdGFyZ2V0LWhlaWdodD0iNS44MDAwMDMiIHRhcmdldC13aWR0aD0iNS4zMDAwMDMiIHRhcmdldC14PSIyNDkuOSIgdGFyZ2V0LXk9IjIyOS41Ii8+PHBhdGggZD0iTSAyNTkuMzAgMjI5LjYwIEwgMjYwLjcwIDIzMS44MCBMIDI2Mi4xMCAyMjkuNTAgTCAyNjMuMzAgMjI5LjUwIEwgMjYxLjMwIDIzMi4zMCBMIDI2My4zMCAyMzUuMzAgTCAyNjIuMTAgMjM1LjMwIEwgMjYwLjYwIDIzMy4wMCBMIDI1OS4xMCAyMzUuMzAgTCAyNTguMDAgMjM1LjMwIEwgMjYwLjEwIDIzMi4zMCBMIDI1OC4xMCAyMjkuNTAgWiIgZmlsbD0iI2ViNTA2OCIgZmlsbC1ydWxlPSJub256ZXJvIiBub2RlLWlkPSI1MSIgc3Ryb2tlPSJub25lIiB0YXJnZXQtaGVpZ2h0PSI1LjgwMDAwMyIgdGFyZ2V0LXdpZHRoPSI1LjI5OTk4OCIgdGFyZ2V0LXg9IjI1OCIgdGFyZ2V0LXk9IjIyOS41Ii8+PHBhdGggZD0iTSAyNjcuNDAgMjI5LjYwIEwgMjY4LjgwIDIzMS44MCBMIDI3MC4yMCAyMjkuNTAgTCAyNzEuNDAgMjI5LjUwIEwgMjY5LjQwIDIzMi4zMCBMIDI3MS40MCAyMzUuMzAgTCAyNzAuMjAgMjM1LjMwIEwgMjY4LjcwIDIzMy4wMCBMIDI2Ny4yMCAyMzUuMzAgTCAyNjYuMTAgMjM1LjMwIEwgMjY4LjEwIDIzMi4zMCBMIDI2Ni4xMCAyMjkuNTAgWiIgZmlsbD0iI2ViNTA2OCIgZmlsbC1ydWxlPSJub256ZXJvIiBub2RlLWlkPSI1MyIgc3Ryb2tlPSJub25lIiB0YXJnZXQtaGVpZ2h0PSI1LjgwMDAwMyIgdGFyZ2V0LXdpZHRoPSI1LjI5OTk4OCIgdGFyZ2V0LXg9IjI2Ni4xIiB0YXJnZXQteT0iMjI5LjUiLz48cGF0aCBkPSJNIDI3NS41MCAyMjkuNjAgTCAyNzYuOTAgMjMxLjgwIEwgMjc4LjMwIDIyOS41MCBMIDI3OS41MCAyMjkuNTAgTCAyNzcuNTAgMjMyLjMwIEwgMjc5LjUwIDIzNS4zMCBMIDI3OC4zMCAyMzUuMzAgTCAyNzYuODAgMjMzLjAwIEwgMjc1LjMwIDIzNS4zMCBMIDI3NC4yMCAyMzUuMzAgTCAyNzYuMjAgMjMyLjMwIEwgMjc0LjIwIDIyOS41MCBaIiBmaWxsPSIjZWI1MDY4IiBmaWxsLXJ1bGU9Im5vbnplcm8iIG5vZGUtaWQ9IjU1IiBzdHJva2U9Im5vbmUiIHRhcmdldC1oZWlnaHQ9IjUuODAwMDAzIiB0YXJnZXQtd2lkdGg9IjUuMjk5OTg4IiB0YXJnZXQteD0iMjc0LjIiIHRhcmdldC15PSIyMjkuNSIvPjxwYXRoIGQ9Ik0gMjgzLjYwIDIyOS42MCBMIDI4NS4wMCAyMzEuODAgTCAyODYuNDAgMjI5LjUwIEwgMjg3LjYwIDIyOS41MCBMIDI4NS42MCAyMzIuMzAgTCAyODcuNjAgMjM1LjMwIEwgMjg2LjQwIDIzNS4zMCBMIDI4NC45MCAyMzMuMDAgTCAyODMuNDAgMjM1LjMwIEwgMjgyLjMwIDIzNS4zMCBMIDI4NC4zMCAyMzIuMzAgTCAyODIuMzAgMjI5LjUwIFoiIGZpbGw9IiNlYjUwNjgiIGZpbGwtcnVsZT0ibm9uemVybyIgbm9kZS1pZD0iNTciIHN0cm9rZT0ibm9uZSIgdGFyZ2V0LWhlaWdodD0iNS44MDAwMDMiIHRhcmdldC13aWR0aD0iNS4zMDAwMTgzIiB0YXJnZXQteD0iMjgyLjMiIHRhcmdldC15PSIyMjkuNSIvPjxwYXRoIGQ9Ik0gOTYuODAgMTI3LjIwIEwgMTI1LjgwIDEyNy4yMCBMIDEyNS44MCAxMzYuMjAgTCA5Ni44MCAxMzYuMjAgWiIgZmlsbD0iIzNlNWNjZCIgZmlsbC1ydWxlPSJub256ZXJvIiBub2RlLWlkPSI1OSIgc3Ryb2tlPSJub25lIiB0YXJnZXQtaGVpZ2h0PSI5IiB0YXJnZXQtd2lkdGg9IjI5IiB0YXJnZXQteD0iOTYuOCIgdGFyZ2V0LXk9IjEyNy4yIi8+PHBhdGggZD0iTSAyNzMuODAgMTI3LjIwIEwgMjk2LjgwIDEyNy4yMCBMIDI5Ni44MCAxMjkuMjAgTCAyNzMuODAgMTI5LjIwIFoiIGZpbGw9IiMzZTVjY2QiIGZpbGwtcnVsZT0ibm9uemVybyIgbm9kZS1pZD0iNjEiIHN0cm9rZT0ibm9uZSIgdGFyZ2V0LWhlaWdodD0iMiIgdGFyZ2V0LXdpZHRoPSIyMyIgdGFyZ2V0LXg9IjI3My44IiB0YXJnZXQteT0iMTI3LjIiLz48cGF0aCBkPSJNIDI3OS44MCAxMzAuNzAgTCAyOTYuODAgMTMwLjcwIEwgMjk2LjgwIDEzMi43MCBMIDI3OS44MCAxMzIuNzAgWiIgZmlsbD0iIzNlNWNjZCIgZmlsbC1ydWxlPSJub256ZXJvIiBub2RlLWlkPSI2MyIgc3Ryb2tlPSJub25lIiB0YXJnZXQtaGVpZ2h0PSIyIiB0YXJnZXQtd2lkdGg9IjE3IiB0YXJnZXQteD0iMjc5LjgiIHRhcmdldC15PSIxMzAuNyIvPjxwYXRoIGQ9Ik0gMjczLjgwIDEzNC4yMCBMIDI5Ni44MCAxMzQuMjAgTCAyOTYuODAgMTM2LjIwIEwgMjczLjgwIDEzNi4yMCBaIiBmaWxsPSIjM2U1Y2NkIiBmaWxsLXJ1bGU9Im5vbnplcm8iIG5vZGUtaWQ9IjY1IiBzdHJva2U9Im5vbmUiIHRhcmdldC1oZWlnaHQ9IjIiIHRhcmdldC13aWR0aD0iMjMiIHRhcmdldC14PSIyNzMuOCIgdGFyZ2V0LXk9IjEzNC4yIi8+PC9zdmc+');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.invoice-btn-hint {
		font-size: 24rpx;
		color: $text-gray-hint-color;
	}

	.reason-red {
		padding-left: 20rpx;
		font-size: 28rpx;
		color: $red-color;
		font-weight: bold;
		text-wrap: wrap;
		width: 100%;
		word-break: break-all;
	}
</style>