<template>
  <el-dialog
    v-model="appStore.showGeneralModal"
    :title="$t('generalSetting')"
    width="440px"
    :modal="false"
    :close-on-click-modal="false"
    align-center
  >
    <el-form label-position="top">
      <el-form-item :label="$t('language')">
        <el-select :model-value="appStore.lang" @change="(val) => appStore.setLang(val)">
          <el-option label="中文" value="zh_CN"></el-option>
          <el-option label="English" value="en_US"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('theme')">
        <el-select :model-value="appStore.theme" @change="(val) => appStore.setTheme(val)">
          <el-option :label="$t('dark')" value="dark"></el-option>
          <el-option :label="$t('light')" value="light"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="sunmicro.exe路径">
        <el-input spellcheck="false" v-model="appStore.sunmicroPath">
          <template #append>
            <el-button @click="selectPath"><LuFolder :size="16" /></el-button>
          </template>
        </el-input>
      </el-form-item>
      <div class="pl-0px">
        <el-checkbox v-model="appStore.showLink">{{ $t('link') }}</el-checkbox>
        <el-checkbox v-model="appStore.showDownload">{{ $t('download') }}</el-checkbox>
      </div>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="appStore.showGeneralModal = false">{{
        $t('confirm')
      }}</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store/modules/app'
import { LuFolder } from 'vue-icons-plus/lu'

const appStore = useAppStore()

// 选择sunmicro.exe路径
const selectPath = async () => {
  const path = await window.electron.ipcRenderer.invoke('get-file')

  if (path) {
    appStore.sunmicroPath
  }
}
</script>

<style scoped></style>
