<template>
  <div class="system">
    <!-- 菜单列表头 -->
    <MenuHeader :title="menuTitle" :buttons="menuHeaderButtons" @click="handleAddMenu" />
    <!-- 菜单列表表格 -->
    <MenuTable :table-data="menuTree" :columns="menuTableColumns" row-key="id">
      <template #action="{ row }">
        <el-button link type="primary" size="small" @click="handleEditMenu(row)"> 编辑 </el-button>
      </template>
    </MenuTable>
  </div>
  <!-- 新增/编辑弹窗 -->
  <MenuDialog
    :visible="dialogVisible"
    :title="dialogTitle"
    :type="dialogType"
    @confirm="handleSubmit"
    @cancel="handleCancel"
    @close="handleClose"
  >
    <MenuForm
      :form-data="menuForm"
      :form-rules="menuFormRules"
      :form-items="menuFormItemOptions"
      ref="menuFormRef"
    />
  </MenuDialog>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
// 组件配置
import MenuHeader from '@/components/common/Header.vue'
import MenuTable from '@/components/common/Table.vue'
import MenuDialog from '@/components/common/Dialog.vue'
import MenuForm from '@/components/common/Form.vue'
import { menuTableColumns, menuFormItemOptions } from './options'
import { rules } from './rules'
import { getSettingApi, createSettingApi, editSettingApi } from '@/api/modules/system/setting'

type SettingItem = {
  id: number
  key: string
  value: string
  description: string
}

// 定义header配置
const menuTitle = ref('系统设置')
const menuHeaderButtons = [
  { label: '新增设置', type: 'primary' as const, icon: Plus, key: 'addMenu' },
]

// 定义表格配置
const menuTree = ref<SettingItem[]>([])

// 定义弹窗配置
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogType = ref('add')

// 定义菜单表单数据
const menuForm = ref({
  key: '',
  value: '',
  description: '',
})
const menuFormRef = ref<FormInstance>()
// 表单验证规则
const menuFormRules = rules()

/**
@description: 新增菜单
**/
const handleAddMenu = () => {
  dialogVisible.value = true
  dialogTitle.value = '新增菜单'
  menuFormItemOptions[0]!.disabled = false
}

/**
@description: 菜单数据处理
**/

// 获取菜单列表
const fetchSettingList = async () => {
  try {
    const data = await getSettingApi()
    menuTree.value = data
  } catch (err) {
    console.error('获取菜单列表失败', err)
  }
}
// 页面加载时获取菜单列表
onMounted(async () => {
  await fetchSettingList()
})

/**
@description: 处理菜单编辑/删除/状态切换
**/
const handleEditMenu = (row: SettingItem) => {
  dialogVisible.value = true
  menuFormItemOptions[0]!.disabled = true
  dialogTitle.value = '编辑菜单'
  dialogType.value = 'edit'
  menuForm.value = {
    ...row
  }
}

/**
@description: 处理弹窗提交/取消/关闭事件
**/
const handleSubmit = async () => {
  console.log('提交菜单表单')
  try {
    await menuFormRef.value?.validate()
    if (dialogType.value === 'add') {
      const params = {
        key: menuForm.value.key,
        value: menuForm.value.value,
        description: menuForm.value.description,
      }
      await createSettingApi(params)
      await fetchSettingList()
    } else {
      await editSettingApi(menuForm.value)
      console.log('编辑菜单成功', menuForm.value)
      await fetchSettingList()
    }
    dialogVisible.value = false
  } catch (err) {
    console.log('表单验证失败', err)
    return
  }
}
const handleCancel = () => {
  dialogVisible.value = false
  dialogType.value = 'add'
  menuForm.value = {
    key: '',
    value: '',
    description: '',
  }
}
const handleClose = () => {
  dialogVisible.value = false
  dialogType.value = 'add'
  menuForm.value = {
    key: '',
    value: '',
    description: '',
  }
}
</script>
