<!--
based on 
 https://ext.dcloud.net.cn/plugin?id=672
 https://github.com/steffenx/uniapp_popup
  
 传值
 *type: success warn info fail loading（string），默认info
 *content: 内容（string）
 *duration: 消失时间（Number），默认2000
 *distance: 弹窗间距，默认128，可设为0代表重叠
 *clickable: 是否点击消失（Boolean），默认false
 -->
<template>
	<view class="popup_list">
		<view v-for="(toast,index) of popup_list" :id="toast.uuid" :key="toast.uuid" >
			<view class="mpopup" :style="{ background: toast.color ,top:index*toast.distance+50+'px'}" :class="[toast.animator,'mpopup-'+toast.type]" @click="close(toast.uuid,index)">
				<view class="icon" ></view>
				<text class="text" >{{ toast.content }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				popup_list:[],//弹窗数组
			}
		},
		props:{
		},
		methods:{
			open:function(toast){
				//生成uuid
				let uuid=this.guid()
				toast.uuid=uuid
				//添加动画
				toast.animator='fade_Down'
        
				toast.clickable = toast.clickable || false //判断是否可点击消失/可控制消失
        toast.duration = toast.duration || 1500
				toast.distance = toast.distance || 128 // 弹窗间距
        toast.type = toast.type || 'info'
        
				//添加进数组
				this.popup_list.push(toast)
		
				if(!toast.clickable){
					this.disappear(toast.uuid,toast.duration)
				}//可点击消失
				else{
					this.$emit('uuidCallback',toast.uuid)
				}
				
			},
			//自动消失
			disappear:function(uuid,duration){
				//退出动画之后，短暂延迟后移除本元素
				this.fade_out_animator(uuid,duration).then(res=>{
					setTimeout(()=>{
						for(let i=0;i<this.popup_list.length;i++){
							if(this.popup_list[i].uuid==res){
								//移除本元素
								this.popup_list.splice(i,1)
								this.$forceUpdate()
							}
						}
					},250)
				})
			},
			fade_out_animator:function(uuid,duration){
				//duration秒后退出
				if(!duration||typeof(duration)!='number'){duration=1500}
				return new Promise(res=>{
					setTimeout(()=>{
						for(let i=0;i<this.popup_list.length;i++){
							if(this.popup_list[i].uuid==uuid){
								//添加退出动画
								this.popup_list[i].animator='fade_Top'
								res(uuid)
							}
						}
					},duration)
				})
			},
			//可控制关闭的弹出框
			close:function(uuid,ind){
				if(ind){
					if(!this.popup_list[ind].clickable){return}
				}
				this.remove_element(uuid).then((res)=>{
					setTimeout(()=>{
						for(let i=0;i<this.popup_list.length;i++){
							if(this.popup_list[i].uuid==res){
								//移除本元素
								this.popup_list.splice(i,1)
								this.$emit('closeCallback',uuid)
								this.$forceUpdate()
							}
						}
					},250)
				})
			},
			//控制移除元素
			remove_element:function(uuid){
				return new Promise(res=>{
					for (var i = 0; i < this.popup_list.length; i++) {
						if(this.popup_list[i].uuid==uuid){
							this.popup_list[i].animator='fade_Top'
							res(uuid)
							break
						} 
					}
				})
				
			},
			//更新
			update:function(update_list){
				for (var i = 0; i < this.popup_list.length; i++) {
					if(this.popup_list[i].uuid==update_list.uuid){
						this.popup_list[i].type=update_list.type;
						this.init(this.popup_list[i])
						this.popup_list[i].content=update_list.content
						break
					} 
				}
			},
			//生成uuid
			guid:function() {
			    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
			        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8)
			        return v.toString(16)
			    })
			}
		}
	}
</script>

<style lang="scss">
	.mpopup{
		display: flex;
		flex-direction: column;
		text-align: center;
		justify-content: center;
		align-items: center;
		min-height: 45px;
		max-width: 80%;
		transition :all .5s;
		position: fixed;
    right:0;
    left:0;
		margin: 0 auto;
		border-radius: 5px;	
		z-index:998;
    @media screen and (min-width: 751px) { max-width: 500px }
		
    .icon{
			display: flex;
			text-align: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			margin: 20px;
			background: no-repeat center center / contain;
		}
		.text{
			margin: 0px 20px 20px 20px;
			font-size: 16px;
		}
	}
	.mpopup-success{
		background: #f0f9eb;
		border: 1px solid #e1f3d8;
		color: #67c23a;
		.icon{
			background-image: url('data:image/png;base64,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');
		}
	}
	.mpopup-fail{
		background: #fef0f0;
		border: 1px solid #fde2e2;
		color: #f56c6c;
		.icon{
			background-image: url('data:image/png;base64,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');
		}
	}
	.mpopup-warn{
		background: #fdf6ec;
		border: 1px solid #faecd8;
		color: #e6a23c;
  	.icon{
			background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAHLElEQVR4nOWba2xURRTHfzO73W0trQ8oBEWsRlF8RBQTowLxRXxElGgQjRUfMQpoVEh8xS/yBTBI0A8o8oWHwWciGqPRhKhJozHGDxoDioSXBhAUqTzqttu9Y+bc2e2Wu9su23uXpftPJtCzc++Zc+6Zc2bOnFHGUBy/AF8DdYAHXAX8AWwEmoEEEHO//wtkAOP+bnB/wygU16IYj+Fs4EJghHt6mON9GOjG8DeaTSi24/ELRrjvFR7/AT2utwZOzuN3xI2v2fG2/VJAGrgWGF9UQuIBSrkwbkD+G6cA01BcB1wE1NOfov2hg6IVwxUijJKWEnUbvgQ+QdMuwqnA82UjPAXEGY3mUeq5F8P5IkS56BWwHpiIYSJJnkGxmRRvo1gJ/BnGsHWAcqwwtJBmKQm20MBLInxUsO9uYAFJttDDUgwjBmsNx64A5eabkafn4rGRDPMxNA7qq5cKn/cw4emJN3pMxuKVNzVKV4BxDs+IYU6iju+A5ShawpyTJcPnORKPFST4jnquLucDlK4A7bxrmidppJ04Vw7g2CoDP+pcSZJv6GG2c54RKCAh/vhVDvCauM5qED6L3inwBj286sJvSShNATEJcWvp5KmqEvxoKFlNPEWaVTLmEtC/ArKmZFiP5n556fGY78cCJR/sQRkzA4+3fwUkRaNrgOmB36of02Xsyf7HWVgBdj79LHN+MQlmFelVPpRbNXa6lonAsrT4rVlsYpHIUiRCFN8LvM4dpPiIltyaPhwot0a3/46+xvdgu7/1X10XsnO1U/Yv2ZdMZw4fB34XBXyZ95dxA2vidH5lG10kS3UmJSPjwulN70Hr3f5TW9fBhjZfAWFbW0YsIcV4zuEQe45eMCnzeF5nz+0OWmlnOJOEFrbXt7u6kWPhrp196R+Mgf27/NV/mMgKu592djBFFJKn5DgT8pj5y9t7iDEp0nBXd1qARHIEmF0B8qCRleNUJnMaM6yq81+pxeyyLUEjdayIQuY+8HoCpIK0MKFE2pVoGnOrRWVJxmnJb8/iSaphaMLjFDyRkWzTedqws2/ekBW+F/MwLkFj+lrAbPH/Qx2GJmLMEWcftwroyi1E5gx54XHWbj92bgqcLRm5y0gzLtB56MLKKvFPuyXifTUkfBb32fVAXFKLGa4PMT1a/fDTejfYdLqmgZFoJlT1Pj8KKC4FWjR/MZU4qur3+WHCj3qaZq7XaNFEbcLjck0TY4h4FVqVULIrPUOT4dyaMv98KFrtxnB44IfawShN+DvwEwn1VgGNNayARh1yxu+Eg3Z52VrFkVpXQKdVwL4AuXaw1ypgew0rYKtVwM4AuXaw0+4Ffq5Z8TWbNJ18jcGr6HJYFThuKkSLjL/sBj0ru80J7sPjp4oqwKQDJEx3gBQZ/ITIj1Z2LVV8zbRTKf4283RgG6T29tI6d8M/28Ms2usf3SLzV1b2uFsHvgM82e9DYcGeQHWl4PMbYdwj/ks3r4R0FwOd5YeM920+VJk33VeJ8RuG8yrCWrnlV3YmWKWcVMG6IyV1huNsHkRLTW9CyMsrNgDjaombXGuocNGVYbkc+yetBazOke1x0b6KnA5liy3zLUBXTAkH0Yxy5dR9jsYsYVmge9jICm+5NTbBScP8/5dZ6VkGluCR6j0ZyjspxWMJhoORsvdckcQls+DuXX67uM2nFanjCQ2aDmK8IubvmhbT622HUTwR6SDsWeTw02HSGqhrgkQzTH4LTm0h0lDsl/PPJUNKIp9r8T6hx6/eeksKIuNMjMwkC9UBxeLR+QAtVvc9O3gnWCKTXw6RFbiRGXRIWIyHrgSr8L93ww8vwBWLfNoPz8H+PdFkJ32l9tDCDHl/z9FFUt8e9UDMddrMTDzeDb0uOFsjaOf8GHcms+snX/hYBLzS8plncgHvS7j1+vJQ5tMCD3kSLOycXIbH06FbQX4kwOWlowiDnrx3GUnmy6WcAjzictmp0AAbRAHzSDOaJDNDHZzJ45FPCxuGtcSYL3wOFeYRL7oB8XKVI/dIZVWG2wJ9qhEqt675hBgP5Erpi+y2C/njYA/FNLpZLSEs7ErOMJFN8RpWkeT2Ql+8kHgDo0sKDR/iLBbn5m01IetYu+USzcskeDhnCQOgNAXYqHAKMJYXSHGXXHSslgPVrKBxOujmTs7kebmOWSDnUgilKUDl3caM86EskjJsCPQ7HvDE7DdwARNpYb3cQT2G8vvyZrTNHRxhKl20oeUy7fGBZifdtHGIqdSzrRxpyndp/sZlnbuZ+2KFD1j2CU8l95DX5a7tlhFKy1dAr4nZq8sL5Van4SVgj1DDXjf42ON4nI9iYe5YbxD+qNgqoBx0YFhAHYvlzrbHzWS4FTXIAkzDb2g+Q/MpSpK3XdV5eboXXWi+QPEFPcxzZnoLirEYWoEzXUyx26L86/M22Ha4C/o7MPyO5nMybMxljMLOFwD/A16F+qoDPA/VAAAAAElFTkSuQmCC');
		}

	}
	.mpopup-info{
		background: #edf2fc;
		border: 1px solid #ebeef5;
		color: #909399;
		.icon{
			background-image: url('data:image/png;base64,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');
		}
	}
	.mpopup-loading{
		background: #e2f5ff;
		border: 1px solid #ceeeff;
		color: #5cbaff;
		.icon{
			background-image: url('data:image/png;base64,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');
			animation: rotate360 1.5s ease infinite;
		}
	}
	.fade_Down{
		animation: fadeInDown 0.6s both;
	}
	.fade_Top{
		animation: fadeInTop 0.5s forwards;
	}
	/*从上到下*/
	@keyframes fadeInDown
	{
	    from {
	        opacity: 0;
	        -webkit-transform: translate(0,-100px); 
	        transform: stranslate(0,-100px); 
	    }
	    to {
	        opacity:1;
	        -webkit-transform: translate(0,10px);
	        transform: stranslate(0,10px);
	    }
	}
	/*从下到上*/
	@keyframes fadeInTop
	{
	    from {
	        opacity:1;
	        -webkit-transform: translate(0,10px); 
	        transform: stranslate(0,10px);
	    }
	    to {
	
			opacity: 0;
			-webkit-transform: translate(0,-100px);
			transform: stranslate(0,-100px);
	    }
	}
	@keyframes rotate360
	{
		from {
			transform: rotate(0);
		}
		to{
			transform: rotate(360deg);
		}
	}
</style>
