<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div>
        <vxe-toolbar :data="tableData"
                     :custom="{trigger: 'hover', immediate: true, isFooter: false, checkMethod: checkColumnMethod}">
            <template v-slot:buttons>
                <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>
                <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
            </template>
            <template v-slot:tools>
                <Input :search="true" v-model="filterName" placeholder="请输入名称" @on-search="handleSearch"/>
            </template>
        </vxe-toolbar>
        <vxe-table
                resizable
                border
                ref="xTree"
                row-id="id"
                :row-key="true"
                :loading="tableLoading"
                show-overflow="tooltip"
                highlight-hover-row
                align="center"
                header-align="center"
                :data.sync="tableData"
                :customs.sync="columns"
                :tree-config="{children: 'children', expandAll: true, line: true}">
            <!--<vxe-table-column type="seq" width="200" title="序号" tree-node></vxe-table-column>-->
            <vxe-table-column header-align="center" align="left" width="25%" field="name" title="名称" tree-node>
                <template v-slot="{ row }">
                    <a @click="update(row)">
                        <Button type="success" size="small" v-if="row.type==2">
                            <Icon :type="row.path_icon" v-if="row.path_icon"></Icon>
                            {{ row.name }}
                        </Button>
                        <div v-else>
                            <Icon :type="row.path_icon" v-if="row.path_icon"></Icon>
                            {{ row.name }}
                        </div>
                    </a>
                </template>
            </vxe-table-column>
            <vxe-table-column field="btn_permission" title="btn标识"></vxe-table-column>
            <vxe-table-column field="path" title="vue链接"></vxe-table-column>
            <vxe-table-column field="href" title="老链接"></vxe-table-column>
            <vxe-table-column field="sort" title="排序"></vxe-table-column>
            <vxe-table-column field="isShow" title="pc端菜单是否可见">
                <template v-slot="{row}">
                    <Icon type="md-checkmark-circle" size="18" v-if="row.isShow==1" color="green"/>
                    <Icon type="md-close-circle" size="18" v-else color="red"/>
                </template>
            </vxe-table-column>
            <vxe-table-column field="permission" title="权限标识"></vxe-table-column>
            <vxe-table-column field="menu_permission" title="菜单标识"></vxe-table-column>
            <vxe-table-column min-width="20%" title="操作">
                <template v-slot="{ row }">
                    <Button size="small" class="actionBtn" type="primary" v-if="row.type!=2" @click="add(row)">添加下级
                    </Button>
                    <Button size="small" class="actionBtn" type="info" @click="update(row)">修改</Button>
                    <Button v-has="'SYS_menu_shanchu'" size="small" class="actionBtn" type="error" @click="remove(row.id)">删除</Button>
                </template>
            </vxe-table-column>
        </vxe-table>
    </div>
</template>

<script>
import { getMenuList, getSuperMenuList, deleteMenu } from '../../../../../api/system/system'

export default {
  name: 'menuList',
  props: {},
  data () {
    return {
      originData: [],
      superMenuData: [],
      tableData: [],
      columns: [],
      tableLoading: false,
      filterName: ''
    }
  },
  mounted () {
    this.findList()
  },
  methods: {
    checkColumnMethod ({ column }) {
      if (column.property === 'name') {
        return false
      }
      return true
    },
    findList () {
      this.tableLoading = true
      getMenuList().then(ret => {
        let data = ret.data
        let superMenuData = []
        if (data.errcode === 0) {
          this.tableLoading = false
          // 对父级对象数据进行处理
          data.data.forEach(item => {
            if (item.parent) {
              item.parent_id = item.parent.id
              item.parent_name = item.parent.name
              item.parent_sort = item.parent.sort
            }
            if (item.id) {
              superMenuData.push({
                name: item.name,
                id: item.id,
                parent_id: item.parentId,
                parent_ids: item.parent_ids
              })
            }
          })
          this.superMenuData = superMenuData
          // 转换成树形数据
          this.originData = this.$common.xeUtils.clone(this.$common.toTree(data.data, 'children', 'id', 'parent_id'), true)
          this.handleSearch(data.data)
          // this.superMenuList()
        } else {
          this.error(data)
          this.tableLoading = false
        }
      })
    },
    superMenuList () {
      getSuperMenuList().then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.superMenuData = data.data
        } else {
          this.error(data)
        }
      })
    },
    handleSearch (data) {
      // 搜索
      this.tableLoading = true
      let filterName = this.$common.xeUtils.toString(this.filterName).trim()
      if (filterName) {
        let options = { children: 'children' }
        let searchProps = ['name']
        this.tableData = this.$common.xeUtils.searchTree(this.originData, item => searchProps.some(key => this.$common.xeUtils.toString(item[key]).indexOf(filterName) > -1), options)
        this.tableLoading = false
        // 搜索之后默认展开所有子节点
        this.$nextTick(() => {
          this.$refs.xTree.setAllTreeExpansion(true)
        })
      } else {
        this.tableData = this.originData
        this.tableLoading = false
      }
    },
    add (data) {
      this.$emit('addOption', data)
    },
    update (data) {
      this.$emit('updateOption', data)
    },
    remove (data) {
      this.$Modal.confirm({
        title: '确认删除此菜单么？',
        content: '此操作会删除该菜单下全部菜单',
        loading: true,
        onOk: () => {
          this.deleteMenu(data)
        }
      })
    },
    deleteMenu (val) {
      deleteMenu({ id: val }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.findList()
          this.success()
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    },
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  watch: {}
}
</script>

<style scoped>
    .actionBtn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
</style>
