<template>
  <div>  
    <span v-if="!showTip" @click="showTip=!showTip" class="cursor">{{showText}}</span>   
    <span v-else  @click="showTip=show" class="cursor">{{text}}</span>   
  </div>
</template>
<script>
export default {
  props: {  
    text: {
      type: String,
      default: function() {
        return "";
      }
    },
    show: {
      type: Boolean,
      default: function() {
        return true;
      }
    },
    length: {
      type: Number,
      default: function() {
        return 10;
      }
    }
  },
  data() {
    return {
      showTip: false,
      showText: "",   
    };
  },
  watch: {
    text: function(newQuestion, oldQuestion) {
      console.log(newQuestion);
      this.init();
    }
  },
  created() {
   
  },
  mounted(){
    this.init();
  },
  methods: {
    init() {     
      if (this.isMobile(this.text)) {
        this.showText = this.text.substring(0, 3)+"****"+this.text.substring(7, 4);
       
      }else{
         this.showText=this.text
      }     
    },
    isMobile(phone){
      let reg = /^1[345789]\d{9}$/;
     return reg.test(phone)
    }
  }
};
</script>

<style scoped>
.cursor{
  cursor:hand
}
</style>
