<template>
  <view class="notificationMod" @click="onConfirm" v-if="isPopup">
      <view :class="isContent?'showContent notification':'hideContent notification'" catchtap="">
          <view class="top">
              <view class="img" v-if="isImg"><image :src="tipsImg" mode="widthFix"/></view>
              <view class="title" v-if="title">{{title}}</view>
          </view>
          <view class="content">
              <rich-text :nodes="content"></rich-text>
          </view>
          <view class="btn" @click="onConfirm">{{btnText}}</view>
          <view class="tipsIcon" @click="onConfirm" v-if="isCloseIcon">
              <slIcon name="icon-close2" color="#fff" size="70rpx"/>
          </view>
      </view>
  </view>
</template>

<script>
import slIcon from "@/sdk/sl-icon/index.vue"
  export default {
	components:{
		slIcon
	},
    props:{
      isShow:{
        type:Boolean,
        default:false
      },
      title:{
        type:String,
        default:""
      },
      content:{
        type:String,
        default:""
      },
	  isImg:{
		 type:Boolean,
		 default:false 
	  },
	  isCloseIcon:{
		  type:Boolean,
		  default:false 
	  }
    },
    data(){
      return {
        btnText:'我知道了',
        tipsImg:'https://simlove-ma.oss-cn-shenzhen.aliyuncs.com/miniprogram/exclusive/normal.png',
        isPopup:false,
        isContent:false
      }
    },
    watch:{
      isShow(e){
        if(e){
          this.showPopup()
        }else{
          this.closePopup()
        }
      }
    },
    methods:{
      closePopup(){
          this.isContent=false
        setTimeout(s=>{
            this.isPopup=false
        },400)
      },
      showPopup(){
          this.isPopup=true
        setTimeout(s=>{
            this.isContent=true
        },100)
      },
      onConfirm(){
        this.$emit('update:isShow',false)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .notificationMod{
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(0,0,0,0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      .notification{
          width: 550rpx;
          background: #fff;
          border-radius: 20rpx;
          padding-bottom:50rpx;
          transform: scale(0);
          transition: all 0.5s ease;
          .top{
              width: 100%;
              position: relative;
              min-height: 80rpx;
              .icon{
                  position: absolute;
                  top: 20rpx;
                  right: 20rpx;
              }
              .title{
                  width: 100%;
                  text-align: center;
                  line-height: 80rpx;
                  font-size: 32rpx;
                  color: #333;
              }
              .img{
                  width: 200rpx;
                  margin: 40rpx auto 0;
                  image{
                    width: 100%;
                  }
              }
          }
          .content{
              padding: 30rpx 50rpx 50rpx;
              max-height: 800rpx;
              overflow: auto;
			  font-size: 30rpx;
			  line-height: 40rpx;
			  color: #666;
          }
          .btn{
              width: 320rpx;
              height: 60rpx;
              text-align: center;
              line-height: 60rpx;
              background: #6cc9ea;
              border-radius: 50rpx;
              color: #fff;
              font-size: 28rpx;
              margin: 0 auto;
          }
      }
      .hideContent{
          transform: scale(0);
      }
      .showContent{
          transform: scale(1);
      }
  }
  .tipsIcon{
      position: absolute;
      bottom: -100rpx;
      left: 50%;
      width: 54rpx;
      height: 54rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      margin-left: -27rpx;
      color: #ddd;
  }
</style>
