<template>
	<view class="amms-page">
		<cu-custom :isBack="false" :showChange="false" :footIs="showFootIs">
			<block v-slot:content>{{ title }}</block>
		</cu-custom>
		<z-swiper ref="zSwiper" v-model="list" :options="options" :style="swiperStyle" @slideChange="navChange"
			@slideChangeTransitionEnd="slideChangeTransitionEnd">
			<z-swiper-item v-for="(item,index) in list" :key="index">
				<view class="item-cover">
					<a-home v-if="item == 'aHome'" ref="home" @recall="listenToChild"></a-home>
					<a-communicate v-if="item == 'aCommunicate'" ref="communicate"
						@recall="listenToChild"></a-communicate>
					<a-message v-if="item == 'aMessage'" ref="message" @recall="listenToChild"></a-message>
					<a-staging v-if="item == 'aStaging'" ref="staging" @recall="listenToChild"></a-staging>
				</view>
			</z-swiper-item>
		</z-swiper>
		<view class="bottom-bar">
			<view class="bbItem" v-for="(item, index) in navList" :key="index" @click="changeNav(index)">
				<image :src="item.selectedIconPath" class="bbIcon" v-if="item.show"></image>
				<image :src="item.iconPath" class="bbIcon" v-if="!item.show"></image>
				<view class="bbText" :class="{'selected': item.show}">{{ item.name }}</view>
			</view>
		</view>
		<q-loading mask="true" click="true" ref="loading"></q-loading>
	</view>
</template>

<script setup lang="ts">
	import { ref, getCurrentInstance, onMounted, nextTick, computed, inject } from 'vue';
	import sq from "@/common/sqlite.js"
	import aHome from './components/home.vue';
	import aCommunicate from './components/communicate.vue';
	import aMessage from './components/message.vue';
	import aStaging from './components/staging.vue';
	import {
		onShow,
		onResize
	} from '@dcloudio/uni-app';
	import {
		secondGenerationAppUpdate
	} from '@/common/appUpdate.js';

	const { proxy } = getCurrentInstance();
	const customBar = inject('CustomBar');
	const options = ref({
		loop: false,
	});
	const list = ref([
		'aHome',
		'aCommunicate',
		'aMessage',
		'aStaging'
	]);
	let title = ref('首页');
	let showFootIs = ref(false);
	let navList = ref([{
		name: '首页',
		ref: 'home',
		iconPath: '../../static/img/ammsHome/tab/tab1.png',
		selectedIconPath: '../../static/img/ammsHome/tab/tab1_active.png',
		show: true
	}, {
		name: '通讯录',
		ref: 'communicate',
		iconPath: '../../static/img/ammsHome/tab/tab2.png',
		selectedIconPath: '../../static/img/ammsHome/tab/tab2_active.png',
		show: false
	}, {
		name: '消息',
		ref: 'message',
		iconPath: '../../static/img/ammsHome/tab/tab3.png',
		selectedIconPath: '../../static/img/ammsHome/tab/tab3_active.png',
		show: false
	}, {
		name: '工作台',
		ref: 'staging',
		iconPath: '../../static/img/ammsHome/tab/tab4.png',
		selectedIconPath: '../../static/img/ammsHome/tab/tab4_active.png',
		show: false
	}]);

	onMounted(() => {
		// 组件初始化调用
		nextTick(() => {
			proxy.$refs.home[0].init();
		})

	})

	onShow(() => {
		let isSimplePwd = uni.getStorageSync('simplePwd') || false
		if (isSimplePwd) {
			uni.showModal({
				title: '提示',
				content: `当前密码不符合集团密码规范，请重新修改密码。`,
				showCancel: false,
				success: function (res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/home/components/editPassword'
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
		// 自动检测版本
		setTimeout(() => {
			// 获取版本号
			let clent: any = uni.getSystemInfoSync();
			let version: String = '';
		
			// #ifdef APP
			version = clent.appWgtVersion;
			// #endif
			// #ifdef H5
			version = clent.appVersion;
			// #endif
		
			if (clent.platform == 'android') {
				secondGenerationAppUpdate(version || 0, 'Android', 'auto');
			} else {
				secondGenerationAppUpdate(version || 0, 'IOS', 'auto');
			}
		}, 50)
	})
	
	onResize((e) => {
		setTimeout(() => {
			proxy.$refs.zSwiper.swiper.update();
		}, 300)
		
	})

	const swiperStyle = computed(() => {
		return `height: calc(100% - ${customBar}px);`
	})

	// 打开sqlite，目前只针对收费单模块使用
	function openSQL() {
		let isOpen = sq.isOpen();
		if (!isOpen) {
			sq.openSqlite().then(res => {
				selectTableData()
			}).catch((err : any) => {
				console.log('数据库打开失败');
			})
		} else {
			selectTableData()
		}
	}
	// 查询表数据
	function selectTableData() {
		let isOpen = sq.isOpen();
		let username = uni.getStorageSync('username');
		if (isOpen) {
			// 查询表 DB.selectTableData(表名,查询条件列名,查询条件列值)
			sq.selectTableData(username.replace(/[.|\-|_]/g, '')).then((res : any) => {
				console.log("表数据", res);
				let count = 0;
				res.forEach((ele : any) => {
					if (ele.state == '0') {
						count++;
					}
				})
				if (count > 0) {
					uni.showModal({
						title: '温馨提示',
						content: `您当前有${count}个航线收费单未提交，请及时处理。`,
						success: (res1 : any) => {
							if (res1.confirm) {
								uni.navigateTo({
									url: `/pages/modules/hxsfd/mySigned`
								});
							}
						}
					});
				}
			}).catch((error : any) => {
				console.log("查询失败", error);
			});
		} else {
			uni.showToast("数据库未打开");
		}
	}

	function navChange(val : any) {
		let _navList = navList.value;
		_navList.map(ele => {
			ele.show = false;
		});
		_navList[val.activeIndex].show = true;
		navList = ref(_navList);
	}

	function changeNav(index : Number) {
		proxy.$refs.zSwiper.swiper.slideTo(index, 800, () => {
			proxy.$refs[navList.value[proxy.$refs.zSwiper.swiper.activeIndex].ref][0].init();
		});
		title.value = navList.value[proxy.$refs.zSwiper.swiper.activeIndex].name;
		if (proxy.$refs.zSwiper.swiper.activeIndex == 3) {
			showFootIs.value = true;
		} else {
			showFootIs.value = false;
		}
		// if (proxy.$refs.zSwiper.swiper.activeIndex == 2) {
		// 	let pages = getCurrentPages()
		// 	let currentWebview = pages[pages.length - 1].$getAppWebview();
		// 	currentWebview.setStyle({
		// 		support: true
		// 	})
		// } else {
		// 	let pages = getCurrentPages()
		// 	let currentWebview = pages[pages.length - 1].$getAppWebview();
		// 	currentWebview.setStyle({
		// 		support: false
		// 	})
		// }
	}

	function slideChangeTransitionEnd() {
		title.value = navList.value[proxy.$refs.zSwiper.swiper.activeIndex].name;
		if (proxy.$refs.zSwiper.swiper.activeIndex == 3) {
			showFootIs.value = true;
		} else {
			showFootIs.value = false;
		}
		proxy.$refs[navList.value[proxy.$refs.zSwiper.swiper.activeIndex].ref][0].init();
		// if (proxy.$refs.zSwiper.swiper.activeIndex == 2) {
		// 	let pages = getCurrentPages()
		// 	let currentWebview = pages[pages.length - 1].$getAppWebview();
		// 	currentWebview.setStyle({
		// 		support: true
		// 	})
		// } else {
		// 	let pages = getCurrentPages()
		// 	let currentWebview = pages[pages.length - 1].$getAppWebview();
		// 	currentWebview.setStyle({
		// 		support: false
		// 	})
		// }
	}

	function listenToChild(res : string) {
		if (res == 'close') {
			proxy.$refs.loading.close()
		}
		if (res == 'open') {
			proxy.$refs.loading.open()
		}
		if (res == 'stagingEdit') {
			proxy.$refs.zSwiper.swiper.disable();
		}
		if (res == 'stagingSave') {
			proxy.$refs.zSwiper.swiper.enable();
		}
		if (res == 'toStaging') {
			changeNav(3)
		}
	}
</script>

<style lang="less" scoped>
	.item-cover {
		width: 100%;
		height: 100%;
	}

	.bottom-bar {
		box-sizing: border-box;
		padding: 15rpx 0;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 500;
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1px solid #F2F6F9;

		.bbItem {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.bbIcon {
				width: 44rpx;
				height: 44rpx;
				margin: 0 !important;
			}

			.bbText {
				margin-top: 6rpx;
				font-size: 24rpx;
				color: #444D54;
				line-height: 28rpx;

				&.selected {
					color: #166CE5 !important;
				}
			}
		}
	}

	.top {
		width: 100%;
		height: 20%;

		.content {
			position: absolute;
			text-align: center;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			height: 60rpx;
			font-size: 32rpx;
			line-height: 60rpx;
			cursor: none;
			pointer-events: none;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		.i-back {
			width: 44rpx;
			height: 44rpx;
			margin-top: 150rpx;
		}

		.i-title {
			font-size: 36rpx !important;
			color: #ffffff;
		}

		.user-info {
			background-color: #fff;
			border-radius: 20rpx;
			margin-top: 40rpx;
			z-index: 100;
			box-shadow: 4rpx 4rpx 2rpx #f4f6fa !important;

			.i-user,
			.user {
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
			}

			.user {
				background-color: #ffff7f;
			}

			.des {
				margin-left: 15px;
				height: 112rpx;

				.name {
					color: #fff;
					font-size: 40rpx;
				}

				.no {
					font-size: 24rpx;
					color: #fff;
					opacity: 0.7;
				}
			}
		}
	}

	.i-icon {
		width: 112rpx;
		height: 112rpx;
	}

	.i-user {
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
	}

	.redPoint {
		display: inline-block;
		height: 45rpx;
		width: 45rpx;
		line-height: 45rpx;
		text-align: center;
		border-radius: 50rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: #FF1600;
		position: absolute;
		top: 10rpx;
		right: 30rpx;
	}

	.con {
		padding-top: 144rpx;
		border-radius: 30rpx 30rpx 0 0;
		background-color: #fff;
		// height: calc(75% - 5rpx);
		height: 80%;
		box-sizing: border-box;

		.grid-img {
			width: 64rpx;
			height: 64rpx;
		}

		.grid-img-car {
			width: 64rpx;
			height: 68rpx;
		}

		/deep/.uni-scroll-view {
			border-radius: 30rpx 30rpx 0 0;
		}
	}
</style>