<template>
	<view>
		<!-- 遮罩滚动锁定组件 -->
		<page-meta :page-style="'overflow:'+(popupShow?'hidden':'visible')"></page-meta>
		<uni-popup ref="upgradePopup" background-color="#fff" class="upgradePopup" @change="upgradePopupChange"
			:mask-click="false">
			<view class="rocket-content">
				<view class="rocket-img"></view>
			</view>
			
			<view class="content-v-des">
				<view class="content-v">v{{ appUpgeadeObj.versionName }}</view>
				<view class='content-text'>发现新版本</view>
				<view class="title">
					<!-- 更新内容 -->
					<scroll-view class="info_desc_scroll"  scroll-y="true">
						<rich-text class='scroll-text' :nodes="appUpgeadeObj.content"></rich-text>
					</scroll-view>
				</view>
			</view>
			
			
			<view class="update-content">
				<text space="nbsp">{{appUpgeadeObj.updateContent}}</text>
			</view>
			<view v-if="updateButtonBoolean" class="update-button">
				<button class="not-updated-button" :disabled="noUpdatedDisabled"
					v-show="appUpgeadeObj.forceUpdate == false" type="warn" @tap.stop="noUpdate">暂不更新</button>
				<button v-show='appUpgeadeObj.type == "ANDROID"' class="updated-button" type="warn" @tap.stop="upgradeNowAndroid">立即升级</button>
				<button v-show='appUpgeadeObj.type == "IOS" ' class="updated-button" type="warn" @tap.stop="upgradeNow">立即升级</button>
			</view>
			<!-- v-if="progressBolean" -->
			<!-- {{progressBolean}} -->
			<view v-if="progressBolean" class="progress-bar">
				<progress border-radius="90" font-size="24" activeColor="#DB4032" backgroundColor="#f0f0f0" show-info
					:percent="progressData.percent" stroke-width="15" />
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			appUpgeadeObj: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		components: {

		},
		data() {
			return {
				popupShow: false,
				updateButtonBoolean: true, // 按钮的显示和隐藏
				// 进度条数据
				progressData: {
					percent: 0, //百分比

				},
				progressBolean: false, // 进度条的显示和隐藏
				noUpdatedDisabled: false,
				isWGT:false,// 是否wgt资源包

			};
		},
		watch: {
			'progressData.percent': {
				handler(newdata) {
					if (newdata) {
						this.progressBolean = true
						this.updateButtonBoolean = false
					}
					if (newdata == 100) {
						this.noUpdatedDisabled = false
					}
				},
				immediate: true,
			},
		},
		beforeMount() {
			uni.hideTabBar()
		},
		mounted() {
			this.$refs.upgradePopup.open('center')
		},
		methods: {
			// 升级弹窗的change事件
			upgradePopupChange(e) {
				this.popupShow = e.show
			},
			// 暂不更新按钮事件
			noUpdate() {
				uni.showTabBar()
				this.$emit('pause')
			},
			// 立即升级事件
			upgradeNow() {
				const that = this
				that.noUpdatedDisabled = true
				
				let platform = uni.getSystemInfoSync().platform
				
				const wgtType=that.containsWGTExtension(that.appUpgeadeObj.downloadUrl)
				that.isWGT=wgtType
				const index = that.appUpgeadeObj.downloadUrl.indexOf('apps.apple.com')
				console.log(that.isWGT,'that.isWGT3333')
				if(that.isWGT==true){
					that.updateWgt(that.appUpgeadeObj.downloadUrl,that.appUpgeadeObj.downloadUrl.versionName)
				}else{
					if (platform == 'ios' && index !== -1) return plus.runtime.openURL(that.appUpgeadeObj.downloadUrl);
				}
				
			},
			upgradeNowAndroid(){
				let that = this
				that.noUpdatedDisabled = true
				let platform = uni.getSystemInfoSync().platform
				const index = that.containsApkExtension(that.appUpgeadeObj.downloadUrl)
				const wgtType=that.containsWGTExtension(that.appUpgeadeObj.downloadUrl)
				console.log(wgtType,'that.isWGT')
				that.isWGT= wgtType
					if(index==true){
						plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
							var downloadTask = uni.downloadFile({
								url: that.appUpgeadeObj.downloadUrl,
								success: (downloadResult) => {
									if (downloadResult.statusCode === 200) {
										plus.runtime.install(downloadResult
											.tempFilePath, {
												force: false
											},
											function() {
												plus.cache.clear();
												plus.runtime.restart();
											},
											function(err) {
												console.log('err--------安装升级包失败', err)
												uni.showToast({
													title: '安装升级包失败',
													icon: 'none'
												});
											});
									}
								},
							});
							downloadTask.onProgressUpdate((res) => {
								this.progressData.percent = res.progress
							});
						})
					}else{
						console.log(333,'indexw')
						//跳转到应用商店
						let appurl = "market://details?id=io.dcloud.ddh" 
						plus.runtime.openURL(appurl)
					}
				// }
				
				
			},
			//wgt更新
			updateWgt(downloadUrl,newVersion){
						uni.showModal({
							title: '已发现新版本',
							content: '确认更新？',
							showCancel: false,
							success:function(res){
								uni.setStorageSync('checkVersions',newVersion)
								if(res.confirm){
									uni.downloadFile({
										url: downloadUrl,
										success: (downloadResult) => {
											plus.runtime.install(downloadResult.tempFilePath,{force: true},function(){	
													//应用热重启，重新启动进入首页
													plus.runtime.restart();
													uni.showModal({
														title: '安装成功！',
														content: '已重新进入应用',
														showCancel: false,
														success:function(res){
															if(res.confirm){
																		
																console.log('用户点击确定');
															}else if(res.cancel){
																console.log('用户点击确定');
															}
														}
																																									
													}) 
											},
											function(e){
												console.log(e,'安装失败')
												uni.showModal({
													title: '安装失败',
													icon: 'none'
												})
											})
										},
										fail: (err) => {
											uni.showToast({
												title: '下载失败',
												icon: 'none'
											})
										}
									})
								}else if(res.cancel){
									uni.showToast({
										title: '已取消',
										icon: 'none'
									})
								}
							}
						})
			},
			containsApkExtension(url) {
			  return /\.apk$/i.test(url);
			},
			containsWGTExtension(url) {
			  return /\.wgt$/i.test(url);
			}
		}
	};
</script>

<style scoped lang="scss">
	.upgradePopup {
		z-index: 999;

		/deep/.uni-popup__wrapper {
			width: 602rpx;
			background-image: url('./imgs/upgradeBackground.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			border-radius: 15rpx;
			// border: solid 1px red;
			position: relative;
			display: flex;
			flex-direction: column;

			.rocket-content {
				height: 368rpx;

				.rocket-img {
					background-image: url('./imgs/rocket.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					width: 152rpx;
					height: 212rpx;
					position: absolute;
					top: -105rpx;
					left: 225rpx;
				}
			}
			.content-v-des{
				position: absolute;
				left: 40rpx;
				top: 30rpx;
				z-index: 3;
				.content-v{
					font-size: 75rpx;
					color:#FFFFFF;
				}
				.content-text{
					padding-top: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-size: 42rpx;
					color:#333333;
				}
				.title {
					margin-top:20rpx;
					display: flex;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 16px;
					color: #999999;
					line-height: 28px;
					text-align: left;
					font-style: normal;
					.info_desc_scroll{
						width: 450rpx;
						height: 200rpx;
						box-sizing: border-box;
						line-height: 1.3;
						.scroll-text{
							padding-bottom:6rpx;
						}
					}
				}
			}
			
			
			

			.update-content {
				margin-top: 44rpx;
				// border: solid 1rpx red;
				padding-left: 100rpx;
				display: flex;
				flex-direction: column;

				uni-text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #989899;
					margin-bottom: 8rpx;
				}
			}

			.update-button {
				// border: solid 1rpx yellow;
				display: flex;
				width: 482rpx;
				margin: 0 auto;
				margin-top: 48rpx;

				uni-button {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin: 0rpx;
					flex: 1;
					height: 80rpx;
					margin-bottom: 80rpx;
				}

				.not-updated-button {
					margin-right: 40rpx;
				}
			}

			.progress-bar {
				width: 538rpx;
				// border: solid 1px red;
				margin: 0 auto;
				margin-top: 96rpx;
				margin-bottom: 102rpx;

				uni-progress {
					.uni-progress-bar {
						border-radius: 50rpx;

						.uni-progress-inner-bar {
							border-radius: 50rpx;
						}
					}
				}
			}
		}
	}
</style>