<template>
	<view v-if="visible" class="mark">
		<view class="view viewsps">
			<view class="headbox1">
				<image class="imgs" src="/static/news/gengsx.png" mode=""></image>
			</view>
			<!-- <text class="title">{{title}}</text> -->
			<view class="tip">发现新版本:</view>
			<scroll-view class="scroll" scroll-y>
				<view class="item" v-for="(item,index) in contents" :key="index">
					{{item}}
				</view>
			</scroll-view>
			<view v-if="!downloading" class="btns" @click="onSureClick()">
				<!-- <image class="icon" src="https://download.cheshangji.cn/app/upgrade.png"></image> -->
				<view class="" >立即更新</view>
			</view>
			<cmd-progress v-else class="progress" type="circle" stroke-color="#ff6900" :percent="progress"></cmd-progress>
			
			
			<image @tap="hide" class="Closebtns" :src="uploadurl+'static/applet5/images/guanbi@2x.png'" mode=""></image>
		</view>
	</view>
</template>

<script>
	import cmdProgress from '../cmd-progress/cmd-progress.vue';
	import config from "@/utils/config.js";
	// import debug from "@/utils/debug.js";//环境变量
	const  debug = {
		isdebug:false
	}
	export default {
		components: {
			cmdProgress
		},
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			},
			staticUrl1(){
				return this.$store.state.staticUrl1;
			},
			uploadurl(){
				return this.$store.state.uploadurl;
			}
		},
		data() {
			return {
				visible: false,
				progress: 0,
				contents: [],
				downloading: false,
				success: true,
				
				//组件传的参数直接放到里面来吧
				type:"wgt",
				url:"",
				title:"",
				content:"",
				
			}
		},
		props: {
			// type: {
			// 	type: String,//wgt 和 pkg
			// 	default: 'pkg'
			// },
			// url: {
			// 	type: String,//下载的地址
			// 	default: ''
			// },
			// title: {
			// 	type: String,//提示的标题
			// 	default: '版本更新'
			// },
			// content: {
			// 	type: String,//升级提示的主内容
			// 	default: ""
			// }
			isshowmsg:{
				type:Boolean,
				default:false,
			}
		},
		watch: {
			content() {
				var strs = "";
				
				// //var strs = this.content.split('\\n')
				// var strs = this.content.split('。')
				
				if(debug.isdebug){
					//测试环境
					strs = this.content.split('。')
				}else{
					//正式环境
					// strs = this.content.split('\\n')
					
					//统一使用 。号拆开
					strs = this.content.split('。')
				}
				
				for (var i = 0; i < strs.length; i++) {
					this.contents.push(strs[i])
				}
			}
		},
		methods: {
			show() {
				setTimeout(() => {
					if(this.success){
						this.visible = true
					}
				}, 100);
			},
			hide(){
				setTimeout(() => {
					this.visible = false
				}, 100);
			},
			onCancelClick(){
				this.hide()
			},
			onSureClick(){
				var platform = uni.getSystemInfoSync().platform
				if(platform == 'ios'){
					////处理IOS升级 直接打开对应的地址
					//ios 不做在线升级
				}else{
					//处理安卓的
					this.downloading = true
					console.log(this.url)
					var downloadTask = uni.downloadFile({
						url: this.url,
						success: (downloadResult) => {
							this.hide()
							if (downloadResult.statusCode === 200) {
								plus.runtime.install(downloadResult.tempFilePath, {
									force: false
								}, function() {
									plus.runtime.restart();
								}, (e) => {
									console.log(e);
									this.success = false
									uni.showToast({
										title: '安装升级包失败,请重新下载最新的安装包',
										icon: 'none',
										duration:5000,
									})
								});
							}
						}
					});
					downloadTask.onProgressUpdate((e)=>{
						this.progress = e.progress
					})
				}
			},
			//监测更新 夫组件调用的方法
			checkVersionClick() {
				//直接不直接 苹果不做更新
				if(uni.getSystemInfoSync().platform == 'ios'){
					console.log('zheli')
					uni.request({
						url: config.SiteBaseUrl+"user/appVersions",
						data: {
							version: '',
							name: '' ,//没啥用
							user_token:this.$store.state.token,
						},
						success: (result) => {
							this.$store.commit('is_closed',result.data.is_closed)
						}
					});
					return false;
				}
				
				
				// 检测升级
				plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
					var platform = uni.getSystemInfoSync().platform
					//根据当前平台去后台检测版本号
					//这是我的逻辑，自己自定义
				
					if(!debug.isdebug) {
						//正式版的APP更新处理
						
						uni.request({
							// "http://kazuma.jxdsy.cn/static/app/version.json",//
							url: config.SiteBaseUrl+"user/appVersions",
							data: {
								version: widgetInfo.version,
								name: widgetInfo.name ,//没啥用
								user_token:this.$store.state.token,
							},
							success: (result) => {
								let appVersion = widgetInfo.versionCode;//当前版本
								let nesVersion = result.data.data.version;//最新版本
								if (nesVersion > appVersion) {
									if (result.data.data.pkgurl != '' && result.data.data.downloadurl == '') {
										this.type="pkg";
										this.url=result.data.data.pkgurl;
										this.title="1";
										this.content=result.data.data.content;
										this.show()
										
									} else {
									
										this.type="wgt";
										this.url= result.data.data.downloadurl;
										this.title="发现新版本";
										this.content=result.data.data.content;
										this.show()
									}
									
								}else{
									if(this.isshowmsg){
										this.$api.msg("已是最新版本~");
									}
								}
									
							},
							fail: (error) => {
								console.log(error);
							}
						});
					}
					
					
			
				});
			},
		},
	}
</script>

<style lang="scss">
	.mark{
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background: rgba(0,0,0,0.6);
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}
	
	.view{
		width: 80vw;
		// height: 70vw;
		height: 100vw;
		background-color: white;
		border-radius: 15upx;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		align-items: center;
	}
	
	.viewsps{
		position: relative;
		.Closebtns{
			position: absolute;
			z-index: 1003;
			left:50%;
			bottom: -100upx;
			margin-left: -30upx;
			width: 60upx;
			height: 60upx;
		}
	}
	
	.headbox1{
		height: 120px;
		width: 80vw;
		.imgs{
			height: 120px;
			width: 80vw;
			border-radius: 14upx;
		}
	}
	
	.title{
		margin-top: 20upx;
		color: #C40000;
		font-weight: bold;
		font-size: 38upx;
		text-align: center;
	}
	
	.tip{
		margin-top: 20upx;
		margin-left: 30upx;
		align-self: flex-start;
		font-size: 32upx;
		font-weight: 600;
		color: black;
	}
	
	.scroll{
		width: 100%;
		height: 300upx;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	
	.item{
		margin-left: 50upx;
		text-align: left;
		font-size: 30upx;
	}
	
	.btns{
		
		// display: flex;
		// flex-flow: row nowrap;
		// justify-content: center;
		// align-items: center;
		margin-bottom: 10upx;
		
		width:283upx;
		height:60upx;
		line-height: 60upx;
		text-align: center;
		border-radius:30px;
		background: #FF6900;
		font-size:28upx;
		color:#FFFFFF;
		
	}
	
	.icon{
		width: 45upx;
		height: 45upx;
		margin-right: 10upx;
	}

	
	.progress{
		margin-bottom: 20upx;
	}
	
</style>
