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

type BasicExpertRow = {
  expertId: number;
  expertName?: string | null;
  hospital?: string | null;
};

type BasicInfoReviewRow = {
  label: string;
  value: string;
  reviewKey: string | string[];
  rejectKey: string;
  rejectLabel: string;
  multiline?: boolean;
};

const props = defineProps<{
  basicView: Record<string, any>;
  canReject: boolean;
  isHigherReview: boolean;
  toReviewTagType: (
    itemKey: string | string[],
  ) => "success" | "danger" | "info";
  toReviewResultText: (itemKey: string | string[]) => string;
  handleRejectMaterialItem: (itemKey: string, itemLabel: string) => void;
}>();

const formatBasicExpertLine = (rows: BasicExpertRow[] | undefined) => {
  if (!Array.isArray(rows) || rows.length === 0) {
    return "-";
  }
  return rows
    .map((row) => {
      const name = String(row?.expertName ?? "").trim();
      const hospital = String(row?.hospital ?? "").trim();
      const expertId = Number(row?.expertId || 0);
      const expertLabel = name || (expertId ? `专家ID ${expertId}` : "-");
      return hospital ? `${expertLabel}（${hospital}）` : expertLabel;
    })
    .join("、");
};

const formatText = (value: unknown) => {
  if (value === null || value === undefined) {
    return "-";
  }
  if (typeof value === "number") {
    return String(value);
  }
  const text = String(value).trim();
  return text || "-";
};

const sections = computed<
  Array<{
    key: string;
    title: string;
    description: string;
    rows: BasicInfoReviewRow[];
  }>
>(() => [
  {
    key: "expertRoles",
    title: "专家角色",
    description: "核对专家分工与会议角色配置是否一致。",
    rows: [
      {
        label: "大会主席",
        value: formatBasicExpertLine(props.basicView?.chairmanExperts),
        reviewKey: "chairmanExpertIds",
        rejectKey: "chairmanExpertIds",
        rejectLabel: "大会主席",
      },
      {
        label: "会议讲者",
        value: formatBasicExpertLine(props.basicView?.speakerExperts),
        reviewKey: "speakerExpertIds",
        rejectKey: "speakerExpertIds",
        rejectLabel: "会议讲者",
      },
      {
        label: "会议主持",
        value: formatBasicExpertLine(props.basicView?.hostExperts),
        reviewKey: "hostExpertIds",
        rejectKey: "hostExpertIds",
        rejectLabel: "会议主持",
      },
      {
        label: "讨论嘉宾",
        value: formatBasicExpertLine(props.basicView?.discussionGuestExperts),
        reviewKey: "discussionGuestExpertIds",
        rejectKey: "discussionGuestExpertIds",
        rejectLabel: "讨论嘉宾",
      },
    ],
  },
  {
    key: "attendees",
    title: "参会规模",
    description: "重点核对计划人数、实际人数与嘉宾规模。",
    rows: [
      {
        label: "嘉宾人数",
        value: formatText(props.basicView?.guestCount),
        reviewKey: "guestCount",
        rejectKey: "guestCount",
        rejectLabel: "嘉宾人数",
      },
      {
        label: "计划参会人数",
        value: formatText(props.basicView?.attendeeCount),
        reviewKey: "attendeeCount",
        rejectKey: "attendeeCount",
        rejectLabel: "计划参会人数",
      },
      {
        label: "实到人数",
        value: formatText(props.basicView?.attendeeActualCount),
        reviewKey: "attendeeActualCount",
        rejectKey: "attendeeActualCount",
        rejectLabel: "实到人数",
      },
    ],
  },
  {
    key: "content",
    title: "会议内容",
    description: "核对参会对象、议程、改进建议与会议效果描述。",
    rows: [
      {
        label: "主要参会对象",
        value: formatText(props.basicView?.targetAudience),
        reviewKey: "targetAudience",
        rejectKey: "targetAudience",
        rejectLabel: "主要参会对象",
        multiline: true,
      },
      {
        label: "主要议程",
        value: formatText(props.basicView?.mainAgenda),
        reviewKey: "mainAgenda",
        rejectKey: "mainAgenda",
        rejectLabel: "主要议程",
        multiline: true,
      },
      {
        label: "不足/改进建议",
        value: formatText(props.basicView?.improvementSuggestion),
        reviewKey: "improvementSuggestion",
        rejectKey: "improvementSuggestion",
        rejectLabel: "不足/改进建议",
        multiline: true,
      },
      {
        label: "会议效果",
        value: formatText(props.basicView?.meetingEffect),
        reviewKey: "meetingEffect",
        rejectKey: "meetingEffect",
        rejectLabel: "会议效果",
        multiline: true,
      },
    ],
  },
]);
</script>

<template>
  <div class="audit-basic-layout">
    <section
      v-for="section in sections"
      :key="section.key"
      class="audit-section-card"
    >
      <header class="audit-section-card__header">
        <div>
          <div class="audit-section-card__title">{{ section.title }}</div>
          <div class="audit-section-card__subtitle">
            {{ section.description }}
          </div>
        </div>
      </header>

      <div class="audit-basic-list">
        <div
          v-for="row in section.rows"
          :key="row.rejectKey"
          class="audit-basic-row"
        >
          <div class="audit-basic-row__label">{{ row.label }}</div>
          <div
            class="audit-basic-row__value"
            :class="{ 'is-multiline': row.multiline }"
          >
            {{ row.value }}
          </div>
          <div class="audit-basic-row__actions">
            <el-tag
              v-if="!isHigherReview"
              size="small"
              :type="toReviewTagType(row.reviewKey)"
            >
              {{ toReviewResultText(row.reviewKey) }}
            </el-tag>
            <el-button
              v-if="canReject && !isHigherReview"
              size="small"
              type="danger"
              plain
              @click="
                handleRejectMaterialItem(row.rejectKey, row.rejectLabel)
              "
            >
              不通过
            </el-button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.audit-basic-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.audit-section-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.audit-section-card__header {
  padding: 18px 24px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.audit-section-card__title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.audit-section-card__subtitle {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
}

.audit-basic-list {
  display: flex;
  flex-direction: column;
}

.audit-basic-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 24px;
  border-top: 1px solid #f8fafc;
}

.audit-basic-row:first-child {
  border-top: none;
}

.audit-basic-row__label {
  font-size: 13px;
  line-height: 22px;
  color: #64748b;
}

.audit-basic-row__value {
  min-width: 0;
  font-size: 14px;
  line-height: 22px;
  color: #1e293b;
  font-weight: 500;
}

.audit-basic-row__value.is-multiline {
  white-space: pre-wrap;
  word-break: break-word;
}

.audit-basic-row__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 900px) {
  .audit-basic-row {
    grid-template-columns: 1fr;
  }

  .audit-basic-row__actions {
    justify-content: flex-start;
  }
}
</style>
