<template>
	<view class="page-home">
		<view class="top_bg"></view>
		<view class="content">
			
			<view class="close_wrapper">
				<image class="image" src="../static/download_close.png" mode="aspectFit"></image>
			</view>
			<view class="title">app下载</view>
			<view class="logo_wrapper">
				<image class="image" src="/static/logo.png" mode="aspectFit"></image>
			</view>
			<view class="appname_wrapper">
				<image class="image" src="../static/download_title.png" mode="aspectFit"></image>
			</view>
			<view class="des_wrapper">开启智慧党建学习之旅</view>
			<view class="download_type_item" @click="gotoDownloadIOS">
				<view class="icon_wrapper">
					<image class="image" src="/static/home_apple.png" mode="aspectFit"></image>
					<view class="item_title">iOS版</view>
				</view>
				<view class="item_version">v1.0.1</view>
			</view>
			<view class="download_type_item" @click="gotoDownloadAndroid">
				<view class="icon_wrapper">
					<image class="image" src="/static/home_anzhuo.png" mode="aspectFit"></image>
					<view class="item_title">Android版</view>
				</view>
				<view class="item_version">v1.0.1</view>
			</view>
			<!-- <view class="download_normal">
				<view class="download_type_item" style="justify-content: center;">立即下载</view>
				<view class="download_version">v1.0.1</view>
			</view> -->
		</view>
		<view class="bottom_wrapper">
			<view class="bottom_item_wrapper">
				<view class="bottom_item" @click="goto(1)">应用权限</view>
				<view class="line"></view>
				<view class="bottom_item" @click="goto(2)">隐私政策</view>
				<view class="line"></view>
				<view class="bottom_item" @click="goto(3)">产品功能</view>
			</view>
			<view class="bottom_title">开发者:大有国信(北京)技术有限公司</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				apkUrl: "https://app.dyguoxin.com/android/smartPen.apk",
				iosURl: "https://testflight.apple.com/join/2etMUNQS",
			}
		},
		onLoad() {

		},
		methods: {
			gotoDownloadAndroid() {
				
				if (process.env.UNI_PLATFORM === 'h5') {
				    // 这里是H5环境下使用的代码
					console.error('h5')
					window.location.href = this.apkUrl;
				} else {
				    // 这里是APP环境下使用的代码
					this.redirectToStore()
				}
				
			},
			gotoDownloadIOS() {
				if (process.env.UNI_PLATFORM === 'h5') {
				    // 这里是H5环境下使用的代码
					window.location.href = this.iosURl;
				} else {
				    // 这里是APP环境下使用的代码
					this.redirectToStore()
				}
			},
			safeAreaInsets() {
				return uni.getSystemInfoSync().safeAreaInsets.bottom
			},
			redirectToStore() {
				
				let platform = plus.os.name.toLocaleLowerCase(); 
			    if (platform.toLowerCase() === 'android') {
			        if (this.apkUrl) {
			            // 如果有提供的APK链接，则尝试直接下载并安装
			            plus.runtime.openURL(this.apkUrl);
			        } else {
			            // 否则，打开Google Play或其他市场的链接
			            plus.runtime.openURL(`market://details?id=${appId}`);
			        }
			    } else if (platform.toLowerCase() === 'ios') {
			        plus.runtime.openURL(this.iosURl);
			    }
			},
			//全屏高
			getCurrentHeight() {
				var h = 0;
				let device = uni.getSystemInfoSync();
				let screenHeight = device.screenHeight;
				let statusBarHeight = device.statusBarHeight;
				let safeAreaInsets = device.safeAreaInsets.bottom
				h = screenHeight - statusBarHeight;
				h -= 44;
				h -= 60;
				if (isLoadMore.value) {
					h -= 40;
				}
				return h - safeAreaInsets + "px";
			},
			goto(index) {
				
				var url = ""
				if (index == 1) {
					url = "/pages/permission"
					
				} else if (index == 2) {
					url = "/pages/privacy"
				} else {
					url = "/pages/function"
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-home {
		display: flex;
		position: relative;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height:100vh;
		background-color: #F5F5F5;
		.top_bg {
			display: flex;
			position: absolute;
			width: 100%;
			height: 310px;
			top: 0;
			left: 0;
			background: linear-gradient(to bottom, #BC1212, #f5f5f5);
			z-index: 0;
		}
		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			flex-direction: column;
			width: 100%;

			.title {
				margin-top: 54px;
				color: #FFE8C3;
				font-size: 17px;
			}

			.logo_wrapper {
				margin-top: 60px;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 72px;
				height: 72px;
				background: #ffffff;
				border-radius: 10px;

				.image {
					width: 42px;
					height: 47px;
				}
			}

			.appname_wrapper {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 88px;
				height: 20px;
				margin-top: 22px;	
				.image {
					width: 88px;
					height: 20px;
				}
			}
			.des_wrapper {
				margin-top: 21px;
				font-size: 16px;
				color: #757373;
			}

			

			.close_wrapper {
				display: flex;
				position: absolute;
				top: 52px;
				left: 10px;
				width: 44px;
				height: 44px;

				.image {
					width: 20px;
					height: 20px;
				}
			}

			.download_type_item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-radius: 10px;
				height: 60px;
				width: 60%;
				background: linear-gradient(to right, #D82222, #B81F1F);
				margin-top: 20px;
				align-items: center;
				color: #ffffff;

				.icon_wrapper {
					display: flex;
					flex-direction: row;
					margin-left: 19px;

					.image {
						width: 20px;
						height: 24px;
					}

					.item_title {
						color: #ffffff;
						margin-left: 14px;
					}
				}

				.item_version {
					color: #F3AFAF;
					margin-right: 14px;
				}
			}

			.download_normal {
				display: flex;
				flex-direction: column;
				width: 100%;
				align-items: center;

				.download_version {
					color: #D67C7C;
					margin-top: 10px;
				}
			}


		}

		.bottom_wrapper {
			display: flex;
			width: 100%;
			flex-direction: column;
			margin-bottom: 30px;
			.bottom_item_wrapper {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-bottom: 11px;

				.bottom_item {
					color: #626B76;
					font-size: 12px;
				}

				.line {
					width: 1px;
					height: 10px;
					background-color: #626B76;
					margin-left: 8px;
					margin-right: 8px;
				}

			}

			.bottom_title {
				display: flex;
				width: 100%;
				flex-direction: column;
				align-items: center;
				color: #626B76;
				font-size: 12px;
			}
		}
	}
</style>