<template>
    <div class="line-l" v-show="show" :style="{borderColor:color,bottom:bottom+'px',right:right+'px',opacity:(coverFlag)?1:0,transform:'rotate('+((coverFlag)?-30:0)+'deg) scale('+((coverFlag)?0.8:3)+')'}">
      <div class="line-s" :style="{borderColor:color}">
          <div class="text-div">
            <div class="text" :style="{color:color}">{{ text }}</div>
            <div class="time" :style="{color:color}">{{ date }}</div>
            <div class="time" :style="{color:color}">{{ time }}</div>
          </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "seal",
  props:{
    text:{
      type:[String,Number],
      default:'审批通过'
    },
    date:{
      type:[String,Function],
      default:''
    },
    time:{
      type:[String,Function],
      default:''
    },
    right:{
      type:Number,
      default:100
    },
    bottom:{
      type:Number,
      default:200
    },
    show:{
      type:Boolean,
      default:true
    },
    color:{
      type:String,
      default:'red'
    }
  },
  watch:{
    show(n,o){
      // console.log(n,o)
      if(n){
        this.coverFlag = false
        setTimeout(()=>{
          this.coverFlag = true
        },10)
      }
    }
  },
  data(){
    return {
      coverFlag:false
    }
  },
  methods:{

  }
}
</script>

<style scoped>
  .line-l{
    z-index: 10;
    position: absolute;
    transition: .5s;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 5px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .line-s{
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 2px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .text-div{
    display: flex;
    flex-wrap:wrap;
    text-align: center;
    justify-content: center;
  }

  .text{
    font-size: 32px;
    font-weight: bold;
    font-family: 'fangsong';
    color:red;
    width: 100%;
  }

  .time{
    font-size: 14px;
    color:red;
    width: 100%;
  }
</style>
