<script setup lang="ts">
import { ref } from "vue";
import UpdateModal from "./components/update-modal.vue";
import contentConfig from "./config/content.config";
import { httpUpdate, httpAdd } from "/@/api/system/updates";
import { useAsync } from "/@/hooks/core/useAsync";
import { PageEvents } from "/@/hooks/page";

const PageName = "updates";

const updateModalRef = ref<InstanceType<typeof UpdateModal> | null>(null);
const pageContenrRef = ref<any>();

const { run: create, loading: _loading } = useAsync({
  success: () => {
    pageContenrRef.value.onSearch();
    updateModalRef.value.onHidden();
  }
});
const { run: update, loading } = useAsync({
  success: () => {
    pageContenrRef.value.onSearch();
    updateModalRef.value.onHidden();
  }
});

const handleCreate = _data => create(httpAdd(_data));
const handleUpdate = _data => update(httpUpdate(_data));

const events: PageEvents = {
  content: {
    preview: () => updateModalRef.value.onDisplay(),
    create: () => updateModalRef.value.onDisplay(),
    update: row => updateModalRef.value.onDisplay(row)
  }
};

function getUpdateContent(content: string) {
  const chunks = content.split("<br/>");
  return chunks;
}
</script>

<template>
  <PageAuth :pageName="PageName">
    <PageContainer
      :events="events"
      :contentConfig="contentConfig"
      :get-content-ref="ref => (pageContenrRef = ref)"
    >
      <template #expand="row">
        <div class="ml-[60px]">
          <h1 class="font-bold">更新内容</h1>
          <div class="ml-[5px]">
            <div v-html="row.system" />
          </div>
        </div>
      </template>
    </PageContainer>

    <UpdateModal
      ref="updateModalRef"
      :loading="loading || _loading"
      @create="handleCreate"
      @update="handleUpdate"
    />
  </PageAuth>
</template>
