<template>
  <section>
    <preview v-if="!allowLoadPreviewPage" :key="key"></preview>
    <NModal :show="showModal" :maskClosable="false" :closable="false" style="width: 300px;">
      <NCard>
        <NForm @keyup.enter="handleSubmit">
          <NFormItem label="访问令牌">
            <NInput v-model:value="accessCredentials" type="password" />
          </NFormItem>
          <NFormItem :showLabel="false">
            <NButton :loading="loading" type="primary" style="width: 100%;" @click="handleSubmit">访问</NButton>
          </NFormItem>
        </NForm>
      </NCard>
    </NModal>
  </section>
</template>

<script setup lang="ts">
import { NModal, NCard, NForm, NFormItem, NInput, NButton, } from 'naive-ui'
import { getSessionStorageInfo } from '../preview/utils'
import type { ChartEditStorageType } from '../preview/index.d'
import { SavePageEnum } from '@/enums/editPageEnum'
import { JSONParse, setSessionStorage } 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'

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.storeToken(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 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
    const content = JSONParse(dataViewContent.content) as ChartEditStorageType
    if (content) {
      const { editCanvasConfig, requestGlobalConfig, componentList } = content
      chartEditStore.editCanvasConfig = editCanvasConfig
      chartEditStore.requestGlobalConfig = requestGlobalConfig
      chartEditStore.componentList = componentList
    }
    showModal.value = false
    allowLoadPreviewPage.value = false
  } 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>