<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-07-03 11:12:04
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-07-29 13:23:58
 * @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\Settings\setPermissions.vue
 * @Description: 设置权限
-->
<template>
  <DSDialog
    v-model="show"
    width="800"
    @close="handleClose"
    class="settings-dialog ds-dialog"
    title="设置"
  >
    <div class="settings-container">
      <div class="settings-sidebar">
        <div
          class="flex flex-col items-center justify-center sidebar-item"
          :class="{ active: activeTab === v.value }"
          @click="setActiveTab(v)"
          v-for="(v, k) in settings"
          :key="k"
        >
          <!-- // TODO 替换icon  -->
          <img src="@/assets/electron.svg" alt="" class="w-[32px]" />
          <span>{{ v.label }}</span>
        </div>
      </div>
      <div class="settings-line"></div>
      <ul class="settings-content">
        <li v-if="activeTab === 'permission'">
          <Permission />
        </li>
        <!-- Add other tabs' content here -->
        <li v-if="activeTab === 'software'">
          <p>Software Settings Content</p>
        </li>
        <li v-if="activeTab === 'plan'">
          <p>Plan Settings Content</p>
        </li>
        <li v-if="activeTab === 'strategy'">
          <p>Strategy Settings Content</p>
        </li>
      </ul>
    </div>
    <template #footer>
      <span class="flex justify-end pt-0 dialog-footer">
        <DSButton type="primary" size="default" @click="handleConfirm" class="mr-[24px] mb-[24px]"
          >确定</DSButton
        >
      </span>
    </template>
  </DSDialog>
</template>

<script setup lang="ts">
// import ThemeSwitcher from '@/components/Theme/themeSwitcher.vue'
import { DSButton } from '@/components/Button'
import { DSDialog } from '@/components/Dialog'

import Permission from './permission.vue'
interface Props {
  /** 弹窗显隐 */
  value: boolean
  // info?: Record<string, any>
}
interface Emits {
  (e: 'update:value', val: boolean): void
}
const props = withDefaults(defineProps<Props>(), {
  value: false
})
const emit = defineEmits<Emits>()

// 处理对话框关闭事件
const handleClose = () => {
  // emits('close');
}

const show = computed({
  get() {
    return props.value
  },
  set(val: boolean) {
    emit('update:value', val)
  }
})
const activeTab = ref('permission')

interface SettingItem {
  label: string
  value: string // 可以是路由地址或者其他唯一标识
  icon?: string // 可选的图标类名或URL
}

const settings: SettingItem[] = [
  {
    label: '权限设置',
    value: 'permission',
    icon: 'fa fa-cog' // 或者自定义的图标类名
  },
  {
    label: '软件设置',
    value: 'software',
    icon: 'fa fa-file-code-o' // 或者自定义的图标类名
  },
  {
    label: '方案设置',
    value: 'scheme',
    icon: 'fa fa-clipboard' // 或者自定义的图标类名
  },
  {
    label: '运行策略',
    value: 'strategy',
    icon: 'fa fa-play-circle-o' // 或者自定义的图标类名
  }
]

const setActiveTab = (tab: SettingItem) => {
  activeTab.value = tab.value
}

const handleConfirm = () => {
  console.log('Confirm')
  // Implement confirm logic here (e.g., save the changes)
  show.value = false // Close the dialog
}
</script>

<style>
@import url('./settingList.scss');
</style>
