<template>
  <drawer-page-container v-model="visible" title="业务员详情">
    <view v-if="loading" class="loading">加载中...</view>
    <view v-else-if="detail" class="detail-wrap">
      <view class="header">
        <image v-if="detail.avatar" :src="detail.avatar" class="avatar" mode="aspectFill" />
        <view v-else class="avatar placeholder">{{ (detail.nick_name || '?').charAt(0) }}</view>
        <text class="name">{{ detail.nick_name || '-' }}</text>
        <text class="role">{{ detail.role_name || '业务员' }}</text>
      </view>
      <view class="row"><text class="k">推广码</text><text class="v">{{ detail.code || '-' }}</text></view>
      <view class="row"><text class="k">手机号</text><text class="v">{{ detail.phone || '-' }}</text></view>
      <view class="row"><text class="k">录入诊所</text><text class="v">{{ detail.clinic_input_count || 0 }} 家</text></view>
      <view class="row"><text class="k">录入药店</text><text class="v">{{ detail.pharmacy_input_count || 0 }} 家</text></view>
      <view class="row"><text class="k">正式诊所</text><text class="v">{{ detail.clinic_store_count || 0 }} 家</text></view>
      <view class="row"><text class="k">正式药店</text><text class="v">{{ detail.pharmacy_store_count || 0 }} 家</text></view>
    </view>
    <view v-else class="loading">暂无数据</view>
  </drawer-page-container>
</template>

<script>
import DrawerPageContainer from '@/subPackages/sub_salesperson/components/DrawerPageContainer.vue'
import { getInputBusinessContext } from '@/subPackages/sub_salesperson/common/context.js'

export default {
  name: 'PromoterDetailPopup',
  components: { DrawerPageContainer },
  props: {
    value: { type: Boolean, default: false },
    admin: { type: Object, default: null },
  },
  data() {
    return {
      loading: false,
      detail: null,
    }
  },
  computed: {
    visible: {
      get() { return this.value },
      set(v) { this.$emit('input', v) },
    },
    bizApi() {
      return getInputBusinessContext().api
    },
  },
  watch: {
    value(open) {
      if (open) this.loadDetail()
      else this.detail = null
    },
  },
  methods: {
    loadDetail() {
      const id = this.admin?.id
      const code = this.admin?.code
      if (!id && !code) return
      this.loading = true
      this.bizApi.getPromoterDetail({ id, code })
        .then((w) => {
          if (w.ok) this.detail = w.data || null
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style scoped>
.loading { text-align: center; color: #86909c; padding: 80rpx 0; font-size: 28rpx; }
.detail-wrap { padding: 0 32rpx 32rpx; }
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  padding: 32rpx 0 40rpx;
}
.avatar { width: 128rpx; height: 128rpx; border-radius: 50%; }
.avatar.placeholder {
  background: #e8f7f4;
  color: #6acdbb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  font-weight: 600;
}
.name { font-size: 34rpx; font-weight: 600; color: #1d2129; }
.role { font-size: 26rpx; color: #86909c; }
.row {
  display: flex;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  font-size: 28rpx;
}
.k { color: #86909c; }
.v { color: #1d2129; max-width: 420rpx; text-align: right; word-break: break-all; }
</style>
