<template>
  <div>
    <div v-if="!props.value">-</div>
    <div v-else-if="!props.show">{{ sensitive() }}</div>
    <div v-else style="position: relative;">
      {{ show ? props.value : sensitive() }}<div class="show" @click="show = !show;"><el-icon>
          <View v-if="!show" />
          <Hide v-else />
        </el-icon></div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';

const props = defineProps({
  value: {
    type: String,
    required: true
  },
  type: {
    type: String
  },
  len: {
    type: Number,
    default: 4
  },
  char: {
    type: String,
    default: '*'
  },
  show: {
    type: Boolean,
    default: false
  }
});

const show = ref(false);

const sensitive = () => {
  let value = props.value.trim();
  if (props.type == "ipv4") {
    let vs = value.split(".");
    if (vs.length != 4) {
      return value;
    }
    if (props.len < 4) {
      vs[i] = props.char;
      return vs.join(".");
    }
    return `${vs[0]}.${vs[1]}.${"".padEnd(vs[2].length, props.char)}.${"".padEnd(vs[3].length, props.char)}`;
  }
  let len = props.len || value.length;
  if (len > value.length - 3) {
    len = Math.floor(value.length / 2);
  }
  let cs = "".padEnd(len, props.char);

  let start = Math.floor((value.length - len) / 2);

  return value.replace(new RegExp(`^(.{${start}})(.{${len}})(.+)$`), "$1" + cs + "$3")
}



</script>
<style lang="scss" scoped>
.show {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s;


  &:hover {
    opacity: .7;
  }
}
</style>