<template>
  <view class="promoter-info-card">
    <view
      v-if="displayAdmin"
      class="card-body"
      :class="{ clickable: clickable && canOpenDetail }"
      @click.stop="openDetail"
    >
      <image v-if="displayAdmin.avatar" :src="displayAdmin.avatar" class="avatar" mode="aspectFill" />
      <view v-else class="avatar placeholder">{{ displayName.charAt(0) }}</view>
      <view class="meta">
        <text class="name">{{ displayName }}</text>
        <text v-if="displayAdmin.phone" class="sub">{{ displayAdmin.phone }}</text>
        <text v-else-if="displayAdmin.code" class="sub">业务码：{{ displayAdmin.code }}</text>
      </view>
    </view>
    <text v-else class="empty">-</text>
    <promoter-detail-popup v-model="showDetail" :admin="displayAdmin" />
  </view>
</template>

<script>
import PromoterDetailPopup from '@/subPackages/sub_salesperson/components/PromoterDetailPopup.vue'

export default {
  name: 'PromoterInfoCard',
  components: { PromoterDetailPopup },
  props: {
    admin: { type: Object, default: null },
    clickable: { type: Boolean, default: true },
  },
  data() {
    return { showDetail: false }
  },
  computed: {
    displayAdmin() {
      if (!this.admin) return null
      if (this.admin.id || this.admin.code || this.admin.nick_name) return this.admin
      return null
    },
    displayName() {
      return this.displayAdmin?.nick_name?.trim() || this.displayAdmin?.phone?.trim() || '-'
    },
    canOpenDetail() {
      return !!(this.displayAdmin?.id || this.displayAdmin?.code)
    },
  },
  methods: {
    openDetail() {
      if (!this.clickable || !this.canOpenDetail) return
      this.showDetail = true
    },
  },
}
</script>

<style scoped>
.promoter-info-card { min-width: 0; }
.card-body {
  display: flex;
  align-items: center;
  gap: 16rpx;
  min-width: 0;
}
.card-body.clickable:active { opacity: 0.85; }
.avatar { width: 56rpx; height: 56rpx; border-radius: 50%; flex-shrink: 0; }
.avatar.placeholder {
  background: #e8f7f4;
  color: #6acdbb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 600;
}
.meta { flex: 1; min-width: 0; }
.name { display: block; font-size: 26rpx; color: #1d2129; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub { display: block; font-size: 22rpx; color: #86909c; margin-top: 4rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { font-size: 26rpx; color: #86909c; }
</style>
