<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">
			<view style="height: 150px;text-align: center;">
				<!-- #ifdef MP-WEIXIN -->
				<!-- <view><image :src="user.img" mode="widthFix" style="width: 50px;"></image></view>
				<view>{{user.name}}</view> -->
				<!-- #endif -->
				<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() {
			// #ifdef MP-WEIXIN
				// uni.getUserInfo({
				// 	provider: 'weixin',
				// 	success: (res) => {
				// 		this.user.name = res.userInfo.nickName;
				// 		this.user.img = res.userInfo.avatarUrl;
				// 		console.log(res);
				// 		// 在这里可以对用户信息进行处理或者其他操作
				// 	},
				// 	fail: (error) => {
				// 		console.log(error);
				// 	}
				// });
				
				// uni.login({
				// 	provider: "weixin",
				// 	success: (wxraw) => {
				// 		console.log(wxraw,'1111');
				// 		// const data = {
				// 		// 	_gp: "user",
				// 		// 	_mt: "thirdPartLogin",
				// 		// 	phone: this.phone,
				// 		// 	password: this.password,
				// 		// 	loginType: 1,
				// 		// 	raw: JSON.stringify(wxraw)
				// 		// }
				// 	},
				// 	fail: (err) => {
				// 		uni.showToast({
				// 			title: "登录失败"
				// 		});
				// 	}
				// })
			// #endif
			API.getWxCode({}, res => {
				if (res.code == 1) {
					this.redirectUri = res.data.redirectUri;
					this.appId = res.data.appId;
					this.state = res.data.state
				}
			})
		},
		mounted() {
			this.$refs.popup.open();
		},
		methods: {
			login(){
				// uni.navigateTo({
				// 	url:"/pages/wxlogin/wxlogin"
				// })
				// let url = '/passport/mixedLogin',
				// let data = {
				// 	account_number: 'root',
				// 	password: 'guaguale@2023',
				// 	captcha: ''
				// };
				// API.request(url, data, res => {
				// 	console.log(res);
				// })
				
				
				console.log(this.appId);
				console.log(this.state);
				let local = encodeURIComponent(this.redirectUri);
				console.log(local);
				const url =
					'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appId +
					'&redirect_uri=' + local + '&response_type=code&scope=snsapi_userinfo&state=' + this.state +
					'#wechat_redirect';
				console.log(url);
				window.location.href = url;
				
				
			},
			// getCode(){
			// 	let local = encodeURIComponent(window.location.href);
			// 	window.location.href =
			// 		'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appId +
			// 		'&redirect_uri=' + local + '&response_type=code&scope=snsapi_userinfo&state=' + this.state +
			// 		'#wechat_redirect';
			// },
			getUser(){
				uni.getUserProfile({
					desc:'Wexin',
					success: (res) => {
						// const userInfo = res.userInfo;
						console.log(res);
						// 在这里可以对用户信息进行处理或者其他操作
					},
					fail: (error) => {
						console.log(error);
					}
				});
			},
			toInvoicing(){
				uni.navigateTo({
					url:'/pages/Invoicing/Invoicing'
				})
			},
			toviewinvoice(n){
				let id = n;
				uni.navigateTo({
					url:'/pages/Invoiced/Invoiced?id=1'
				})
			}
		}
	}
</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: #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 #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>
