<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, ');
		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>