<script lang="ts" setup>
/**
 * 仓库/药品列表药名单元格：搜索命中别名时展示「别名 + 拼音」（对齐开方气泡）
 */
defineProps<{
  row: Record<string, any>;
}>();

function drugNameOf(row: Record<string, any>): string {
  return String(row?.drug?.drug_name || row?.drug_name || '').trim() || '-';
}

function matchedAliasOf(row: Record<string, any>): string {
  return String(
    row?.matched_alias || row?.drug?.matched_alias || '',
  ).trim();
}

function pinyinOf(row: Record<string, any>): string {
  const aliasPy = String(
    row?.matched_alias_pinyin || row?.drug?.matched_alias_pinyin || '',
  ).trim();
  if (matchedAliasOf(row) && aliasPy) return aliasPy;
  return String(row?.drug?.pinyin_simple || row?.pinyin_simple || '').trim();
}
</script>

<template>
  <div class="wh-drug-name-cell">
    <div class="wh-drug-name-cell__name" :title="drugNameOf(row)">
      {{ drugNameOf(row) }}
    </div>
    <div v-if="matchedAliasOf(row)" class="wh-drug-name-cell__alias">
      别名：{{ matchedAliasOf(row) }}
      <span v-if="pinyinOf(row)" class="wh-drug-name-cell__py">
        （{{ pinyinOf(row) }}）
      </span>
    </div>
  </div>
</template>

<style scoped>
.wh-drug-name-cell__name {
  font-weight: 500;
  line-height: 1.35;
  word-break: break-all;
}
.wh-drug-name-cell__alias {
  margin-top: 2px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  line-height: 1.3;
  word-break: break-all;
}
.wh-drug-name-cell__py {
  color: hsl(var(--muted-foreground) / 0.9);
}
</style>
