<script setup name="menuManage">
import { reactive, ref, onMounted, getCurrentInstance } from 'vue'
import menuDialog from './menuDialog.vue'
import { getSystemAllMenuList, menuDel } from '@/http/apis/systemManage/menuManage'
const { proxy } = getCurrentInstance(),
  searchForm = reactive({
    title: undefined
  }),
  column = reactive([
    {
      label: '菜单名称',
      key: 'title',
      prop: 'title',
      minWidth: '200'
    },
    {
      label: '排序',
      key: 'sort',
      prop: 'sort'
    },
    {
      label: '图标',
      key: 'icon',
      prop: 'icon'
    },
    {
      label: '页面路径',
      key: 'path',
      prop: 'path',
      minWidth: '200'
    },
    {
      label: '创建时间',
      key: 'createOn',
      prop: 'createOn',
      width: '180'
    },
    {
      label: '操作',
      slot: 'action',
      width: '120',
      fixed: 'right'
    }
  ]),
  tableListRef = ref(),
  total = ref(0),
  data = ref([]),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await getSystemAllMenuList({ ...searchForm })
    data.value = res.data
  },
  // 搜索菜单名称
  search = () => {
    data.value = deepTree(data.value, searchForm.title)
  },
  deepTree = (tree, val) => {
    return tree.map(x => {
      if (x && x.children) {
        x.children = deepTree(x.children, val)
      }
      return x
      // 无检索值val时筛选children .length > 0，有筛选值时 item.title.indexOf(val) > -1
    }).filter(item => val === '' || item.title.indexOf(val) > -1 || item.children?.length > 0)
  },
  reset = () => {
    searchForm.title = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  // 操作弹窗
  dialogData = reactive({
    visible: false,
    rowData: undefined
  }),
  add = () => {
    dialogData.visible = true
    dialogData.rowData = undefined
  },
  edit = row => {
    dialogData.visible = true
    dialogData.rowData = row
  },
  // 获取删除的菜单，当前id以及下级id集合
  getDelIds = (data) => {
    const ids = []
    data.forEach(i => {
      if (i.children?.length) {
        getDelIds(i.children)
      }
      ids.push(i.id)
    })
    return ids
  },
  // 删除菜单
  delData = data => {
    const ids = getDelIds([data])
    proxy.$messageBox
      .confirm('是否删除该数据?', '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await menuDel(ids)
        proxy.$message.success('删除成功！')
        getTableData()
      })
  },
  close = flag => {
    dialogData.visible = false
    if (flag) {
      getTableData()
    }
  }
onMounted(() => {
  getTableData()
})
</script>

<template>
  <el-card shadow="never" class="search mb-16">
    <el-form label-suffix=":" :model="searchForm" size="small">
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="菜单名称">
            <el-input v-model="searchForm.title" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item class="btn">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <el-card shadow="never">
    <template #header>
      <div class="flex justify-between items-center">
        <span>菜单列表</span>
        <el-button
          type="primary"
          icon="Plus"
          size="small"
          @click="add"
        >
          新增菜单
        </el-button>
      </div>
    </template>
    <table-list
      ref="tableListRef"
      :column="column"
      :data="data"
      :total="total"
      row-key="id"
      :pagination="false"
      @get-table-data="getTableData"
    >
      <template #action="{ scope }">
        <a class="text-primary" @click="edit(scope.row)">编辑</a>
        <a class="text-danger" @click="delData(scope.row)">删除</a>
      </template>
    </table-list>
  </el-card>
  <menu-dialog
    :visible="dialogData.visible"
    :data="dialogData.rowData"
    @close="close"
  />
</template>
