<template>
  <section>
    <preview v-if="!allowLoadPreviewPage" :key="key"></preview>
    <NEmpty v-if="isEmpty" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);" />
    <NModal :show="showModal" :maskClosable="false" :closable="false" style="width: 300px;">
      <NCard>
        <NForm @keyup.enter="handleSubmit">
          <NFormItem label="访问令牌">
            <NInputGroup>
              <NInput v-model:value="accessCredentials" show-password-on="mousedown" type="password"
                style="width: 70%;" />
              <NButton :loading="loading" type="primary" style="width: 30%;" @click="handleSubmit">
                <svg style="transform: rotate(180deg);" t="1682068997810" class="icon" viewBox="0 0 1024 1024"
                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="79416" width="24" height="24">
                  <path
                    d="M512 928H128c-19.2 0-32-12.8-32-32V128c0-19.2 12.8-32 32-32h384c19.2 0 32 12.8 32 32s-12.8 32-32 32H160v704h352c19.2 0 32 12.8 32 32s-12.8 32-32 32z"
                    fill="#fff" p-id="79417" />
                  <path
                    d="M534.4 736c-9.6 0-16-3.2-22.4-9.6l-192-192c-12.8-12.8-12.8-32 0-44.8l192-192c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L387.2 512l169.6 169.6c12.8 12.8 12.8 32 0 44.8-6.4 6.4-16 9.6-22.4 9.6z"
                    fill="#fff" p-id="79418" />
                  <path d="M896 544H342.4c-19.2 0-32-12.8-32-32s12.8-32 32-32H896c19.2 0 32 12.8 32 32s-12.8 32-32 32z"
                    fill="#fff" p-id="79419" />
                </svg>
              </NButton>
            </NInputGroup>
          </NFormItem>
        </NForm>
      </NCard>
    </NModal>
  </section>
</template>

<script setup lang="ts">
import { NEmpty, NCard, NForm, NFormItem, NInput, NButton, NInputGroup } from 'naive-ui'
import { getSessionStorageInfo } from '../preview/utils'
import type { ChartEditStorageType } from '../preview/index.d'
import { SavePageEnum } from '@/enums/editPageEnum'
import { componentInstall, JSONParse, setSessionStorage, setTitle } from '@/utils'
import { StorageEnum } from '@/enums/storageEnum'
import { onMounted, ref, unref } from 'vue'
import Preview from '../preview/index.vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/store/external/modules/user'
import { checkSharePageNeedAccessToken, getPublicToken, getShareContentData } from '@/api/external/sys/share'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { fetchChartComponent } from '@/packages'
import { CreateComponentType } from '@/packages/index.d'
import { CreateComponentGroupType } from '@/packages/index.d'

const allowLoadPreviewPage = ref(true)
const showModal = ref(false)
const ROUTE = useRoute()
const accessCredentials = ref('')
const loading = ref(false)
const userStore = useUserStore()
const chartEditStore = useChartEditStore()

const getToken = async () => {
  const { params } = ROUTE
  const { publicId } = params as Record<'id' | 'publicId', string>
  const { token, refreshToken } = await getPublicToken(publicId)
  userStore.storeShareToken(token, refreshToken)
}

const checkNeedAccessToken = async () => {
  const { params } = ROUTE
  const { id } = params as Record<'id' | 'publicId', string>
  const res = await checkSharePageNeedAccessToken(id)
  return res.data
}

const sharePageHandlerProcess = async () => {
  await getToken()
  const flag = await checkNeedAccessToken()
  if (flag) {
    showModal.value = true
  } else {
    allowLoadPreviewPage.value = false
    await getSharePageContentData()
  }
}

const handleRegisterComponent = (record: (CreateComponentType | CreateComponentGroupType)[]) => {
  const fn = (params: (CreateComponentType | CreateComponentGroupType)[]) => {
    for (const item of params) {
      if (item.isGroup) {
        fn(item.groupList || [])
        continue
      }
      componentInstall(item.chartConfig.chartKey, fetchChartComponent(item.chartConfig))
    }
  }
  fn(record)
}

const isEmpty = ref(false)
const getSharePageContentData = async () => {
  try {
    const { params } = ROUTE
    const { id } = params as Record<'id' | 'publicId', string>
    loading.value = true
    const res = await getShareContentData({ id, accessCredentials: unref(accessCredentials) })
    const { dataViewContent, dataViewName, dataViewId } = res.data
    if (!dataViewContent.content) isEmpty.value = true
    const content = JSONParse(dataViewContent.content || '{}') as ChartEditStorageType
    if (content) {
      // const { editCanvasConfig, requestGlobalConfig, componentList } = content
      // chartEditStore.editCanvasConfig = editCanvasConfig
      // chartEditStore.requestGlobalConfig = requestGlobalConfig
      // chartEditStore.componentList = componentList
      chartEditStore.setPageConfig(content.pageConfig)
      // handleRegisterComponent(componentList)
      content.pageConfig.pageList.forEach(pageItem=>{
        handleRegisterComponent(pageItem.componentList)
      })
    }
    setTitle(dataViewName || '')
    showModal.value = false
    allowLoadPreviewPage.value = unref(isEmpty)
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }

}

const handleSubmit = () => {
  getSharePageContentData()
}

onMounted(() => {
  sharePageHandlerProcess()
})

let key = ref(Date.now())

  // 数据变更 -> 组件销毁重建
  ;[SavePageEnum.JSON, SavePageEnum.CHART].forEach((saveEvent: string) => {
    if (!window.opener) return
    window.opener.addEventListener(saveEvent, async (e: any) => {
      const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
      key.value = Date.now()
    })
  })
</script>