<template>
  <div class="debug-panel" v-if="isVisible">
    <div class="form-item flex left">
        <el-button @click="openResourceDirectory" v-log="{ describe: { action: '打开资源目录' } }">打开资源目录</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import client from "@/stores/modules/client";
import  configInfo  from '@/stores/modules/config';
import icpList from '@/utils/ipc';

const clientStore = client();
const configInfoStore = configInfo();

const isVisible = ref(false);

function showDebugPanel() {
  isVisible.value = true;
}

function hideDebugPanel() {
  isVisible.value = false;
}

function toggleVisibility() {
  isVisible.value = !isVisible.value;
}

function openResourceDirectory() {
  clientStore.ipc.removeAllListeners(icpList.utils.shellFun);
  let params = {
    action: 'openPath',
    params: configInfoStore.appConfig.userDataPath.replaceAll('/', '\\')
  };
  clientStore.ipc.send(icpList.utils.shellFun, params);
}

// 挂载时注册事件监听器
defineExpose({
  showDebugPanel,
  hideDebugPanel,
  toggleVisibility
});
</script>

<style scoped>
.debug-panel {
  padding-bottom: 10px;
}
</style>
