<!-- Personal.vue（子组件） -->
<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  approved?: boolean
  active?: boolean
  name: string
}>()

// 动态颜色计算
const color = computed(() => {
  if (props.approved) return '#07c160'
  if (props.active) return '#ff976a'
  return '#969799'
})

// 状态图标类型
const iconType = computed(() => {
  if (props.approved) return 'success'
  if (props.active) return 'ellipsis'
  return ''
})
</script>

<template>
  <view 
    class="personal-card"
    :style="{
      color,
      border: `2rpx solid ${color}`,
      backgroundColor: color ? '#fff' : 'transparent'
    }"
  >
    <text class="name" :style="{color: approved ? '#07c160' : active ? '#ff976a' : ''}">{{ name }}</text>


    <div class="icon">
      <!-- 已审批图标 -->
      <text v-if="approved" style="font-size: 16px;" type="success" class="iconfont icon-success1f custom-icon"></text> 
      <!-- 当前节点图标 -->
      <text v-else-if="active"  type="warning"   class="iconfont icon-ellipsis custom-icon"></text> 
    </div>

  </view>
</template>

<style lang="less" scoped>
.personal-card {
  display: flex;
  align-items: center;
  position: relative;
  margin-left: 32rpx; /* 1.6rem × 20 = 32rpx */
  margin-bottom: 8rpx; /* 0.4rem × 20 = 8rpx */
  padding: 4rpx 10rpx; /* 0.2rem×20=4rpx；0.5rem×20=10rpx */
  padding-right: v-bind('color ? "40rpx" : "10rpx"'); /* 2rem×20=40rpx；0.5rem×20=10rpx */
  height: 36rpx; /* 1.8rem × 20 = 36rpx */
  line-height: 1;
  border-radius: 10em; /* 保留 em 单位 */

  .name {
    max-width: 120rpx; /* 6rem × 20 = 120rpx */
    text-align: center;
    white-space: nowrap;
    font-size: 24rpx; /* 1.2rem × 20 = 24rpx */
    color: #969799;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .icon {
    position: absolute;
    top: -2rpx; /* -0.1rem × 20 = -2rpx */
    right: -2rpx; /* -0.1rem × 20 = -2rpx */
    font-size: 28rpx; /* 1.4rem × 20 = 28rpx */
    border-radius: 100%;
    border: 4rpx solid #fff; /* 0.2rem × 20 = 4rpx */
    background-color: currentColor; /* 使用当前文字颜色 */
    .custom-icon { 
      color: #fff;
    }

  }
}
</style>