<script lang="ts" setup>
import { ref } from 'vue';

import { Avatar, Button, message, Switch, Tag } from 'ant-design-vue';

import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
import { resolveAvatarUrl } from '#/views/system/store-input/utils/inputUser';

import { updateDoctorIsTestApi } from '../../api';

const props = defineProps<{
  row: Record<string, any>;
  onOpenCard: (row: Record<string, any>) => void;
  onRefresh?: () => void;
}>();

const switchLoading = ref(false);

/** 切换测试医生标记，保存后立即生效于患者端列表过滤 */
async function handleTestChange(checked: boolean | string | number) {
  const suId = props.row?.su_id;
  if (suId == null) {
    message.error('缺少医生信息');
    return;
  }
  const isTest = checked === true || checked === 1 || checked === '1' ? 1 : 0;
  switchLoading.value = true;
  try {
    await updateDoctorIsTestApi({
      doctor_id: suId,
      is_test: isTest,
    });
    props.row.is_test = isTest;
    message.success('保存成功');
    props.onRefresh?.();
  } finally {
    switchLoading.value = false;
  }
}
</script>

<template>
  <div class="doctor-basic-info">
    <div class="doctor-basic-info__header">
      <Avatar
        :size="32"
        :src="resolveAvatarUrl(row.avatar) || '/img/user-default-avatar.png'"
        class="shrink-0"
      />
      <Button
        class="doctor-basic-info__name !h-auto !px-0 !py-0"
        type="link"
        @click="onOpenCard(row)"
      >
        {{ row.name || '-' }}
      </Button>
      <Tag v-if="Number(row.is_test) === 1" color="orange" class="shrink-0">
        测试医生
      </Tag>
    </div>
    <div class="doctor-basic-info__grid">
      <div class="info-item">
        <span class="info-item__label">手机</span>
        <SensitiveText
          :record="row"
          field="mobile"
          empty-text="-"
          class="info-item__value"
        />
      </div>
      <div class="info-item">
        <span class="info-item__label">wxID</span>
        <span class="info-item__value">{{ row.su_id ?? '-' }}</span>
      </div>
    </div>
    <div class="doctor-basic-info__test">
      <span class="info-item__label">测试</span>
      <Switch
        :checked="Number(row.is_test) === 1"
        :loading="switchLoading"
        checked-children="是"
        un-checked-children="否"
        size="small"
        @change="handleTestChange"
      />
    </div>
  </div>
</template>

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

.doctor-basic-info__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.doctor-basic-info__name {
  font-weight: 500;
  font-size: 13px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.doctor-basic-info__test {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
}

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

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

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