<template>
  <el-card shadow="hover">

    <el-row>
      <el-col :span="20">
        <el-button @click="addMenu">新增菜单</el-button>
        <el-button @click="openAll">全部展开</el-button>
        <el-button @click="closeAll">全部收起</el-button>
      </el-col>
      <el-col :span="4">
        <el-button @click="saveTree">保存</el-button>
        <el-button @click="searchMenus">刷新</el-button>
      </el-col>
    </el-row>

    <br/>

    <vxe-table
        round
        border="inner"
        size="mini"
        keep-source
        :row-config="{isHover: true}"
        :column-config="{resizable: true}"
        :tree-config="{transform: true, rowField: 'id', parentField: 'parentId'}"
        :menu-config="tableMenu"
        :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
        :edit-rules="validRules"
        ref="xTree"
        :data="treeData"
        @menu-click="menuClick"
    >

      <vxe-column field="menuName" title="菜单名称" tree-node :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.menuName" type="text" ></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="menuPath" title="路径" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.menuPath" type="text"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="menuIcon" title="图标" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.menuIcon" type="text"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="enabled" title="是否可用" :edit-render="{}" formatter="formatIsNo">
        <template #edit="{ row }">
          <vxe-switch v-model="row.enabled" open-label="是" close-label="否" size="mini"></vxe-switch>
        </template>
      </vxe-column>
      <vxe-column title="操作" width="100"></vxe-column>
    </vxe-table>

  </el-card>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from 'vue'
import { Plus, ArrowLeft, Search } from '@element-plus/icons-vue'

const {proxy} = getCurrentInstance()

const menusApi = proxy.$launchApi.menusApi

const {handleTreeData} = proxy.$launchUtil.vxeUtils

let xTree = ref(null)

let treeData = ref([])

let tableMenu = ref({
  body:{
    options: [
      [
        { code: 'addSub', name: '添加子菜单'},
        { code: 'delCurrent', name: '移除当前菜单'}
      ]
    ]
  }
})

let validRules = ref({
  menuName:[
    { required: true, message: '该值不能为空' }
  ],
  menuPath:[
    { required: true, message: '该值不能为空' }
  ],
})

function openAll() {
  xTree.value.setAllTreeExpand(true)
}

function closeAll(){
  xTree.value.clearTreeExpand()
}

function saveTree() {
  xTree.value.validate(true).then(valid => {
    if(valid){
      proxy.$message.error("请完成所有的必填项")
    }else{
      let record = xTree.value.getRecordset()
      if(record.insertRecords.length === 0
          && record.removeRecords.length === 0
          && record.updateRecords.length === 0){
        proxy.$message.warning("暂无需要保存的数据")
      }else{
        updateMenus(record)
      }
    }
  })
}

function menuClick({menu,row}) {
  if(menu.code === "addSub"){
    if(row){
      if(row.id){
        let newRow = {
          parentId: row.id,
          enabled: true,
          menuIcon: "Menu"
        }
        xTree.value.insertAt(newRow, -1)
        xTree.value.setTreeExpand(row, true)
      }else{
        proxy.$message.error("请先保存父菜单")
      }
    }else{
      proxy.$message.error("请先新增父菜单")
    }

  }
  if(menu.code === "delCurrent"){

    xTree.value.remove(row)
  }
}

function searchMenus() {
  menusApi.searchAll().then(data => {
    if(data){
      treeData.value = data
    }
  })
}

function updateMenus(record) {
  menusApi.saveTree(handleTreeData(record)).then(data => {
    if(data){
      proxy.$message.success("保存成功")
      searchMenus()
    }
  })
}

function addMenu() {
  let newRow = {
    parentId: null,
    enabled: true,
    menuIcon: "Menu"
  }
  xTree.value.insertAt(newRow, -1)
}

onMounted(() => {

  searchMenus()
})

</script>

<style scoped>

</style>