<template>
    <div class="relative h-full w-full p-5">
        <hc-new-card title="档案脱机存档 - 初始配置" scrollbar>
            <template #extra>
                <el-button hc-btn type="primary" @click="confirmSave">确认保存</el-button>
            </template>
            <el-alert title="数据通常会非常大，请选择一个大容量的存储位置，不建议存在C盘下，请谨慎选择，保存后将不允许修改" type="error" effect="dark" :closable="false" />
            <el-form ref="formRef" class="mt-4 w-full" :model="formModel" :rules="formRules" label-position="left" label-width="auto">
                <el-form-item label="数据存储位置：" prop="dataPath">
                    <el-input v-model="formModel.dataPath">
                        <template #append>
                            <el-button @click="dataPathClick">选择位置</el-button>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
        </hc-new-card>
        <div class="open-dev-tools" @dblclick="openDevTools" />
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { formValidate, getObjValue, isNullES } from 'js-fast-way'
import { exists_file, read_config_file, showOpenDialog, toPage, write_config_file } from '../utils/tools'
import config from '~src/config/index'

defineOptions({
    name: 'HcInit',
})

//基础表单
const formRef = ref(null)
const formModel = ref({})
const formRules = {
    dataPath: {
        required: true,
        trigger: 'blur',
        message: '请选择或输入数据存储位置',
    },
}

onMounted(() => {
    const res = read_config_file()
    formModel.value = setFormModel(res)
})

const setFormModel = (res) => {
    const platform = window.api.platform
    console.log(platform, config.homePath)
    if (!isNullES(res.dataPath)) {
        return res
    }
    if (platform === 'win32') {
        res.dataPath = 'D:\\local-archive-app-data'
    }
    if (platform === 'darwin') {
        res.dataPath = `${window.api.homedir}/local-archive-app-data`
    }
    if (platform === 'linux') {
        res.dataPath = ''
    }
    return res
}

//选择数据存储位置
const dataPathClick = async () => {
    const dataPath = formModel.value.dataPath
    //先创建一个目录
    if (!exists_file(dataPath)) {
        window.api.fs.mkdirSync(dataPath, { recursive: true })
    }
    //打开选择对话框
    const { code, paths } = await showOpenDialog({
        title: '选择数据存储位置',
        buttonLabel: '确认选择',
        multiSelections: false,
        defaultPath: dataPath,
        properties: ['openDirectory', 'createDirectory'],
        message: '请选择一个大容量的存储位置',
    })
    if (code === 200) {
        formModel.value.dataPath = paths[0]
    }
}

//确认保存
const confirmSave = async () => {
    const isForm = await formValidate(formRef.value)
    if (!isForm) return
    const form = getObjValue(formModel.value)
    //先创建一个目录
    if (!exists_file(form.dataPath)) {
        window.api.fs.mkdirSync(form.dataPath, { recursive: true })
    }
    if (!write_config_file(form)) {
        window.$message.error('保存失败')
        return
    }
    window.$message.success('保存成功')
    toPage({
        page: '/project',
        query: { source: '' },
    })
}

//打开开发者工具
const openDevTools = () => {
    window.electron.ipcRenderer.invoke('openDevTools')
}
</script>
