<script setup lang="ts">
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { IFrame } from '@/components/IFrame'
import { useMessage } from '@/hooks/web/useMessage'

defineOptions({ name: 'InfraFilePreview' })

const { createMessage } = useMessage()

const rouer = useRouter()
const previewUrl = ref<string | undefined>(undefined)

onMounted(() => {
  if (!previewUrl.value)
    createMessage.success('未知文件地址!')
})

previewUrl.value = rouer.currentRoute.value.query?.url as string

const iframeRef = ref<InstanceType<typeof IFrame> | null>(null)

const isShow = ref(false)

function sendMessage() {
  if (iframeRef.value) {
    iframeRef.value.sendMessageToIframe(JSON.stringify({
      // MessageId: 'CallPythonScript',
      // SendTime: Date.now(),
      // Values: {
      //   ScriptFile: 'InsertText.py',
      //   Function: 'InsertHello',
      //   Values: {
      //
      //   },
      // },

      MessageId: isShow.value ? 'Hide_StatusBar' : 'Show_StatusBar',
      SendTime: Date.now(),
      Values: {},

      // Values: { Mimetype: 'text/plain;charset=utf-8', Data: 'foo' },
    }))

    isShow.value = !isShow.value
  }
}

function findAllBookmark() {
  if (iframeRef.value) {
    iframeRef.value.sendMessageToIframe(JSON.stringify({
      MessageId: 'CallPythonScript',
      SendTime: Date.now(),
      ScriptFile: 'BookmarkQuery.py',
      Function: 'FindAllBookmarks',
      // Values: { text: { type: 'string', value: '111222' } },
    }))
  }
}

function handleDoReplaceBookmark() {
  if (iframeRef.value) {
    iframeRef.value.sendMessageToIframe(JSON.stringify({
      MessageId: 'CallPythonScript',
      SendTime: Date.now(),
      ScriptFile: 'BookmarkExec.py',
      Function: 'ReplaceBookmark',
      Values: { param: { type: 'string', value: JSON.stringify(
        {
          text: {
            row1: `${Date.now()}_row_1`,
            row2: `${Date.now()}_row_2`,
            h1: `${Date.now()}_h1`,
          },
          table: [
            {
              tableIndex: 0,
              loopRowIndex: 1,
              data: [
                {
                  c1: '11',
                  c2: '12',
                  c3: '13',
                  c4: '14',
                },
                {
                  c1: '21',
                  c2: '22',
                  c3: '23',
                  c4: '24',
                },
              ],
            },
          ],
        },
      ) } },
    }))
  }
}

function readEvent() {
  if (iframeRef.value) {
    iframeRef.value.sendMessageToIframe(JSON.stringify({
      MessageId: 'Host_PostmessageReady',
      SendTime: Date.now(),
    }))
  }
}
</script>

<template>
  <div>
    <div>
      <a-button @click="readEvent">
        readEvent
      </a-button>
      <a-button @click="sendMessage">
        Send Message
      </a-button>
      <a-button @click="findAllBookmark">
        findAllBookmark
      </a-button>
      <a-button @click="handleDoReplaceBookmark">
        Replace
      </a-button>
    </div>
    <i-frame v-if="previewUrl" ref="iframeRef" :src="previewUrl" />
  </div>
</template>
