<template>
	<view class="content">
		<view class="jisuanqi" @click="uploadExcel" style="margin-top:100rpx;">
			 导入
		</view>
		<view class="jisuanqi" @click="exportExcel" style="margin-top:100rpx;">
			 导出
		</view>
		<view class="jisuanqi" @click="showCalendar=true" style="margin-top:100rpx;">
			 选择日期
		</view>
		
		  <view class="content-confirm" style="margin-top:100rpx;">
		        日期选择{{searchDate}}
		       <!-- <calendar-select v-model="showCalendar"
		        maxDate="2021-6-20"
		        :addOrRemoveData="addOrRemoveData"
		        mode="range"
		        :altPrice="dataPrice"
		        @change="changeDate"></calendar-select>
				 
				 -->
				 
				 <button @click="open">打开弹窗</button>
				 		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
							<miku-calendar
							         :calendarBg="'#fff'"
							         :dateRange="[new Date('2024/02/01').getTime(),new Date('2024/02/27').getTime()]"
							         :dateRangeMax="365"
							         @dateRangeMaxDeal="dateRangeMaxDeal"
							         mode='dateRange'
							         :showArrow="true"
							         themeColor="rgb(100,124,203)"
							         arrowColor="rgb(100,124,203)"
							         @confirm = "calendarConfirm"
							     ></miku-calendar>
							
							
						</uni-popup>
				 
				  
		    </view>
			
		<!-- <web-view :src="localUrl" @message="handlePostMessage"></web-view> -->
	</view>
</template>
<script>
	import * as XLSX from '@/common/excel.js'
	  import CalendarSelect from '@/components/calendar-select/calendar-select.vue'
	  import mikuCalendar from "@/components/miku-calendar/mikuCalendar.vue"
	var that;
	export default {
	    components: {
			CalendarSelect,
			mikuCalendar
		},
		data() {
			return {
				searchDate: '',
				 date: new Date('2023/09/20').getTime(),
				title: "app端导出excel",
				successTip: "",
				// localUrl: '../../hybrid/html/local.html' // 本地页面的 URL
				localUrl: 'http://www.minestar.cn/index.html', // 本地页面的 URL
				excelList:[{
					'ctime':22, 'payname':22, 'remark':22,'typename':22,'type':22,'money':22
				}],  //接口提供数据
				 showCalendar: false,
				dataPrice: [ // 日历上的价格
					{
						date: '2021-4-23',
						price: 98
					},
					{
						date: '2021-4-28',
						price: 108
					},
					{
						date: '2021-4-29',
						price: 98
					}
				],
				addOrRemoveData: ['2021-04-23', '2021-04-27']
			}
		},
		onLoad() {
			// 获取小程序的本地文件路径
			    // this.localUrl = `/hybrid/html/local.html`;
		},
		methods: {
			open(){
			        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			        this.$refs.popup.open('center')
			      },
			 calendarConfirm(e){
			            console.log(e)
						const formattedDates = e.map(date => date.split(' ')[0]);
						this.searchDate = formattedDates
						 this.$refs.popup.close()
			        },
			        dateRangeMaxDeal(e){
			            console.log('超过最大连选天数：',e)
			        },
			        dateChange(day){
			            this.date = day
			        },
			// 获取选中的日期
			changeDate(data) {
				console.log(data)
				
			},
			uploadExcel(){
				// wx.miniapp.chooseFile({
				//     success(res) {
				//         const tempFiles = res.tempFiles
				//         console.log('wx.miniapp.chooseFile success', tempFiles)
				//     },
				//     fail(err) {
				//         console.log('wx.miniapp.chooseFile fail', err)
				//     }
				// })
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					extension: ['.xlsx', '.xls'],
					success: function(res) {
						console.log("文件上传", res);
						uni.uploadFile({
							url: config.baseUrl + '/core/xxxxx', //文件上传的接口地址
							filePath: res.tempFiles[0].path,
							name: 'excel', //接口需要的参数名
							header: {
								'Authorization': uni.getStorageSync('lifeData').vuex_token
							},
							success(uploadRes) {
								uni.showToast({
									icon: 'none',
									title: '上传成功'
								});
								that.pageNum = 1
								that.getProjectList()
							},
							fail(uploadErr) {
								console.log('上传失败', uploadErr);
								// 处理上传失败后的逻辑
							}
						});
					},
					fail(err) {
						console.log('选择文件失败', err);
						// 处理选择文件失败后的逻辑
					}
				});
			},
			// 导出excel
			exportExcel() {
				const fileName='账单明细'
				const header = ['ctime', 'payname', 'remark','typename','type','money'];
				const headerName = { ctime: '记账时间', payname: '支付类型', remark: '备注' ,typename:'消费类型',type:'支出2/收入1',money:'价格(元)'};
				const ExcelData = this.excelList;//列表数据
				uni.showToast({
					title: "导出中，请稍后...",
					duration:3000,
					icon: 'none'
				}) 
				XLSX.excel_exprot(ExcelData, header, headerName,fileName)
			},
			// webview向外部发送消息
			handlePostMessage: function(data) {
				console.log("接收到消息：" + JSON.stringify(data.detail));
				
				
				
				/**
				 * 数据机构
				 */
				// {
				// 	"data": [{
				// 		"selectListLv1": "[\"1\",\"2\"]",
				// 		"selectListLv2": "[\"1-1\",\"2\"]",
				// 		"dataArr": [{
				// 			"设计孔深": 1,
				// 			"巷道": "1-2",
				// 			"分段": "1-1",
				// 			"孔号": "1-3",
				// 			"中段": 1
				// 		}]
				// 	}]
				// }
				const sonPageData = data.detail
				if(sonPageData.type === 'goHome'){ // 返回上一页
					uni.reLaunch({
						url: '/pages/home/home'
					})
					return
				}
				
				
				if(sonPageData.data[0].errorTip){
					uni.showModal({
						  title: '信息提示',
						  content: sonPageData.data[0].errorTip,
						  showCancel: false
					})
					return
				}
				
				
				uni.setStorageSync('importDataList', sonPageData.data[0]['dataArr'])
				uni.setStorageSync('selectListLv1', sonPageData.data[0]['selectListLv1'])
				uni.setStorageSync('selectListLv2', sonPageData.data[0]['selectListLv2'])
				
				uni.reLaunch({
					url: '/pages/home/home'
				})
			},
		}
	}
</script>
<style>
	::v-deep .uni-popup .uni-popup__wrapper{
	    display: block;
	    position: relative;
	    width: 80vw;
	}
</style>