<!--
 * @Author: zhaojinfeng 121016171@qq.com
 * @Date: 2023-07-23 16:27:37
 * @LastEditors: zhaojinfeng 121016171@qq.com
 * @LastEditTime: 2023-07-23 17:28:40
 * @FilePath: \vue3\packages\mask-text\index.vue
 * @Description: 敏感数据隐藏组件
 *
-->
<template>
  <span :class="{ 'cursor-help': value }" @click="toggle(false)">
    {{ data }}
  </span>
</template>

<script lang="ts" setup name="ThMaskText">
const props = withDefaults(defineProps<{
  /** 带隐藏的文字 */
  text?: string
  /** 左侧可见的位数 */
  left?: number
  /** 右侧可见的位数 */
  right?: number
}>(), { left: 0, right: 0 })

const [value, toggle] = useToggle(true)

const data = computed(() => {
  const left = props.left < 0 ? 0 : props.left
  const right = props.right < 0 ? 0 : props.right
  const textLength = props.text.length
  if (
    !value.value
    || !props.text
    || left > textLength
    || right > textLength
    || right + left > textLength
  )
    return props.text
  const rightIndex = textLength - right
  const centerLength = textLength - right - left
  const leftText = props.text.slice(0, left)
  const centerText = '*'.repeat(centerLength)
  const rightText = props.text.slice(rightIndex)

  return leftText + centerText + rightText
})
</script>
