<script lang="ts" setup>
import ADesensitize from '@/components/a-desensitize/ADesensitize.vue'

const showDesensitize = ref(false)

defineProps<{
  label: string
  prop: string
  desensitizeType: 'mobile' | 'idcard' | 'email' | 'bankCard' | 'name'
}>()

</script>

<template>
  <ElTableColumn :label="label">
    <template #default="scope">
      <span>
        <slot :scope="scope"/>
      <ADesensitize :show="showDesensitize" :type="desensitizeType" :value="scope.row[prop]"/>
      </span>
    </template>
    <template #header>
      <span class="desensitize-header" @click="showDesensitize = !showDesensitize">
        {{ label }}
      </span>
    </template>
  </ElTableColumn>
</template>

<style lang="stylus" scoped>
.desensitize-header {
  display: inline-block;
  cursor: pointer;
  user-select none

  &:hover {
    color: var(--el-color-primary);
    text-decoration: underline;
  }
}
</style>
