<template>
  <div class="sens-text-wrapper">
    <span>{{ showText }}</span>
    <div class="icon-container" @click="switchOpen">
      <template v-if="isOpen">
        <svg t="1565251448936" class="eye" :style="{ color: eyeColor }" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="829" width="200" height="200"><path d="M950.857143 548.571429q-86.857143-134.857143-217.714286-201.714286 34.857143 59.428571 34.857143 128.571429 0 105.714286-75.142857 180.857143t-180.857143 75.142857-180.857143-75.142857-75.142857-180.857143q0-69.142857 34.857143-128.571429-130.857143 66.857143-217.714286 201.714286 76 117.142857 190.571429 186.571429t248.285714 69.428571 248.285714-69.428571 190.571429-186.571429zm-411.428571-219.428571q0-11.428571-8-19.428571t-19.428571-8q-71.428571 0-122.571429 51.142857t-51.142857 122.571429q0 11.428571 8 19.428571t19.428571 8 19.428571-8 8-19.428571q0-49.142857 34.857143-84t84-34.857143q11.428571 0 19.428571-8t8-19.428571zm484.571429 219.428571q0 19.428571-11.428571 39.428571-80 131.428571-215.142857 210.571429t-285.428571 79.142857-285.428571-79.428571-215.142857-210.285714q-11.428571-20-11.428571-39.428571t11.428571-39.428571q80-130.857143 215.142857-210.285714t285.428571-79.428571 285.428571 79.428571 215.142857 210.285714q11.428571 20 11.428571 39.428571z" p-id="830" fill="#409EFF"></path></svg>
      </template>
      <template v-else>
        <svg t="1565244511956" class="eye" :style="{ color: eyeColor }" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="672" data-spm-anchor-id="a313x.7781069.0.i1" width="200" height="200"><path d="M941.677 391.71c9.338-14.006 6.225-32.681-6.225-43.575-14.006-10.894-32.681-7.781-43.575 6.225-1.557 1.556-174.3 205.426-379.728 205.426-199.2 0-379.727-205.426-381.283-206.982-10.895-12.45-31.125-14.006-43.576-3.113-12.45 10.894-14.006 31.125-3.113 43.576 3.113 4.668 40.463 46.687 99.6 93.375l-79.37 82.482c-12.45 12.45-10.893 32.681 1.557 43.575 3.113 6.225 10.894 9.338 18.676 9.338 7.78 0 15.562-3.113 21.787-9.338l85.594-88.706c40.463 28.013 88.707 54.47 141.62 73.144l-32.682 110.495c-4.668 17.118 4.67 34.237 21.788 38.906h9.337c14.006 0 26.457-9.338 29.569-23.344l32.681-110.495c24.9 4.669 51.357 7.782 77.813 7.782s52.913-3.113 77.814-7.782l32.68 108.939c3.114 14.006 17.12 23.343 29.57 23.343 3.113 0 6.225 0 7.782-1.556 17.118-4.67 26.456-21.787 21.788-38.906L649.099 595.58c52.914-18.676 101.157-45.132 141.62-73.144l84.038 87.15c6.225 6.225 14.006 9.338 21.787 9.338 7.781 0 15.563-3.113 21.787-9.337 12.45-12.451 12.45-31.125 1.557-43.576l-79.37-82.481c63.808-46.689 101.16-91.82 101.16-91.82z" p-id="673" fill="#409EFF" data-spm-anchor-id="a313x.7781069.0.i2"></path></svg>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XySensText',
  props: {
    text: {
      type: String,
      default: '',
    },
    eyeColor: {
      type: String,
      default: '#20A0FF',
    },
    type: {
      type: String,
      default: 'mobile',
    },
  },
  data() {
    return {
      isOpen: false,
    };
  },
  computed: {
    showText() {
      if (this.isOpen) return this.text;
      const { text } = this;
      switch (this.type) {
        case 'mobile':
          return text.replace(/(\d{3})\d{4}/, '$1****');
        case 'idCard':
          return text.replace(/(\d{3})\d{11}/, '$1***********');
        case 'email':
          return text.replace(/^(\w{2}).+?@.+?(\.\w{2,3})$/, (all, pre, aft) => {
            return `${pre}***@***${aft}`;
          });
        default:
          return text.replace(/(\w{3})\w{8}/, '$1********');
      }
    },
  },
  methods: {
    switchOpen() {
      this.isOpen = !this.isOpen;
    },
  },
};
</script>

<style scoped>
.icon-container {
  display: inline-block;
}
.sens-text-wrapper {
  user-select: none;
}
.eye {
  cursor: pointer;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
</style>
