<template>
  <block-history-list :history="list" @preview="previewHistory" @restore="restoreHistory"></block-history-list>
</template>

<script lang="ts">
/* metaService: engine.plugins.appmanage.PageHistory */
import { ref, watchEffect } from 'vue'
import { BlockHistoryList } from '@opentiny/tiny-engine-common'
import { previewPage } from '@opentiny/tiny-engine-common/js/preview'
import { usePage, useBlock, useModal, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
import { fetchPageHistory } from './http'

export default {
  components: {
    BlockHistoryList
  },
  props: {
    curPageData: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['restorePage'],
  setup(props, { emit }) {
    const { pageSettingState, getFamily } = usePage()
    const { getDateFromNow } = useBlock()
    const { confirm } = useModal()
    const list = ref([])

    const getHistoryList = (pageId) => {
      const { id, version } = getMetaApi(META_SERVICE.GlobalService).getBaseInfo()
      const params = version ? `&app=${id}&version=${version}` : ''

      if (pageId) {
        fetchPageHistory(pageId + params).then((data) => {
          if (!data) {
            return
          }
          data.forEach((item) => {
            item.backupTitle = item.message
            item.backupTime = getDateFromNow(new Date(item.time))
          })
          list.value = data.reverse()
        })
      } else {
        list.value = []
      }
    }

    watchEffect(() => {
      const pageId = pageSettingState.currentPageData?.id || ''
      getHistoryList(pageId)
    })

    const previewHistory = async (item) => {
      if (item) {
        const params = {
          ...item,
          id: Number(item.page),
          history: item.id,
          previewType: 'page'
        }
        params.ancestors = await getFamily(params)
        previewPage(params, true)
      }
    }

    const restoreHistory = (item) => {
      confirm({
        title: '提示',
        message: '您即将还原历史页面，是否继续还原？',
        exec: () => {
          emit('restorePage', item)
        }
      })
    }

    return {
      list,
      previewHistory,
      restoreHistory
    }
  }
}
</script>