<template>
  <div class="comprehensive-table-container auto-height-container" :class="{ 'fullscreen-container': isFullscreen }">
    <vab-query-form>
      <vab-query-form-top-panel>
        <el-form ref="queryRef" inline label-width="70px" :model="queryForm" @submit.prevent>
          <el-form-item label="菜单名称" prop="menuName">
            <el-input v-model="queryForm.menuName" clearable placeholder="请输入菜单名称" style="width: 200px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item v-show="!fold" label="状态" prop="status">
            <el-select v-model="queryForm.status" clearable placeholder="菜单状态" style="width: 200px">
              <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="Search" :loading="listLoading" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            <el-button class="hidden-xs-only" text type="primary" @click="handleFold">
              <span v-if="fold">展开</span>
              <span v-else>合并</span>
              <vab-icon class="vab-dropdown" :class="{ 'vab-dropdown-active': fold }" icon="arrow-up-s-line" />
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-top-panel>
      <vab-query-form-left-panel>
        <el-button icon="Plus" type="primary" @click="handleAdd">添加</el-button>
        <el-button icon="Sort" plain type="info" @click="toggleExpandAll">展开/折叠</el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel>
        <div class="custom-table-right-tools">
          <el-button @click="handleQuery">
            <vab-icon icon="refresh-line" />
          </el-button>
          <el-button @click="clickFullScreen">
            <vab-icon :icon="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'" />
          </el-button>
        </div>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table
      v-if="refreshTable"
      ref="tableRef"
      v-loading="listLoading"
      border
      :data="list"
      :default-expand-all="isExpandAll"
      row-key="menuId"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="菜单名称" prop="menuName" :show-overflow-tooltip="true" width="160" />
      <el-table-column align="center" label="图标" prop="icon" width="160" />
      <el-table-column label="排序" prop="orderNum" width="60" />
      <el-table-column label="权限标识" min-width="160" prop="perms" />
      <el-table-column label="组件路径" min-width="300" prop="component" :show-overflow-tooltip="true" />
      <el-table-column label="类型" prop="menuType" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.menuType === 'M'" type="primary">目录</el-tag>
          <el-tag v-if="scope.row.menuType === 'C'" type="success">菜单</el-tag>
          <el-tag v-if="scope.row.menuType === 'F'" type="info">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="显示" prop="menuType" width="100">
        <template #default="scope">
          <dict-tag :options="sys_show_hide" :value="scope.row.visible" />
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" width="100">
        <template #default="scope">
          <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="createTime" width="160" />
      <el-table-column align="center" fixed="right" label="操作" width="240">
        <template #default="scope">
          <el-button icon="Edit" link type="primary" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button icon="Plus" link type="primary" @click="handleAdd(scope.row)">新增</el-button>
          <el-button icon="Delete" link type="primary" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>

    <menu-management-edit2 ref="editRef" @fetch-data="fetchData" />
  </div>
</template>

<script lang="ts" setup>
import type { TableInstance } from 'element-plus'
import { doDelete, listMenu } from '/@/api/menuManagement'

defineOptions({
  name: 'MenuManagement',
})

const { proxy } = getCurrentInstance() as any
const { sys_normal_disable, sys_show_hide } = proxy.useDict('sys_normal_disable', 'sys_show_hide')

const { exit, enter, isFullscreen: _isFullscreen } = useFullscreen()
const isFullscreen = ref<boolean>(false)

const isExpandAll = ref(false)
const refreshTable = ref(true)
const fold = ref<boolean>(true)
const tableRef = ref<TableInstance>()
const editRef = ref<any>(null)
const list = ref<any>([])
const listLoading = ref<boolean>(true)

const queryForm = reactive<any>({
  menuName: undefined,
  visible: undefined,
})

watch(
  _isFullscreen,
  () => {
    if (_isFullscreen.value) isFullscreen.value = true
    else isFullscreen.value = false
  },
  { immediate: true }
)

onActivated(() => {
  tableRef.value?.doLayout()
})

onBeforeMount(() => {
  fetchData()
})

/** 点击全屏 */
const clickFullScreen = () => {
  isFullscreen.value = !isFullscreen.value
  isFullscreen.value ? enter() : exit()
}

/** 搜索条件折叠 */
const handleFold = () => {
  fold.value = !fold.value
}

/** 展开/折叠操作 */
function toggleExpandAll() {
  refreshTable.value = false
  isExpandAll.value = !isExpandAll.value
  nextTick(() => {
    refreshTable.value = true
  })
}

/** 查询菜单列表 */
const fetchData = async () => {
  listLoading.value = true
  const pp = Object.assign({}, queryForm)
  const { data } = (await listMenu(pp)) as any
  list.value = proxy.handleTree(data, 'menuId')
  listLoading.value = false
}

/** 搜索按钮操作 */
function handleQuery() {
  fetchData()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

/** 新增按钮操作 */
const handleAdd = (row: any = {}) => {
  editRef.value.showAdd(row)
}

/** 修改按钮操作 */
const handleUpdate = (row: any = {}) => {
  editRef.value.showEdit(row)
}

/** 删除按钮操作 */
const handleDelete = (row: any = {}) => {
  if (row.menuId) {
    $baseConfirm(`是否确认删除菜单名称为"${row.menuName}"的数据项吗?`, null, async () => {
      const { msg }: any = await doDelete(row.menuId)
      $baseMessage(msg, 'success', 'hey')
      await fetchData()
    })
  }
}
</script>
