<template>
	<view>
		<!--版本更新弹窗-->
		<wskj-modal :show="updateShow" @confirm="onConfirmUpdate" @close="updateShow = false" @cancel="updateShow = false">
			<view class="updateVer-box">
				<!-- 升级内容 -->
				<view class="center fw-600">
					<text>版本更新</text>
				</view>
				<view class="center mt-20">
					<text>检测到有新版本，您需要更新才可继续使用v:{{ newVersion }}</text>
				</view>
			</view>
		</wskj-modal>

		<!--进度条弹窗-->
		<wskj-modal :show="progress" :closeOnClickOverlay="false" :showConfirmButton="false" :showCancelButton="true" @cancel="onPercentageModalCancel">
			<view class="progress-modalbox">
				<view class="center fw-600">
					<text>下载中</text>
				</view>
				<view class="mt-30">
					<u-line-progress style="width: 100%;" :percentage="downLoadPercentage" activeColor="#FF0000"
						height="20"></u-line-progress>
				</view>
			</view>
		</wskj-modal>
	</view>
</template>

<script>
	export default {
		props: {
			time: {
				type: Number,
				default: 0
			},
			packageUrl: { // 下载安装包地址
				type: String,
				default: ''
			},
			newVersion: { // 新版本号
				type: String,
				default: ''
			},
			force: { // 是否强制更新
				type: [Boolean, Number],
				default: false
			}
		},
		data() {
			return {
				updateShow: false, // 是否确认更新弹窗
				downloadTask: null, // 下载任务
				progress: false, // 下载进度弹窗
				downLoadPercentage: 0 // 下载进度
			};
		},
		watch: {
			time(newValue, oldValue) {
				if(this.packageUrl) {
					if(!this.force){ // 不强制更新
						this.updateShow = true
					} else { // 强制更新
						this.updateShow = false
						this.downLoadApp()
					}
				}
			}
		},
		methods: {
			// 点击确认更新
			onConfirmUpdate() {
				this.updateShow = false
				this.downLoadApp()
			},
			// 下载APP
			downLoadApp() {
				this.progress = true

				this.downloadTask = uni.downloadFile({ //执行下载
					url: this.packageUrl, // 下载地址
					//下载成功  onProgressUpdate监听到下载100这里才执行
					success: downloadResult => {
						// console.log(downloadResult)
						this.progress = false // 关闭下载进度弹窗

						if (downloadResult.statusCode == 200) {
							uni.showModal({
								title: '',
								content: '更新成功，确定现在重启吗？',
								showCancel: false,
								confirmText: '重启',
								confirmColor: '#7737FD',
								success: (res) => {
									if (res.confirm == true) {
										plus.runtime.install( //安装
											downloadResult.tempFilePath, {
												force: true
											},
											function(res) {
												utils.showToast(
													'更新成功，重启中');
												plus.runtime
													.restart(); // 重启
												// plus.runtime.quit(); 退出
											}
										);
									}
								}
							});
						} else {
							this.$u.toast('下载失败')
						}
					},
					fail: (err) => {
						// this.$u.toast('下载失败')
						this.progress = false // 关闭下载进度弹窗
					},
				});
				// 监听下载进度
				this.downloadTask.onProgressUpdate((res) => {
					// console.log('下载进度' + res.progress);
					// console.log('已经下载的数据长度' + res.totalBytesWritten);
					// console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
					this.downLoadPercentage = res.progress
				});
			},
			// 下载进度弹窗取消
			onPercentageModalCancel() {
				// console.log('取消')
				if (this.enforce) {
					this.$u.toast('本次更新不可取消')
				} else {
					this.downloadTask.abort()
					this.progress = false
					this.$u.toast('取消下载')
				}
			},
		},
	};
</script>

<style scoped>
	.updateVer-box {
		background-color: #FFF;
		padding: 0 40rpx;
		border-radius: 20rpx;
		width: 500rpx;
	}

	.progress-modalbox {
		width: 500rpx;
		padding: 30rpx 40rpx;
		background-color: #FFF;
		border-radius: 20rpx;
	}
</style>