<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<!-- Created by Tw93 on 16/11/07. -->
<!--A dialog. -->

<template>
  <div class="container" v-if="showTip">
   
    <div class="tip-box" :style="tipStyle">
      <image class="tip-img" v-if="type === 'img'" :src="src"></image>
      <text class="tip-content" :style="tipStyle">{{message}}</text>
    </div>
    
  </div>
</template>

<style scoped>
  .container {
    position: fixed;
    width: 750px;
    top:0;
    bottom:0;
    align-items: center;
    justify-content: center;
    /*兼容H5异常*/
    z-index: 99999;
  }
  .tip-box {
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: #585858;
    opacity:0.7;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 50px;
    padding-right: 50px;
  }
  .tip-img{
    width:110px;
    height:110px;
    margin-bottom:20px;
  }
  .tip-content{
    display: flex;
    text-align:center;
    color:#fff;
    font-size:34px;
  }
</style>

<script>
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: 'text'
      },
      src: {
        type: String,
        default: ''
      },
      message: {
        type: String,
        default: ""
      },
      duration: {
        type: Number,
        default: 2000
      },
      tipStyle: {
        type: Object,
        default: ()=>({})
      }
    },
    data(){
        return{
            showTip: this.show
        }
    },
    watch: {
      show (val) {
        this.showTip = val;
        if (val) {
          clearTimeout(this.timeout)
          var that=this;
          this.timeout = setTimeout(function(){
            that.showTip = false
            that.$emit("showTip",false)
          }, that.duration)
        }
      }
    },
    mounted() {  
       
    },  
    methods: {    
    }
  };
</script>
