<template>
  <n-icon mr-20 size="18" style="cursor: pointer" @click="importConfig()">
    <icon-gg-import />
  </n-icon>
  <n-icon mr-20 size="18" style="cursor: pointer" @click="exportConfig()">
    <icon-ph-export-bold />
  </n-icon>
  <n-modal
    v-model:show="showImportUploader"
    transform-origin="center"
    preset="card"
    title="导入配置"
    :bordered="false"
    size="large"
    style="width: 400px"
    header-style="text-align: center"
  >
    <n-upload
      ref="uploadRef"
      :multiple="false"
      directory-dnd
      :max="1"
      :custom-request="customRequest"
      name="file"
      accept=".json"
      :default-upload="false"
      @before-upload="uploadCheck"
    >
      <n-upload-dragger>
        <div style="margin-bottom: 12px">
          <n-icon size="48" :depth="3">
            <ArchiveIcon />
          </n-icon>
        </div>
        <n-text style="font-size: 16px">
          点击或者拖动文件到该区域来上传
        </n-text>
        <n-p depth="3" style="margin: 8px 0 0 0">
          注意：上传后将覆盖原有的配置以及客户端数据等，请谨慎操作！
        </n-p>
      </n-upload-dragger>
    </n-upload>
    <n-button type="primary" style="margin-left: 40%" @click="submitUpload">确定</n-button>
  </n-modal>
</template>

<script setup>
import api from '@/api/setting'
import { ArchiveOutline as ArchiveIcon } from "@vicons/ionicons5";
import { router } from '@/router'
import event from '@/utils/event/event'

const { $bus } = event();

const showImportUploader = ref(false)
const uploadRef = ref(null)

// 导入
function importConfig() {
  showImportUploader.value = true
}

// 导出
function exportConfig() {
  $dialog.confirm({
    type: 'warning',
    title: '导出配置',
    content: `是否需要导出系统全部配置？`,
    async confirm() {
      api.exportConfig().then(response => {
        const blob = new Blob([JSON.stringify(response.data)], {
          type: "text/plain"
        });
        const link = document.createElement("a"); // 创建a标签
        link.download = "config.json"; // a标签添加属性
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click(); // 执行下载
        URL.revokeObjectURL(link.href); // 释放url
        document.body.removeChild(link); // 释放标签
      })
    },
  })
}

// 上传前检查
function uploadCheck(data) {
  if (data.file.file?.name !== "config.json") {
    $message.error("导入文件只能是[config.json]");
    return false;
  }
  if (data.file.file?.type !== "application/json") {
    $message.error("只能上传json类型文件，请重新上传");
    return false;
  }
  return true;
}

// 自定义上传
function customRequest(file) {
  api.importConfig({
    file: file.file.file,
  }).then(response => {
    if (response.data.code === 200) {
      showImportUploader.value = false;
      switch (router.options.history.location) {
        case "/client":
          $bus.emit('refreshClients',true);
          break;
        case "/setting":
          $bus.emit('refreshSetting',true)
          break;
      }
    } else {
      $message.error(response.data.message);
    }
  })

}

// 点击按钮上传
function submitUpload() {
  uploadRef.value?.submit();
}
</script>
