<template>
	<view class="graybg">
		<view class="pads">
			<view class="box">

				<view class="billItem" v-for="b in list" :key="b.id">
					<!-- parentType -->
					<view>
						申请日期：
						{{ b.createTime }}
					</view>
					<view>
						发票抬头：{{b.invoiceTitle}}
					</view>
					<view>
						邮箱：{{b.invoiceAddress}}
					</view>
					<view style="margin: 20rpx 0 0;display: flex;justify-content: space-between;">
						<view class="status">
							<view class="success" v-if="b.isInvoice == '1'"> 已开票</view>
							<view class="warning" v-if="b.isInvoice == '0'">未开票</view>
							<view class="success" v-if="b.isInvoice == '3'"> 已寄出</view>
							<view class="warning" v-if="b.isInvoice == '2'"> 已取消</view>
						</view>
						<view>
							<button class="billbtn" v-if="b.isInvoice == '0'" @click.stop="editDetail(b)"> 修改发票</button>
							<button class="billbtn rbtn-m-kx" @click.stop="showDetail(b)">详情</button>

						</view>
					</view>

				</view>
				<view class="nodata" v-if="list.length==0">
					<image mode="aspectFit" src="@/static/nodata.png"></image>
					<text> 还没有发票</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onPullDownRefresh,
		onReachBottom,
		onLoad
	} from '@dcloudio/uni-app';
	import * as hotel from '@/common/hotel.js';
	import _ from 'lodash';
	const app = getApp();
	const list = ref([]);
	const alertDialog = ref(null);
	const showFirst = ref(true);

	const queryparam = ref({
		pageNum: 1,
		pageSize: 10
	})
	const currUser = uni.getStorageSync('currUser');
	onShow(() => {
		list.value = []
		getList()
	});

	onLoad((option) => {

	});

	function clickLoadMore() {
		if (loadStatus.value == 'nomore') {
			return
		}
		queryparam.value.pageNum += 1
		getList()

	}

	function getList() {
		hotel.getInvoiceByUserId().then(res => {
			list.value = res.rows;

		});
	}

	function showDetail(b) {
		let path = `/pages_hotel/hotel/invoiceDetail?invoiceId=${b.id}`;
		uni.navigateTo({
			url: path
		});
	}

	function editDetail(b) {
		hotel.getTrainDetail(b.trainId).then(res => {

			let path = `/pages_hotel/hotel/addInvoice?invoiceId=${b.id}&isEdit=true&kpType=${res.data.kpType}`;
			uni.navigateTo({
				url: path
			});

		})

	}
</script>

<style lang="scss" scoped>
	.fixedBtn {
		position: fixed;
		right: 30rpx;
		bottom: 10%;
		width: 100rpx;
		height: 100rpx;
		color: #fff;
		background: linear-gradient(270deg, #54e1b9, #00caa6);
		border-radius: 50%;
		box-shadow: 0 0 15rpx #666;
		font-size: 24rpx;
		text-align: center;
	}

	.pads {
		padding: 0 25rpx 70rpx;
	}

	.billItem {
		width: auto;
		padding: 30rpx 0;
		margin: 30rpx 0 0;

		.uni-input {
			padding: 15rpx 0;
			color: #000;
		}

		.billFoot {
			margin-bottom: 20rpx;
		}
	}

	.rrcard .box {
		padding: 0 0 1px;
		margin: 20rpx 0 0;
	}

	.graybg {
		background: #f7f8fa;
		height: 100vh;
		width: 100vw;
		overflow: auto;
	}

	.whitebg {
		background: #fff;
		margin-top: 15rpx;
		border-radius: 20rpx;
		margin-bottom: 180rpx;
	}

	.name {
		font-size: 34rpx;
		color: #000;
	}

	.padh20 {
		padding: 0 25rpx;
	}

	.price {
		width: 100%;
		overflow: hidden;
	}

	.billbtn {
		color: #1EC886;
		border: 1px solid #1EC886;
		margin: initial;
		line-height: 2;
		display: inline-block;
		border-radius: 0;
		background-color: transparent;
		font-size: 28rpx;
	}

	.rbtn-m-kx {
		margin: 0 0 0 10rpx;
		background: #1EC886;
		color: #fff;
	}

	.billFoot .tip {
		font-size: 24rpx;
		font-size: 24rpx;
		color: #999;
		font-weight: 500;
		margin: 0 20rpx;
	}

	.billItem>view {
		margin-bottom: 10rpx;
	}

	.billFoot text {
		white-space: nowrap;
	}

	.billFoot text.danger {
		color: #da2a2a;
	}

	.blueTag {
		color: #fff;
		background-color: #1EC886;
		padding: 10rpx 10rpx;
	}

	.status {
		.warning {
			color: #ff8124;
		}

		.danger {
			color: #da2a2a;
		}

		.gary {
			color: #666;
		}

		.success {
			color: #1EC886;
		}
	}

	.popContent {
		background: #fff;
		height: auto;
		position: fixed;
		width: 80vw;
		max-height: 50vh;
		top: 20%;
		left: 0;
		right: 0;
		border-radius: 10rpx;
		margin: auto;
		z-index: 99;
		box-shadow: 0 0 0 100vh rgba(0, 0, 0, 0.4);

		.button {
			width: 230rpx;
			margin: 20rpx auto;
			font-size: 26rpx;
			color: #fff;
			background: linear-gradient(90deg, #00C176, #3ed89b);
			padding: 6rpx 15rpx;
			text-align: center;
			border-radius: 6rpx;
		}
	}

	.textbody {
		padding: 40rpx;
	}

	.textbody .h3 {
		text-align: center;
		font-size: 32rpx;
	}

	.textbody .texts {
		overflow: auto;
		line-height: 1.6;
		text-indent: 2em;
		color: #666;
		max-height: 30vh;
		text-align: justify;
		margin: 20rpx 0 0;
		font-size: 28rpx;
	}

	.billItem>view {
		box-sizing: border-box;
	}

	.iconkp {
		width: 50rpx;
		height: 50rpx;
		display: block;
		margin: 10rpx auto 0;
	}
</style>