<template>
	<view class="content">
		<view class="contenttop">
			<view class="flex-start">
				<input type="text" placeholder="请输入抬头名称" v-model="form.user_name" @input="onInput" />
				<text @click="popupshow = !popupshow">筛选</text>
			</view>
			<view class="contenttopbox flex-center">
				<text @click="form.type = '全部',form.page = '1',form.user_name = '',invoicedlist()"
					:class="form.type == '全部'?'classtext':''">全部发票</text>
				<text @click="form.type = '普票',form.page = '1',form.user_name = '',invoicedlist()"
					:class="form.type == '普票'?'classtext':''">普通发票</text>
				<text @click="form.type = '专票',form.page = '1',form.user_name = '',invoicedlist()"
					:class="form.type == '专票'?'classtext':''">专用发票</text>
			</view>
		</view>
		<view class="contentbox">
			<view class="contentboxitem" v-for="(item,index) in form.list" :key="index"
				@click.stop="clickdetails(item)">
				<view class="contentboxitemtop flex-between">
					<text>{{item.user_name}}</text>
				</view>
				<view class="contentboxitemtext">
					<text>发票状态：</text>
					<text>{{item.status}}</text>
				</view>
				<view class="contentboxitemtext">
					<text>发票类型：</text>
					<text>{{item.type}}</text>
				</view>
				<view class="contentboxitemtext">
					<text>发票金额：</text>
					<text>{{item.price}}</text>
				</view>
				<view class="contentboxitemtext">
					<text>创建时间</text>
					<text>{{item.createtime}}</text>
				</view>
			</view>
		</view>
		<u-loadmore :status="form.status" />
		<u-popup :show="detailsshow" @close="detailsshow = !detailsshow" mode="bottom" :round="10">
			<view class="detailsclass">
				<view class="detailsclasstop">
					<text> 详情</text>
					<u-icon class="icon" name="close" @click="detailsshow = false" color="#999999" size="20"></u-icon>
				</view>
				<view class="detailsclassbox">
					<view class="detailsclassboxitem">
						<text>购方名称</text>
						<text>{{details.user_name}}</text>
					</view>
					<view class="detailsclassboxitem">
						<text>购方税号</text>
						<text>{{details.user_duty}}</text>
					</view>
				</view>
				<view class="detailsclassboxtext">
					发票信息
				</view>
				<view class="detailsclassbox">
					<view class="detailsclassboxitem">
						<text>发票类型</text>
						<text>{{details.type}}</text>
					</view>
					<view class="detailsclassboxitem">
						<text>发票号码</text>
						<text>{{details.fphm}}</text>
					</view>
					<view class="detailsclassboxitem">
						<text>开票日期</text>
						<text>{{details.ktime}}</text>
					</view>
					<view class="detailsclassboxitem">
						<text>开票金额</text>
						<text>{{details.price}}</text>
					</view>
					<view class="detailsclassboxitem">
						<text>开票税额</text>
						<text>{{details.tax_amount}}</text>
					</view>
					<view class="detailsclassboxitem">
						<text>发票状态</text>
						<text>{{details.status}}</text>
					</view>
				</view>
				<view class="detailsclassboxtext" v-if="details.status == '开票成功'">
					发票信息
				</view>
				<view class="detailsclassbox" v-if="details.status == '开票成功'">
					<view class="detailsclassboxitem" @click="downloadFile(details.pdfUrl)">
						<text>PDF版式文件</text>
						<text>下载</text>
					</view>
					<view class="detailsclassboxitem" @click="downloadFile(details.ofdUrl)">
						<text>OFD版式文件</text>
						<text>下载</text>
					</view>
					<view class="detailsclassboxitem" @click="downloadFile(details.xmlUrl)">
						<text>XML版式文件</text>
						<text>下载</text>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="popupshow" @close="popupshow = !popupshow" :round="10">
			<view class="popupshow">
				<view class="popupshowtop">
					筛选
				</view>
				<view class="popupshowbox">
					<view class="popupshowboxtitel">
						按时间筛选
					</view>
					<view class="popupshowbox_box flex-between">
						<view class="popupshowbox_item" v-for="(item,index) in daylist" :key="index"
							@click="clickday(item,index)" :class="selectshow === index ?'select':''">
							{{item.name}}
						</view>
						<view class="popupshowbox_itemzdy flex-between" v-if="showpickerbox && selectshow == 2">
							<view class="popupshowbox_item" @click="showpicker=!showpicker,clickshowpicker = 1">
								{{starttime}}
							</view>
							-<view class="popupshowbox_item" @click="showpicker=!showpicker,clickshowpicker = 2">
								{{endtime}}
							</view>
						</view>
					</view>
				</view>
				<view class="boxboutton flex-between">
					<view class="boxbouttonitem" @click="reset">
						重置
					</view>
					<view class="boxbouttonitem" @click="clickdetermine">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker :show="showpicker" mode="date" @cancel="showpicker = !showpicker"
			@confirm="confirmpicker"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailsshow: false, //详情
				popupshow: false,
				showpicker: false, //选择时间
				showpickerbox: false, //是否显示这个盒子
				clickshowpicker: '',
				starttime: '', //起始时间
				endtime: '',
				selectshow: '', //选中
				form: {
					user_name: '',
					time: "",
					page: 1,
					type: '全部',
					status: 'loadmore',
					list: []
				},
				daylist: [{
						id: 1,
						name: '仅30天'
					},
					{
						id: 2,
						name: '近180天'
					},
					{
						id: 3,
						name: '自定义'
					}
				],
				details: {

				}
			}
		},
		async onLoad(e) {
			this.invoicedlist()
		},
		onReachBottom() {
			if (this.form.status != 'nomore') {
				this.form.page = ++this.form.page;
				this.invoicedlist()
			}
		},
		methods: {
			async clickdetails(item) {
				console.log(item)
				let res = await this.api.invoiceddetail({
					id: item.id
				})
				if (res.code == 1) {
					this.details = res.data
					this.detailsshow = true
				}
			},
			// 时间
			clickday(item, index) {
				const d = new Date()
				const year = d.getFullYear()
				let month = d.getMonth() + 1
				let date = d.getDate()
				month = month < 10 ? `0${month}` : month
				date = date < 10 ? `0${date}` : date
				switch (index) {
					case 0:
						this.starttime = `${(month-1)==0?(year-1):year}-${(month-1)==0?12:(month-1)}-${date}`
						this.endtime = `${year}-${month}-${date}`
						this.showpickerbox = false
						break;
					case 1:
						this.starttime = `${year}-${month>6?(month-6):(month+12-6)}-${date}`
						this.endtime = `${year}-${month}-${date}`
						this.showpickerbox = false
						break;
					case 2:
						this.starttime = '' //起始时间
						this.endtime = ''
						this.showpickerbox = true
						break;
				}
				this.selectshow = index
			},
			// 确定时间
			confirmpicker(e) {
				if (this.clickshowpicker == 1) {
					this.starttime = uni.$u.timeFrom(e.value, 'yyyy-mm-dd')
				}
				if (this.clickshowpicker == 2) {
					this.endtime = uni.$u.timeFrom(e.value, 'yyyy-mm-dd')
				}
				this.showpicker = !this.showpicker
			},
			// 确定
			clickdetermine() {
				if (this.starttime != '' && this.endtime != '') {
					this.form.time = `${this.starttime} 00:00:00,${this.endtime} 00:00:00`
				}
				this.popupshow = false
				this.invoicedlist()
			},
			// 重置
			reset() {
				this.form = {
					user_name: '',
					time: "",
					page: 1,
					type: '全部',
					status: 'loadmore',
					list: []
				}
				this.popupshow = false
				this.invoicedlist()
			},
			// 搜索
			onInput(e) {
				if ([...e.detail.value].length >= 2) {
					this.form.page = 1
					this.form.list = []
					uni.$u.debounce(this.invoicedlist, 500)
				}
			},
			// 列表
			async invoicedlist() {
				this.form.status = 'loading';
				let res = await this.api.invoicedlist({
					user_name: this.form.user_name,
					time: this.form.time,
					page: this.form.page,
					type: this.form.type
				})
				console.log(res)
				if (this.form.page == 1 && res.data.length == 0) {
					this.form.list = res.data
					this.form.status = 'nomore'
					return false;
				} else {
					setTimeout(() => {
						if (this.form.page == 1) {
							this.form.list = res.data
						} else {
							this.form.list = [...this.form.list, ...res.data]
						}
						if (res.data.length < 10) this.form.status = 'nomore';
						else this.form.status = 'loadmore';
					}, 500)
				}
			},
			// 下载
			downloadFile(url) {
				uni.downloadFile({
					url: url, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F9F9F9;
	}

	.content {
		padding: 0;

		.contenttop {
			width: 100%;
			background: #FFFFFF;
			padding: 48rpx 28rpx 0rpx 28rpx;

			.flex-start {
				input {
					padding: 18rpx 24rpx;
					height: 64rpx;
					background: #F6F6F6;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					flex: auto;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}

				text {
					padding: 0 0 0 24rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
			}


			.contenttopbox {
				text {
					width: 33%;
					text-align: center;
					padding: 32rpx 0 24rpx 0;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}

				.classtext {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					position: relative;

					&::after {
						width: 30%;
						border-bottom: 5rpx solid #318AFE;
						position: absolute;
						bottom: 0;
						content: '';
						left: 50%;
						transform: translateX(-50%);
						display: inline-block;
					}
				}


			}
		}

		.detailsclass {
			max-height: 74vh;
			background: #FFFFFF;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			overflow: auto;

			.detailsclasstop {
				position: relative;
				padding: 32rpx 0 48rpx 0;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				text-align: center;

				.icon {
					position: absolute;
					right: 32rpx;
					top: 32rpx;
				}
			}

			.detailsclassbox {
				padding: 32rpx 28rpx;

				.detailsclassboxitem {
					margin-top: 48rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					text:nth-child(1) {
						width: 30%;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

					text:nth-child(2) {
						width: 70%;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						text-align: right;
					}
				}

				.detailsclassboxitem:nth-child(1) {
					margin-top: 0;
				}
			}

			.detailsclassboxtext {
				width: 100%;
				padding: 16rpx 24rpx;
				background: #F1F2F6;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.popupshow {
			padding: 0 28rpx;

			.popupshowtop {
				margin-top: 32rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}

			.popupshowbox {
				.popupshowboxtitel {
					margin-top: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}

				.popupshowbox_box {
					.popupshowbox_item {
						margin-top: 24rpx;
						width: 176rpx;
						height: 56rpx;
						background: #FFFFFF;
						border-radius: 28rpx 28rpx 28rpx 28rpx;
						border: 2rpx solid #D9D9D9;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						text-align: center;
						line-height: 56rpx;
					}

					.select {
						border: 1px solid #1b00ff;
						color: #0600ff;
					}

					.popupshowbox_itemzdy {
						width: 100%;

						.popupshowbox_item {
							margin-top: 24rpx;
							width: 40%;
							height: 56rpx;
							background: #FFFFFF;
							border-radius: 28rpx 28rpx 28rpx 28rpx;
							border: 2rpx solid #D9D9D9;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
							text-align: center;
							line-height: 56rpx;
						}
					}
				}
			}

			.boxboutton {
				margin: 400rpx 0 50rpx 0;

				.boxbouttonitem {
					width: 330rpx;
					height: 72rpx;
					border-radius: 50rpx 50rpx 50rpx 50rpx;
				}

				.boxbouttonitem:nth-child(1) {
					border: 2rpx solid #D9D9D9;
					background: #FFFFFF;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 36rpx;
					color: #333333;
					text-align: center;
					line-height: 72rpx;
				}

				.boxbouttonitem:nth-child(2) {
					background: #2F87FD;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 36rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 72rpx;
				}
			}
		}

		.contentbox {
			width: 100%;
			padding: 0 28rpx;

			.contentboxitem {
				margin-top: 32rpx;
				padding: 32rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.contentboxitemtop {
					text:nth-child(1) {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
					}

					text:nth-child(2) {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #F39D52;
					}
				}

				.contentboxitemtext {
					margin-top: 24rpx;

					text:nth-child(1) {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
					}

					text:nth-child(2) {
						margin-left: 24rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

					image {
						margin-left: 24rpx;
						width: 158rpx;
						height: 94rpx;
						background: #FFFFFF;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 2rpx solid #D9D9D9;
					}
				}

			}
		}
	}
</style>