<template>
	<view class="index">
		<view>
			<view class="index_title">
				<view class="d-flex" style="justify-content: flex-end;" @click="toInvoicing">
					<uni-icons type="plus" size="40rpx" color="#4b93d9"></uni-icons>
					<view>申请发票</view>
				</view>
			</view>
			<view class="index_picker">
				<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
			</view>
		</view>
		
		<scroll-view scroll-y="true" class="scroll-Y">
			<!-- :style="{'marginBottom':index < 2 ? '20rpx' : '0rpx'}" -->
			<view class="index_list" v-for="(n, index) in 2" style="margin-bottom: 20rpx;" @click="toviewinvoice(n)">
				<view class="d-flex jcontent-between">
					<view class="index_list_size">业务流水号3674</view>
					<view class="index_list_color">已开票，点击获取</view>
				</view>
				<view class="d-flex jcontent-between">
					<view>开票项目</view>
					<view>垃圾费</view>
				</view>
				<view class="d-flex jcontent-between">
					<view>开票总金额</view>
					<view class="Price_color">￥7.2</view>
				</view>
				<view class="d-flex jcontent-between">
					<view>抬头类型</view>
					<view>单位</view>
				</view>
				<view class="d-flex jcontent-between">
					<view>抬头名称</view>
					<view>张三</view>
				</view>
				<view class="d-flex jcontent-between">
					<view>申请时间</view>
					<view>2024-07-22 18:45:31</view>
				</view>
				<view class="index_list_box">
					<view class="index_list_box1">已开票</view>
				</view>
			</view>
			
			<view class="index_list1">
				<view class="d-flex jcontent-between">
					<view class="index_list_size">业务流水号3674</view>
					<view class="index_list_color">已开票，点击获取</view>
				</view>
				<view class="d-flex jcontent-between">
					<view>开票项目</view>
					<view>垃圾费</view>
				</view>
				<view class="d-flex jcontent-between">
					<view>开票总金额</view>
					<view class="Price_color">￥7.2</view>
				</view>
				<view class="d-flex jcontent-between">
					<view>抬头类型</view>
					<view>单位</view>
				</view>
				<view class="d-flex jcontent-between">
					<view>抬头名称</view>
					<view>张三</view>
				</view>
				<view class="d-flex jcontent-between">
					<view>申请时间</view>
					<view>2024-07-22 18:45:31</view>
				</view>
				<view class="index_list_box">
					<view class="index_list_box1">已作废</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0" @close="close">
			<view style="height: 150px;text-align: center;">
				<view style="margin: 40rpx 80rpx;"><button type="primary" @click="login">登录</button></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import API from '@/common/js/api.js'
	export default {
		data() {
			return {
				datetimerange: [],
				list:[],
				appId:'',
				redirectUri:'',
				state:'',
				user:{
					name:'',
					img:''
				}
			}
		},
		watch: {
			datetimerange(newval) {
				console.log('范围选:', this.datetimerange);
			}
		},
		onLoad(options) {
			
			const url = window.location.href;
			// 获取URL中的参数对象
			const params = this.getUrlParams(url);
			
			// 获取code参数
			const code = params['code'];
			
			// 获取start参数
			const start = params['start'];
			if(!uni.getStorageSync('AccessToken')){
				this.cont()
			}
			this.getWxCode()
		},
		mounted() {
			if(!uni.getStorageSync('AccessToken')){
				this.$refs.popup.open();
			}
		},
		methods: {
			// 解析URL中的参数
			getUrlParams(url) {
				const params = {};
				url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
					params[key] = value;
				});
				return params;
			},
			cont(){
				let code = this.getUrlCode('code'); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
				let state1 = this.getUrlCode('state');
				let data = {
					code : code,
					state: state1
				}
				if(code&&state1){
					API.wx(data, res => {
						if(res.code==1){
							uni.showToast({title: res.msg,icon: 'none'})
							uni.setStorageSync('AccessToken', res.data.token);
							uni.setStorageSync('openid', res.data.openid);
							this.$refs.popup.close();
							this.removepath()
						}else{
							uni.showToast({title: res.msg,icon: 'none'});
							this.login();
						}
					})
				}
			},
			getWxCode(){
				API.getWxCode({}, res => {
					if (res.code == 1) {
						this.redirectUri = res.data.redirectUri;
						this.appId = res.data.appId;
						this.state = res.data.state
					}
				})
			},
			// 正则匹配请求地址中的参数函数
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||[, ''])[1].replace(/\+/g, '%20')) || null
			},
			login(){
				uni.navigateTo({
					url:"/pages/wxlogin/wxlogin"
				})
			},
			removepath(){
				// 获取当前 URL
				const url = window.location.href;
				// 使用正则表达式去掉 code 和 state 参数并替换成#/
				const newUrl = url.replace(/[\?&]code=[^&]*&?/, '?').replace(/[\?&]state=[^&]*&?/, '#/');
				// 使用 replaceState 更新 URL，而不刷新页面
				window.history.replaceState({}, document.title, newUrl);
			},
			close(){
				
			},
			toInvoicing(){
				uni.navigateTo({
					url:'/pages/Invoicing/Invoicing'
				})
			},
			toviewinvoice(n){
				let id = n;
				if(uni.getStorageSync('AccessToken')){
					uni.navigateTo({
						url:'/pages/Invoiced/Invoiced?id=1'
					})
				}else{
					uni.showToast({title: '请先进行登入',icon: 'none'});
					this.$refs.popup.open();
				}
			}
		}
	}
</script>
<style>
	page {
		/* overflow: hidden; */
		/* #ifdef H5 */
		height: 100%;
		/* #endif */
	}
</style>
<style lang="scss" scoped>
	.index{
		/* #ifdef H5 */
			height: 100%;
		/* #endif */
		/* #ifdef MP-WEIXIN || APP-PLUS */
			height: 100vh;
		/* #endif */
		font-size: 28rpx;
		
		.index_title{
			color: #4b93d9;
			padding: 40rpx;
			font-weight: bold;
		}
		
		.index_picker{
			padding: 0px 20rpx;
			margin-bottom: 20rpx;
		}
		
		.index_list{
			background-color: #fff;
			padding: 30rpx;
			line-height: 60rpx;
			color: #939393;
			position: relative;
			font-weight: bold;
			
			.index_list_size{
				font-size: 36rpx;
				color: #000;
				font-weight: bold;
			}
			
			.index_list_color{
				color: #489ed9;
				font-size: 26rpx;
				font-weight: bold;
			}
			
			.Price_color{
				color: #7daf1d;
				font-weight: bold;
			}
			
			.index_list_box{
				border: 1px solid #d82d33;
				border-radius: 16rpx;
				line-height: 24rpx;
				padding: 4rpx;
				position: absolute;
				top: 25%;
				left: 45%;
				transform: rotate(-15deg);
				
				.index_list_box1{
					border: 1px solid #d82d33;
					border-radius: 16rpx;
					padding: 20rpx 30rpx;
					color: #d82d33;
					font-weight: bold;
				}
			}
		}
		
		.index_list1{
			background-color: #ebebeb;
			padding: 30rpx;
			line-height: 60rpx;
			color: #939393;
			position: relative;
			font-weight: bold;
			
			.index_list_size{
				font-size: 36rpx;
				color: #959595;
				font-weight: bold;
			}
			
			.index_list_color{
				color: #afafaf;
				font-size: 26rpx;
				font-weight: bold;
			}
			
			.Price_color{
				color: #939393;
				font-weight: bold;
			}
			
			.index_list_box{
				border: 1px solid #939393;
				border-radius: 16rpx;
				line-height: 24rpx;
				padding: 4rpx;
				position: absolute;
				top: 25%;
				left: 45%;
				transform: rotate(-15deg);
				
				.index_list_box1{
					border: 1px solid #939393;
					border-radius: 16rpx;
					padding: 20rpx 30rpx;
					color: #939393;
					font-weight: bold;
				}
			}
		}
		
		.scroll-Y{
			width: 100%;
			/* #ifdef H5 */
				height: calc(100vh - 304rpx);
			/* #endif */
			/* #ifdef MP-WEIXIN || APP-PLUS */
				height: calc(100vh - 218rpx);
			/* #endif */
		}
	}
</style>
