<template>
	<view class="content">
		<!-- <view class="head">
			<view class="headLine">Favorites</view>
			<tn-list-view :card="cardMode" class="settingList" unlined="all">
				<tn-list-cell class="listItem" v-for="(item, index) in favoritesList" :key="index">
					<view class="list-icon-text"> -->
						<!-- 左边图标文本显示部分 -->
					   <!-- <view class="list-left">
						  <view class="list-left-icon tn-icon-circle-fill tn-color-gray"></view>
						  <view class="list-left-text">
							 <view class="list-left-text-one">{{ item.label }}</view>
							 <view class="list-left-text-two">{{ item.text }}</view> 
						  </view>
					    </view> -->
						<!-- 右边操作按钮部分 -->
						<!-- <view class="list-right">
							<tn-switch v-model="beepChecked" :inactiveValue="0" :activeValue="1"
							:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> 
						</view> 
					</view>
				</tn-list-cell>
			</tn-list-view>
		</view> -->
		<view class="body">
			<view class="headLine">History</view>
			<tn-list-view :card="cardMode" class="settingList" unlined="all">
				<tn-list-cell class="listItem" v-for="(item, index) in historyList" :key="index">
					<view class="list-icon-text">
						<!-- 左边图标文本显示部分 -->
					    <view class="list-left">
						  <view class="tn-color-gray"></view>
						  <view class="list-left-text" @click="getHistory(item.category,item.content)">
							 <view class="list-left-text-one">{{ item.category }}</view>
							 <view class="list-left-text-two">{{ item.content }}</view> 
						  </view>
					    </view>
						<!-- 右边操作按钮部分 -->
					<!-- 	<view class="list-right">
							<tn-switch v-model="beepChecked" :inactiveValue="0" :activeValue="1"
							:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> 
						</view> -->
					</view>
				</tn-list-cell>
			</tn-list-view>
		</view>
	</view>
</template>

<script>
	// import { openSqlite,closedb,getPageList,updateSql} from "@/utils/database";
	import { openSqlite,closedb,getPageList} from "@/utils/database";
	export default {
		data() {
			return {
				title: 'History',
				tableName:"scan_code",
				options:{
				    current:1,  // 分页默认为第1页
				    size:10,
				},
				list:[],
				pages:0,
				total:0,
				cardMode: true,
				// favoritesList:[
				// 	{
				// 		"icon":"grid-item-icon tn-icon-empty-network",
				// 		"text":"https://test1.com",
				// 		"sort":"0",
				// 		"label":"URL"
				// 	},
				// 	{
				// 		"icon":"grid-item-icon tn-icon-empty-network",
				// 		"text":"https://test2.com",
				// 		"sort":"1",
				// 		"label":"URL"
				// 	},
				// 	{
				// 		"icon":"grid-item-icon tn-icon-empty-network",
				// 		"text":"https://test3.com",
				// 		"sort":"2",
				// 		"label":"URL"
				// 	},
				// 	{
				// 		"icon":"grid-item-icon tn-icon-empty-network",
				// 		"text":"https://test4.com",
				// 		"sort":"3",
				// 		"label":"URL"
				// 	},
				// 	{
				// 		"icon":"grid-item-icon tn-icon-empty-network",
				// 		"text":"https://test5.com",
				// 		"sort":"4",
				// 		"label":"URL"
				// 	},
				// 	{
				// 		"icon":"grid-item-icon tn-icon-empty-network",
				// 		"text":"https://test6.com",
				// 		"sort":"5",
				// 		"label":"URL"
				// 	},
				// ],
				historyList: []
			}
		},
		async onShow() {
			let that = this;
			//打开db
			await that.openSqlite();
			//获取历史数据
			await that.getData();
		},
		onHide() {
			// let that = this;
			// that.closedb();
		},
		onUnload() {
			let that = this;
			that.closedb();
		},
		onBackPress(options){
			let that = this;
				if (options.from === 'navigateBack') {  
				    return false;  
				}  
				that.back();  
				return true;	
			
		},
		methods: {
			
			//返回主页
			back() {  
			    uni.switchTab({
					url: '/pages/scan/Scan'
				});
			}, 
			
			//查看指定记录历史信息
			getHistory(category,data){
				//console.log('category',category)
				console.log('data', data)
				let that = this;
				if(category === 'Contacts'){
					that.jumpToPage('/pages/scan/Contacts','history', data);
				}else if(category === 'Email'){
					that.jumpToPage('/pages/scan/Email','history', data);
				}else if(category === 'Tel'){
					that.jumpToPage('/pages/scan/Tel','history', data);
				}else if(category === 'Product'){
					that.jumpToPage('/pages/scan/Product','history', data);
				}else if(category === 'Sms'){
					that.jumpToPage('/pages/scan/Sms','history', data);
				}else if(category === 'Text'){
					that.jumpToPage('/pages/scan/Text','history', data);
				}else if(category === 'Url'){
					that.jumpToPage('/pages/scan/Url','history', data);
				}else if(category === 'Wifi'){
					that.jumpToPage('/pages/scan/Wifi','history', data);
				}else if(category === 'Location'){
					that.jumpToPage('/pages/scan/Location','history', data);
				}else if(category === 'Calendar'){
					that.jumpToPage('/pages/scan/Calendar','history', data);
				}else if(category === 'Barcode'){
					that.jumpToPage('/pages/scan/Barcode','history', data);
				}
			},
			
			//根据数据库页面类型结果判断跳转到哪个指定页面
			jumpToPage(url,category,data){
				uni.navigateTo({
					url: url + '?data='+ data + '&category=' + category
				});
			},
			
			// 打开数据库
			async openSqlite(){
			    try{
			        let b = await openSqlite()
					console.log('db打开了');
			    }catch(e){
			        console.error("open db error",e)
			    }
			},
			
			// 关闭数据库
			closedb(){
			    try{
			        closedb()
					console.log('db关闭了');
			    }catch(e){
			        console.error("close db error",e)
			    }
			
			},
			
			// 获取数据
			async getData(){
				let that = this;
			    try{
			        let where = {}
			        let res = await getPageList(that.tableName,that.options,where,"id desc")
			        //console.log("加载数据",res)
					// for (let data of res.data.data.records) {
					// 	//console.log('data',data)
					// 	let content = JSON.parse(data.content)
					// 	//console.log('content',content)
					// 	data.content = content;
					// }
			        that.historyList = res.data.data.records
					console.log('historyList',that.historyList)
			        that.pages = res.data.data.pages
			        that.total = res.data.data.total
			    }catch(e){
			        uni.showToast({
			            title:"get History Data error",
			            icon:"none"
			        });
			        console.error("error",e)
			    }
			},
			
			// 修改数据
			// async changeData(){
			// 	let that = this;
			//     // fid 是自增id
			//     try{
			//         let res = await getPageList(that.tableName,{current:1,size:1},{},"fid desc")
			//         console.log("最后一页数据",res.data.data)
			//         await updateSql(that.tableName,{title:"updated data"},{fid:res.data.data.records[0].fid})
			//         uni.showToast({
			//             title:"update ok",
			//             icon:"none"
			//         });
			//     }catch(e){
			//         uni.showToast({
			//             title:"update error",
			//             icon:"none"
			//         });
			//         console.error("修改报错",e)
			//     }
			// },
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;
		background-color: #1F222B;
		// height:1400rpx;
		height: 100vh;
		overflow: scroll;
		
		.headLine{
			color: #fff;
			font-size: 48rpx;
			//padding-top:30px;
			//margin-right:200px;
			margin-top:30rpx;
			//border: 2px solid purple;
		}
		
		.settingList{
			//border: 2px solid red;
			width: 660rpx;
			//height:300px;
			height: auto;
			margin-top: 60rpx;
			//background-color: #141b29;
			
			.listItem{
				//border: 2px solid yellow;
				height: 200rpx;
				//margin-top: 30px;	
				background-color: #141b29;
				color: #fff;
				text-align: start;
				
				.list-icon-text {
					display: flex;
					align-items: center;
					justify-content: space-between;
					
				
					.list-left{
						//border: 2px solid green;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						
						.list-left-text{
							width: 420rpx;
							.list-left-text-one{
								font-size: 36rpx;
								//border: 2px solid blue;
							}
							
							.list-left-text-two{
								color: grey;
								font-size: 36rpx;
								//border: 2px solid lightsalmon;
							}
						}
						
						.list-left-feedback-text{
							width: 480rpx;
							.list-left-feedback-text-one{
								font-size: 36rpx;
								//border: 2px solid blue;
							}
							
							.list-left-feedback-text-two{
								color: grey;
								font-size: 30rpx;
								//border: 2px solid lightsalmon;
							}
						}
						
						
						// .list-left-icon{
						// 	//border: 2px solid blueviolet;
						// 	margin-right: 20rpx;
						// 	font-size: 100rpx;
						// }
						
						.list-left-select-text{
							width: 320rpx;
							.list-left-select-text-one{
								font-size: 36rpx;
								//border: 2px solid blue;
							}
						}
					}
					
					// .list-right{
					// 	//border: 2px solid pink;
					// 	color: royalblue;
					// 	font-size: 36rpx;
						
					// 	.list-right-icon{
					// 		//border: 2px solid gainsboro;
					// 		font-size: 36rpx;
					// 		margin-left: 30rpx;
					// 	}
						
					// 	.list-right-text{
					// 		//border: 2px solid green;
					// 		//margin-right: 30px;
					// 		//padding-right: 30px;
					// 	}
					// }
				}
			}
		}
	}

	.head{
		//border: 2px solid red;
		font-size: 72rpx;
		color: white;
		margin-top:100rpx;
		
	}
	
	.body{
		//border: 2px solid blue;
		font-size: 72rpx;
		color: white;
		margin-top:50rpx;
	}
	
</style>
