<template>
  <div class="hospital-detail" v-loading="loading">
    <el-page-header :icon="ArrowLeft" :content="$t('common.back')" @back="goBack" class="page-header">
      <template #content>
        <span class="page-title">{{ $t('modal.detailHospital') }}</span>
      </template>
    </el-page-header>

    <el-card shadow="never" v-if="detail.id">
      <template #header>
        <div class="card-header">
          <span class="title">{{ detail.name }}</span>
          <el-tag size="small">{{ detail.customerCategory }} {{ $t('category.AShort').replace('A', '') }}</el-tag>
          <el-button type="primary" size="small" style="margin-left:auto" @click="goEdit">
            {{ $t('btn.edit') }}
          </el-button>
        </div>
      </template>

      <el-descriptions :column="3" border>
        <el-descriptions-item :label="$t('label.contactDept')">{{ detail.contactDept }}</el-descriptions-item>
        <el-descriptions-item :label="$t('label.contactPerson')">{{ detail.contactPerson }}</el-descriptions-item>
        <el-descriptions-item :label="$t('label.contactPosition')">{{ detail.contactPosition }}</el-descriptions-item>
        <el-descriptions-item :label="$t('label.contactPhone')">{{ detail.contactPhone }}</el-descriptions-item>
        <el-descriptions-item :label="$t('table.signDate')">{{ formatDate(detail.signDate) }}</el-descriptions-item>
        <el-descriptions-item :label="$t('label.acceptDate')">{{ formatDate(detail.acceptDate) }}</el-descriptions-item>
        <el-descriptions-item :label="$t('label.years')">{{ formatUsageYears(detail.signDate) }}</el-descriptions-item>
        <el-descriptions-item :label="$t('table.maintenanceEnd')">{{ formatDate(detail.maintenanceEnd) }}</el-descriptions-item>
        <el-descriptions-item :label="$t('table.manager')">{{ detail.managerName }}</el-descriptions-item>
      </el-descriptions>

      <div class="section">
        <div class="section-title">{{ $t('common.remark') }}</div>
        <div class="html-content">{{ detail.remark || "—" }}</div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ArrowLeft } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { getAdminHospitalDetail } from "@/service/modular/admin";

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const detail = ref({});

const formatDate = (v) => (v ? dayjs(v).format("YYYY-MM-DD") : "—");

// 从签约日期到今天的使用年限，按"X年X天"展示
const formatUsageYears = (signDate) => {
  if (!signDate) return "—";
  const start = dayjs(signDate);
  const now = dayjs();
  if (start.isAfter(now)) return "—";
  const totalDays = now.diff(start, "day");
  const years = Math.floor(totalDays / 365);
  const days = totalDays - years * 365;
  return `${years}年${days}天`;
};

const loadDetail = async () => {
  loading.value = true;
  try {
    detail.value = await getAdminHospitalDetail(route.params.id);
  } finally {
    loading.value = false;
  }
};

const goBack = () => router.back();
const goEdit = () => router.push(`/admin/hospitals/edit/${route.params.id}`);

onMounted(loadDetail);
</script>

<style scoped lang="scss">
.page-header {
  margin-bottom: 12px;
  .page-title {
    font-size: 16px;
    font-weight: 600;
  }
}
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  .title {
    font-size: 16px;
    font-weight: 600;
    margin-right: 8px;
  }
}
.section {
  margin-top: 20px;
  .section-title {
    font-size: 14px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 10px;
  }
}
.html-content {
  background: #fafafa;
  padding: 12px;
  border-radius: 4px;
  min-height: 60px;
  line-height: 1.6;
}
</style>
