<template>
  <el-tag 
    v-if="showTag"
    :type="type"
    :effect="effect"
  >
    <span class="gender-tag">
      <el-icon>
        <Male v-if="isMale" />
        <Female v-else-if="isFemale" />
      </el-icon>
      <span class="gender-label">{{ label }}</span>
    </span>
  </el-tag>
  <span v-else class="gender-tag" :class="genderClass">
    <el-icon>
      <Male v-if="isMale" />
      <Female v-else-if="isFemale" />
    </el-icon>
    <span class="gender-label">{{ label }}</span>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Male, Female } from '@element-plus/icons-vue'

interface Props {
  sex?: string | number; // 性别值：1=男，0=女
  showTag?: boolean; // 是否显示标签样式（有边框和背景），默认为 false
}

const props = withDefaults(defineProps<Props>(), {
  sex: '',
  showTag: false
})

// 判断是否为男性（1=男）
const isMale = computed(() => {
  const sex = String(props.sex)
  const sexNum = Number(props.sex)
  return sexNum === 1 || sex === '1'
})

// 判断是否为女性（0=女）
const isFemale = computed(() => {
  const sex = String(props.sex)
  const sexNum = Number(props.sex)
  return sexNum === 0 || sex === '0'
})

// 根据性别计算显示内容
const label = computed(() => {
  if (isMale.value) {
    return '男'
  } else if (isFemale.value) {
    return '女'
  }
  return '-'
})

const type = computed(() => {
  if (isMale.value) {
    return 'primary' // 蓝色
  } else if (isFemale.value) {
    return 'danger' // 红色/粉色
  }
  return 'info' // 灰色
})

const effect = computed(() => {
  if (isMale.value || isFemale.value) {
    return 'light'
  }
  return 'plain'
})

const genderClass = computed(() => {
  if (isMale.value) {
    return 'gender-male'
  } else if (isFemale.value) {
    return 'gender-female'
  }
  return 'gender-unknown'
})
</script>

<style scoped>
.gender-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: none;
  background: transparent;
  padding: 0;
}

.gender-tag .el-icon {
  font-size: 12px;
}

.gender-male {
  color: var(--el-color-primary);
}

.gender-female {
  color: var(--el-color-danger);
}

.gender-unknown {
  color: var(--el-text-color-secondary);
}
</style>

