<template>
  <div class="app-container menu">
    <el-tree
      :props="defaultProps"
      :data="treeData"
      node-key="Id"
      :default-expand-all="true"
      :expand-on-click-node="false"
      style="width:80%;"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span v-if="data.FunctionName">{{ node.label }} --------------------(Function)</span>
        <span v-else>{{ node.label }}</span>
        <span>
          <el-button type="text" icon="el-icon-plus" size="small" @click="() => append(data)">Append</el-button>
          <el-button
            type="text"
            icon="el-icon-edit"
            size="small"
            @click="() => edit(data)"
          >Edit</el-button>
          <el-button type="text" icon="el-icon-delete" size="small" @click="() => remove(data)">Delete</el-button>
        </span>
      </span>
    </el-tree>
    <menu-form v-if="model_cfg.visible" :form="currenNode" width="500px" @close="closeModel" />
  </div>
</template>
<script>
import { getMenuFunction, deleteMenuFunction } from '@/api/admin'
import MenuForm from './components/MenuForm'
import { model_cfg } from './menu'
export default {
  name: 'Menu',
  components: { MenuForm },
  data() {
    return {
      model_cfg,
      treeData: [],
      defaultProps: {
        label: 'MenuName',
        children: 'Children'
      },
      dialogVisible: false,
      title: '',
      currenNode: {},
      nodeId: '',
      parentId: ''
    }
  },
  mounted() {
    this.getlist()
  },
  methods: {
    // 获取菜单数据
    getlist() {
      const loading = this.$loading({
        target: document.querySelector('.menu'),
        fullscreen: false,
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading'
      })
      getMenuFunction().then(res => {
        loading.close()
        this.treeData = res.Result
      }).catch(() => { loading.close() })
    },
    // 添加菜单
    append(node) {
      this.currenNode = {}
      this.currenNode.ParentId = node.Id
      this.currenNode.Status = 1
      // this.currenNode.ShowOrder = 0
      this.nodeId = node.Id
      this.model_cfg.title = 'Append'
      this.model_cfg.visible = true
    },
    // 编辑菜单
    edit(node) {
      // eslint-disable-next-line no-unused-vars
      const { Children, CreateTime, CreateUserId, UpdateTime, UpdateUserId, ...obj } = JSON.parse(JSON.stringify(node))
      obj.MetaBreadcrumb = obj.MetaBreadcrumb ? 1 : 0
      obj.Hidden = obj.Hidden ? 1 : 0
      this.currenNode = obj
      this.nodeId = node.Id
      this.model_cfg.title = 'Edit'
      this.model_cfg.visible = true
    },
    // 移除菜单
    remove(node) {
      this.$confirm('Sure to delete?', {
        type: 'warning',
        distinguishCancelAndClose: true,
        confirmButtonText: 'Ok',
        cancelButtonText: 'Cancel'
      })
        .then(() => {
          deleteMenuFunction(node.Id)
            .then(res => {
              if (res.IsSuccess) {
                this.getlist()
                this.$message.success('Deleted successfully!')
              }
            })
        })
    },
    // 关闭弹窗
    closeModel() {
      this.model_cfg.visible = false
      this.getlist()
    }
  }
}
</script>
<style lang="scss">
.menu{
  .el-tree {
  margin-top: 20px;
  }
  .el-tree-node{
    margin-top: 5px;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-dialog__body{
    padding: 10px;
  }
}

</style>
