<script lang="ts" setup>
import { Button } from 'ant-design-vue';

defineProps<{
  row: Record<string, any>;
  variant: 'clinic' | 'pharmacy';
  onCopy: (text: string | number) => void;
  onEditExternalField: (
    row: Record<string, any>,
    field: 'erp_id' | 'mes_id',
    label: string,
  ) => void;
}>();

function getClinicTypeText(clinicType: number) {
  if (clinicType === 1) return '西医诊所';
  if (clinicType === 2) return '中医诊所';
  return '未设置';
}
</script>

<template>
  <div class="store-basic-info">
    <div class="store-basic-info__name">{{ row.name || '-' }}</div>
    <div class="store-basic-info__grid">
      <div class="info-item">
        <span class="info-item__label">ID</span>
        <Button
          type="link"
          size="small"
          class="info-item__action"
          @click="onCopy(row.id)"
        >
          {{ row.id }}
        </Button>
      </div>
      <div class="info-item">
        <span class="info-item__label">ERP</span>
        <Button
          type="link"
          size="small"
          class="info-item__action"
          @click="onEditExternalField(row, 'erp_id', 'ERP ID')"
        >
          {{ row.erp_id != null && row.erp_id !== '' ? row.erp_id : '-' }}
        </Button>
      </div>
      <template v-if="variant === 'clinic'">
        <div class="info-item">
          <span class="info-item__label">诊所类型</span>
          <span class="info-item__value">{{ getClinicTypeText(Number(row.clinic_type)) }}</span>
        </div>
        <div class="info-item">
          <span class="info-item__label">管理员</span>
          <template v-if="row.store_admin?.phone">
            <Button
              type="link"
              size="small"
              class="info-item__action"
              @click="onCopy(row.store_admin.phone)"
            >
              {{ row.store_admin.phone }}
            </Button>
          </template>
          <span v-else class="info-item__value">-</span>
        </div>
      </template>
      <template v-else>
        <div class="info-item">
          <span class="info-item__label">MES</span>
          <Button
            type="link"
            size="small"
            class="info-item__action"
            @click="onEditExternalField(row, 'mes_id', 'MES ID')"
          >
            {{ row.mes_id != null && row.mes_id !== '' ? row.mes_id : '-' }}
          </Button>
        </div>
        <div class="info-item info-item--empty" />
      </template>
    </div>
  </div>
</template>

<style scoped>
.store-basic-info {
  line-height: 1.5;
}

.store-basic-info__name {
  font-weight: 500;
  margin-bottom: 6px;
}

.store-basic-info__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  color: rgb(107 114 128);
}

.info-item--empty {
  visibility: hidden;
}

.info-item__label {
  flex-shrink: 0;
  min-width: 48px;
  color: rgb(156 163 175);
}

.info-item__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-item__action {
  height: auto;
  padding: 0;
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
