<template>
  <el-dialog :model-value="visible" class="hospital-detail-dialog" top="5vh" width="900px"
    :close-on-click-modal="true" @update:model-value="(v) => !v && close()">
    <div class="body-wrap" v-loading="loading">
      <div class="body-header">
        <div class="body-title">{{ $t("modal.detailHospital") }}</div>
        <img src="@/assets/image/close-btn.svg" alt="" class="close-btn" @click="close">
      </div>

      <div v-if="detail.id" class="detail-container">
        <div class="detail-row row-3">
          <div class="detail-item">
            <div class="label">{{ $t('label.contactDept') }}</div>
            <div class="value">{{ detail.contactDept || '\u2014' }}</div>
          </div>
          <div class="detail-item">
            <div class="label">{{ $t('label.contactPerson') }}</div>
            <div class="value">{{ detail.contactPerson || '\u2014' }}</div>
          </div>
          <div class="detail-item">
            <div class="label">{{ $t('label.contactPosition') }}</div>
            <div class="value">{{ detail.contactPosition || '\u2014' }}</div>
          </div>
        </div>
        <div class="detail-row row-3">
          <div class="detail-item">
            <div class="label">{{ $t('label.contactPhone') }}</div>
            <div class="value">{{ detail.contactPhone || '\u2014' }}</div>
          </div>
          <div class="detail-item">
            <div class="label">{{ $t('table.signDate') }}</div>
            <div class="value">{{ formatDate(detail.signDate) }}</div>
          </div>
          <div class="detail-item">
            <div class="label">{{ $t('label.acceptDate') }}</div>
            <div class="value">{{ formatDate(detail.acceptDate) }}</div>
          </div>
        </div>
        <div class="detail-row row-3">
          <div class="detail-item">
            <div class="label">{{ $t('label.years') }}</div>
            <div class="value">{{ detail.contractYears }}年</div>
          </div>
          <div class="detail-item">
            <div class="label">{{ $t('table.maintenanceEnd') }}</div>
            <div class="value">{{ formatDate(detail.maintenanceEnd) }}</div>
          </div>
          <div class="detail-item">
            <div class="label">{{ $t('table.manager') }}</div>
            <div class="value">{{ detail.managerName || '\u2014' }}</div>
          </div>
        </div>
        <div class="detail-row row-1">
          <div class="detail-item">
            <div class="label">{{ $t('common.remark') }}</div>
            <div class="value">{{ detail.remark || '\u2014' }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="body-footer">
      <el-button type="primary" style="margin-left:auto" plain @click="close">
        取消
      </el-button>
      <el-button type="primary"  @click="goEdit">
        {{ $t('btn.edit') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import dayjs from "dayjs";
import { getAdminHospitalDetail } from "@/service/modular/admin";

const props = defineProps({
  visible: { type: Boolean, default: false },
  // 父组件传入的医院 id
  hospitalId: { type: [String, Number], default: "" },
});

const emit = defineEmits(["update:visible", "close", "edit"]);

const loading = ref(false);
const detail = ref({});

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

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

// 弹窗打开或 id 变化时重新拉取详情
watch(
  () => [props.visible, props.hospitalId],
  ([vis, id]) => {
    if (vis) loadDetail(id);
  },
  { immediate: true }
);

const close = () => emit("update:visible", false);

// 仅向父组件通知"进入编辑"，由父组件切换到编辑弹窗，避免组件间耦合路由
const goEdit = () => emit("edit", props.hospitalId);
</script>

<style lang="scss">
.hospital-detail-dialog {
  max-width: 90vw;
  min-width: 70vw;

  .body-wrap {
    padding: 24px;

    .body-header {
      margin-bottom: 16px;
    }

    .detail-container {
      .detail-row + .detail-row {
        margin-top: 15px;
      }

      .detail-row {
        display: grid;
        gap: 15px;

        &.row-1 {
          grid-template-columns: 1fr;
        }

        &.row-3 {
          grid-template-columns: repeat(3, 1fr);
        }

        .detail-item {
          display: flex;
          align-items: center;
          gap: 10px;

          .label {
            font-weight: 400;
            font-size: 14px;
            color: #1D2129;
            width: 6em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex-shrink: 0;
            flex-grow: 0;
          }

          .value {
            flex-shrink: 1;
            flex-grow: 1;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            padding: 10px;
            background: #F8F8F8;
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #E0E0E0;
          }
        }
      }
    }
  }
}
</style>