<script lang="ts" setup>
import { VbenAvatar } from '../../../../../../packages/@core/ui-kit/shadcn-ui/src/components';
import { message, Tag } from 'ant-design-vue';
import { computed } from 'vue';

interface Props {
  avatar?: string;
  ban?: number;
}


async function copyUserName() {
  const doc = document.getElementById('user_name');
  const parts = (doc?.innerText || '').split(':');
  const secondPart = parts[1] || '';
  const trimmedSecondPart = secondPart.trim();
  navigator.clipboard.writeText(trimmedSecondPart);
  message.success('复制成功');
}
async function copyUid() {
  const doc = document.getElementById('uid');
  const parts = (doc?.innerText || '').split(':');
  const secondPart = parts[1] || '';
  const trimmedSecondPart = secondPart.trim();
  navigator.clipboard.writeText(trimmedSecondPart);
  message.success('复制成功');
}
defineOptions({
  name: 'UserHeader',
});

const props = withDefaults(defineProps<Props>(), {
  avatar: '',
  ban: 0
});
const banStatus = computed(() => {
  if (props.ban === -1) {
    return { text: '永久封号', color: 'red' };
  } else if (props.ban > 0) {
    // 0天=粉红 #ffb6c1, 30天=深红 #b22222
    const minColor = [255, 182, 193]; // #ffb6c1
    const maxColor = [178, 34, 34];   // #b22222
    const days = Math.min(props.ban, 30);
    const ratio = days / 30;
    const color = minColor.map((c, i) => Math.round(c + (((maxColor?.[i] ?? c) - c) * ratio)));
    const colorHex = `#${color.map(x => x.toString(16).padStart(2, '0')).join('')}`;
    return { text: `封号${props.ban}天`, color: colorHex };
  } else {
    return { text: '正常', color: 'green' };
  }
});
</script>
<template>
  <div class="card-box p-4 py-6 lg:flex">
    <VbenAvatar :src="avatar" class="size-20" />
    <div v-if="$slots.nick_name || $slots.user_name" class="flex flex-col justify-center md:ml-6 md:mt-0">
      <h1 v-if="$slots.nick_name" class="text-md font-semibold md:text-xl">
        <slot name="nick_name"></slot>
        <Tag class="ml-2" :color="banStatus.color">{{ banStatus.text }}</Tag>
      </h1>
      <span v-if="$slots.user_name" class="text-foreground/80 mt-1 ant-btn" @click='copyUserName' id="user_name">
        <slot name="user_name"></slot>
      </span>
      <span v-if="$slots.uid" class="text-foreground/80 mt-1 ant-btn" @click='copyUid' id="uid">
        <slot name="uid"></slot>
      </span>
    </div>
    <div class="mt-4 flex flex-1 justify-end md:mt-0">
      <div class="flex flex-col justify-center text-right">
        <span class="text-foreground/80"> LEVEL </span>
        <span class="text-2xl text-center" v-if="$slots.level">
          <slot name="level"> </slot>
        </span>
      </div>
      <div class="flex flex-col justify-center text-right md:ml-12">
        <span class="text-foreground/80 text-center"> ⚡ </span>
        <span class="text-2xl text-center" v-if="$slots.energy">
          <slot name="energy"> </slot>
        </span>
      </div>

      <div class="mx-12 flex flex-col justify-center text-right md:mx-12">
        <span class="text-foreground/80 text-center"> ⭐ </span>
        <span class="text-2xl text-center" v-if="$slots.star">
          <slot name="star"> </slot>
        </span>
      </div>
      <div class="mr-4 flex flex-col justify-center text-right md:mr-10">
        <span class="text-foreground/80 text-center"> 💎 </span>
        <span class="text-2xl text-center" v-if="$slots.diamond">
          <slot name="diamond"> </slot>
        </span>
      </div>
    </div>
  </div>
</template>
