<template>
  <div class="main">
    <div class="header">
      欢迎回来，{{ name }}
    </div>
    <div class="org-homepage-card">
      <div class="org-homepage-title">机构首页：{{ currentOrgName || "未选择机构" }}</div>
      <div v-if="!orgStore.currentOrgId" class="org-homepage-plain">
        请先在「我的」页选择机构。
      </div>
      <div v-else class="org-homepage-md" v-html="homepageHtml" />
    </div>
    <div class="course-package-section" v-if="orgStore.currentOrgId">
      <div class="section-header">课包商店</div>
      <course-package-store :org-id="orgStore.currentOrgId" compact />
    </div>
  </div>
</template>

<script lang="ts">
import { computedAsync } from "@vueuse/core";
import { computed, defineComponent, onActivated, onMounted, ref } from "vue";
import useUser from "~/store/user";
import useOrg from "~/store/org";
import CoursePackageStore from "~/components/course-package-store.vue";
import { renderOrgHomepageMarkdown } from "~/utils/orgHomepageMarkdown";

export default defineComponent({
  name: "teacher-home",
  components: {
    [CoursePackageStore.name!]: CoursePackageStore,
  },
  setup() {
    const usingUser = useUser();
    const { store: orgStore, getHomepage } = useOrg();
    const markdownSource = ref("");

    const homepageHtml = computedAsync(
      async () => {
        const raw = markdownSource.value.trim();
        if (!raw)
          return '<p class="org-homepage-empty">机构暂未配置首页内容。</p>';
        const html = await renderOrgHomepageMarkdown(raw);
        return html.trim()
          ? html
          : '<p class="org-homepage-empty">机构暂未配置首页内容。</p>';
      },
      '<p class="org-homepage-empty">加载中…</p>',
    );

    const loadHomepage = async () => {
      if (!orgStore.currentOrgId) return;
      const markdownText = await getHomepage(orgStore.currentOrgId);
      markdownSource.value = (markdownText || "").trim();
    };

    const name = computed(() => usingUser.store.current.real_name);
    const currentOrgName = computed(() => {
      const currentOrgId = orgStore.currentOrgId;
      if (!currentOrgId) return "";
      return (
        orgStore.orgs.find((org) => org.id === currentOrgId)?.org_name ||
        currentOrgId
      );
    });

    onMounted(loadHomepage);
    onActivated(loadHomepage);

    return {
      name,
      currentOrgName,
      orgStore,
      homepageHtml,
    };
  },
});
</script>

<style scoped lang="less">
.main {
  width: 100vw;
  overflow: auto;
  padding-bottom: 0.64rem;
  background: #f7f7f7;
  position: relative;

  .header {
    padding: 0.2rem 0.32rem;
    background: #ffffff;
  }

  .org-homepage-card {
    margin: 0.24rem 0.24rem 0;
    padding: 0.24rem;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .org-homepage-title {
    font-weight: 600;
    margin-bottom: 0.16rem;
    color: #333;
  }

  .org-homepage-plain {
    margin: 0;
    color: #444;
    line-height: 1.6;
    font-size: 0.28rem;
  }

  .org-homepage-md {
    font-size: 0.28rem;
    line-height: 1.6;
    color: #444;
    word-break: break-word;
  }

  .org-homepage-md :deep(.org-homepage-empty) {
    color: #969799;
    margin: 0;
  }

  .org-homepage-md :deep(img) {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
  }

  .org-homepage-md :deep(pre) {
    white-space: pre-wrap;
    word-break: break-word;
  }

  .org-homepage-md :deep(h1),
  .org-homepage-md :deep(h2) {
    margin: 0.24rem 0 0.16rem;
    font-weight: 600;
  }

  .org-homepage-md :deep(p) {
    margin: 0.16rem 0;
  }

  .org-homepage-md :deep(ul) {
    padding-left: 0.4rem;
    margin: 0.16rem 0;
  }

  .course-package-section {
    margin: 0 0.24rem 0.24rem;

    .section-header {
      font-weight: 600;
      font-size: 0.32rem;
      color: #333;
      margin-bottom: 0.16rem;
      padding: 0.24rem 0 0.16rem;
    }
  }
}
</style>
