<!-- 右侧工具栏 -->
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { useEditorStore } from '@/stores/editor'
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus'

const editorStore = useEditorStore()
const { page } = storeToRefs(editorStore)

const visible = ref(false)
const jsonContent = ref('')

const inputRef = useTemplateRef<HTMLInputElement>('inputRef')

// 显示 JSON 编辑器
const showJson = () => {
  visible.value = true
  jsonContent.value = JSON.stringify(page.value, null, 2)
}

// 确认编辑 JSON
const onConfirm = () => {
  const newPage = JSON.parse(jsonContent.value)
  editorStore.setPage(newPage)
  visible.value = false
}

// 导出文件
const onExport = () => {
  const json = JSON.stringify(page.value, null, 2)
  const blob = new Blob([json], { type: 'application/json;charset=utf-8' })

  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'design.json'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)

  URL.revokeObjectURL(url)
}

// 导入文件
const onImport = () => {
  inputRef.value?.click()
}

// 文件选择变化处理
const onFileChange = (e: Event) => {
  const target = e.target as HTMLInputElement
  const file = target.files?.[0]
  if (!file) return

  const reader = new FileReader()
  // 读取文件完成后的回调
  reader.onload = (e) => {
    const content = e.target?.result as string
    try {
      const newPage = JSON.parse(content)
      editorStore.setPage(newPage)
      ElMessage.success('导入成功')
    } catch (error) {
      console.error('导入的文件不是有效的 JSON 文件', error)
      ElMessage.error('导入的文件不是有效的 JSON 文件')
    }
  }
  // 读取文件内容
  reader.readAsText(file)
}
</script>

<template>
  <div class="flex items-center justify-end gap-5">
    <span class="border p-1 rounded-lg"><Icon icon="icon-park-outline:preview-open"></Icon></span>
    <span class="border p-1 rounded-lg" @click="showJson"><Icon icon="si:json-line"></Icon></span>
    <span class="border p-1 rounded-lg"><Icon icon="hugeicons:internet"></Icon></span>
    <span class="border p-1 rounded-lg" @click="onImport" title="导入">
      <Icon icon="lets-icons:import"> </Icon>
    </span>
    <span class="border p-1 rounded-lg" @click="onExport" title="导出">
      <Icon icon="lets-icons:export"> </Icon>
    </span>

    <input ref="inputRef" type="file" class="hidden" @change="onFileChange" />

    <el-drawer v-model="visible" title="编辑 JSON" class="json-drawer" destroy-on-close>
      <MonacoEditor v-model="jsonContent" lang="json" />

      <template #footer>
        <div class="flex justify-end gap-2">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="onConfirm">确认</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
