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

defineProps<{
  row: Record<string, any>;
  onEditDepart: (row: Record<string, any>) => void;
  onEditTitle: (row: Record<string, any>) => void;
  onEditSubjects: (row: Record<string, any>) => void;
  onEditStores: (row: Record<string, any>) => void;
}>();

/**
 * 格式化所属诊所列表为单行展示
 */
function formatStores(stores: any[] | undefined) {
  if (!stores?.length) return '';
  return stores
    .map((item) => item?.store?.name)
    .filter(Boolean)
    .join('、');
}
</script>

<template>
  <div class="doctor-professional-info">
    <div class="doctor-professional-info__grid">
      <div class="info-item">
        <span class="info-item__label">科室</span>
        <Button
          class="info-item__action"
          size="small"
          type="link"
          @click="onEditDepart(row)"
        >
          {{ row.depart?.name || '绑定' }}
        </Button>
      </div>
      <div class="info-item">
        <span class="info-item__label">职称</span>
        <Button
          class="info-item__action"
          size="small"
          type="link"
          @click="onEditTitle(row)"
        >
          {{ row.title?.name || '绑定' }}
        </Button>
      </div>
      <div class="info-item">
        <span class="info-item__label">诊疗科目</span>
        <Button
          class="info-item__action"
          size="small"
          type="link"
          @click="onEditSubjects(row)"
        >
          {{ row.subjects?.name || '绑定' }}
        </Button>
      </div>
      <div class="info-item info-item--stores">
        <span class="info-item__label">所属诊所</span>
        <Button
          class="info-item__action"
          size="small"
          type="link"
          @click="onEditStores(row)"
        >
          {{ formatStores(row.stores) || '绑定' }}
        </Button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.doctor-professional-info {
  line-height: 1.5;
}

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

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

.info-item--stores {
  grid-column: 1 / -1;
}

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

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