<template>
	<div class="mu-pop" v-if="isShow" @click="handleClick">
		<div class="mu-pop-transparent"></div>
		<div>
			<div class="mu-pop-module" v-if="type=='success'">
					<div class="mu-pop-header">
						<span :class="iconClass"></span>
						<span class="mu-pop-title">{{title}}</span>
					</div>
					<div :class="bgClass"></div>
					<div class="mu-pop-content" v-html="content"></div>
			</div>
		<div :class="[isForibid ? 'mu-notice-module' : 'mu-notice-module-foribid', 'mu-pop-module']" v-else-if="type=='notice'">
				<div class="bg-notice"></div>
				<div class="mu-notice-title">
					{{titleText}}
				</div>
				<div class="mu-notice-content"><p v-html="content"></p></div>

				<div v-if="isForibid" class="mu-notice-btn">
					<mu-raised-button class="mu-notice-btn-content hide-btn ui-border" :label="btnHide" v-if="showHideBtn" @click="handleHideBtn()" ></mu-raised-button>
					<span style="display:inline-block;width:6px;" v-if="showHideBtn"></span>
          <mu-raised-button class="mu-notice-btn-content" :label="btnContent" @click="close()" primary></mu-raised-button>
        </div>
			</div>
		</div>
	</div>
</template>
<script>

import MuRaisedButton from "../raisedButton";

	export default {
		name:"mu-pop",
		components:{
			'mu-raised-button':MuRaisedButton
		},
		data(){
			return {
				check:this.checked,
			};
		},
		props:{
			title:{
				type:String,
				default:"提交成功"
			},
			iconClass:{
				type:String,
				default:"m-sys-checkbox-active"
			},
			bgClass:{
				type:String,
				default:"bg-success"
			},
			content:{
				type:String,
				default:'感谢您的反馈和意见，我们将持续改进，为您提供更好地产品体验和帮助~'
			},
			btnContent:{
				type:String
			},
			btnHide:{
				type:String,
				default:'不再提示',
			},
			type:{
				type:String,
			},
			isShow:{
				type:Boolean
			},
			isForibid:{
				type:Boolean
			},
			showHideBtn:{
				type:Boolean,
				default:false,
			},
			titleText: {
				type: String,
				default: '公告'
			}
		},
		methods:{
			close(e) {
				var self = this;
				setTimeout(() => {
          self.isShow = true;
          self.$emit('handleclick');
        }, 200);
			},
			handleClick(){
				this.$emit('close-pop');
			},
			handleHideBtn(){
        setTimeout(()=>{
        	this.isShow = true;
        	this.$emit('handle-force-hide');
        }, 200);
			}
		},

	}
</script>
<style lang="less">
.ui-border{
  border: 1px solid #1695F0;
  border-radius:120px !important;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .ui-border{
      position: relative;
      border: 0
  }

	.ui-border:before {
	    content: "";
	    width: 200%;
	    height: 200%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    border-radius:120px !important;
	    border:1px solid #1695F0;
	    -webkit-transform: scale(0.5);
	    -webkit-transform-origin: 0 0;
	    padding: 1px;
	    -webkit-box-sizing: border-box;
	}

}
	.mu-pop-transparent{
		top:0;
		left:0;
		bottom:0;
		right:0;
		position: fixed;
    z-index: 1000;
    opacity:0.4;
    background:#000000;
	}
.mu-pop-module{
		background:#ffffff;
		border-radius:8px;
		width: 250px;
    height: 324px;
		position:absolute;
		margin:auto;
		left:0;
		right:0;
		bottom:0;
		top:0;
		z-index:1001;
}
.hide-btn {
	color:#1695F0 !important;
}
.mu-notice-module{
	width: 300px;
	height: 338px;
}
.mu-notice-module-foribid{
	height: 290px;
	width: 300px;
}
.mu-pop-header{
	padding-top:30px;
	margin:0 auto;
	width:100px;
	.m-sys-checkbox-active{
		margin-right:4px;
		&:before{
			color:#8bdb44;
			font-size:18px;
		}
    .mu-notice-btn .mu-raised-button-full{
      width:auto;
    }
    .mu-notice-btn .mu-raised-button{
      border-radius: 100px;
      height:42px;
      line-height:42px;

    }
    .mu-notice-btn .mu-raised-button-label{
      font-size:16px;
      padding-right: 52px;
      padding-left: 52px;
    }
	}
	.mu-pop-title{
		font-size:18px;
		color:#8bdb44;
	}
}
.bg-success{
	background:url(./success.svg) no-repeat !important;
	background-size: cover;
	width:142px;
	height:96px;
	margin:43px auto 39px;
}
.bg-notice{
	background:url(./notice.svg) no-repeat !important;
	background-size: cover;
	width: 95px;
  height: 80px;
	margin: 20px auto 28px auto;
}
.mu-pop-content{
	font-size:15px;
	color:#3a4247;
	margin:auto 16px;
}
.mu-notice-title{
	font-size: 22px;
	color: #3a4247;
	line-height: 24px;
	text-align: center;
	font-weight: 500;
}
.mu-notice-content{
	font-size:16px;
	color:#6b7175;
	line-height:20px;
	text-align:justify;
	margin: 14px 20px 26px 20px;
	display:flex;
	height: 80px;
	text-indent: 2em;
	align-items: center;
}
.mu-notice-btn{
	text-align: center;
}
.mu-notice-btn-content{
	width: 120px;

	height:42px !important;
	display:inline-block;
	background: #1695f0;
	border: 0 solid #1695f0;
	border-radius: 100px !important;
	padding: 12px 52px;
	font-size: 16px !important;
	color: #fff;
	line-height: 18px;
	font-weight: 200;
	.mu-raised-button-label{
		font-size: 16px;
		font-weight: 500;
	}
}
</style>
