<template>
    <section class="card-flex-column card-height-full card-flex-1">
      <a-card class="search-card-class">
        <a-form layout="inline" labelAlign="right" @keydown.enter.native="handleQuery">
          <a-row :gutter="[16, 16]">
            <a-col :md="6" :sm="24">
              <a-form-item label="菜单名">
                <a-input placeholder="请输入菜单名称" v-model="queryParam.menuName" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="状态">
                <a-select
                  show-search
                  option-filter-prop="label"
                  placeholder="请选择状态"
                  v-model="queryParam.visible"
                  allow-clear
                  style="width: 100px;"
                >
                  <a-select-option v-for="(v, index) in visibleOptions" :key="index" :value="v.value" :label="v.label">{{
                    v.label
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
                <a-button type="primary" @click="handleQuery"> <a-icon type="search" />查询 </a-button>
                <a-button click="resetQuery"> <a-icon type="redo" />重置 </a-button>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
      <a-card class="table-card-class">
        <div class="table-operations">
          <a-button v-hasPermi="['system:menu:add']" type="primary" icon="plus" @click="handleMenuAdd">新增菜单</a-button>
        </div>
        <a-table
          ref="buttonTable"
          rowKey="menuId"
          :loading="loading"
          :scroll="{ x: '1200px', y: innerHeight }"
          :columns="columns"
          :data-source="dataSource"
          :pagination="false"
        >
          <!-- 表格表中操作栏 -->
          <span slot="operation" slot-scope="text, record">
            <a @click="$refs.createForm.handleUpdate(record)" v-hasPermi="['system:menu:edit']"> 修改 </a>
            <a-divider type="vertical" v-if="record.menuType != menuType.F" v-hasPermi="['system:menu:add']" />
            <a
              @click="$refs.createForm.handleAdd(record)"
              v-if="record.menuType != menuType.F"
              v-hasPermi="['system:menu:add']"
            >
              添加下级
            </a>
            <!-- <a @click="$refs.createForm.handleCopy(record)" v-hasPermi="['system:menu:copy']"> 复制 </a> -->
            <a-divider type="vertical" v-if="record.parentId != 0" v-hasPermi="['system:menu:remove']" />
            <a @click="handleMenuDelete(record)" v-if="record.parentId != 0" v-hasPermi="['system:menu:remove']">
              删除
            </a>
            <a-divider type="vertical" v-hasPermi="['system:menu:copy']" />
            <a-dropdown>
              <a-menu slot="overlay" @click="handleMenuClick">
                <a-menu-item key="1">
                  <a
                    @click="$refs.createForm.handleCopy(record)"
                    v-hasPermi="['system:menu:copy']"
                    :class="[`more-button-${fontSize}`]"
                  >
                    复制
                  </a>
                </a-menu-item>
              </a-menu>
              <a>更多<a-icon type="down" /> </a>
            </a-dropdown>
          </span>
        </a-table>
      </a-card>
      <create-form ref="createForm" :orgTree="orgTree" @refresh-list="initialData" />
    </section>
  </template>
  
  <script>
  import Ellipsis from '@/components/Ellipsis'
  import IconSelector from '@/components/IconSelector'
  import CreateForm from './modules/CreateForm'
  import { getMenuTreeDir, getMenus, updateMenu, delMenu, getMenu } from '@/api/system/menu'
  import { requestBuilder, takeTreeByKey, removeEmptyChildren } from '@/utils/util'
  import menuType from '@/constants/menuType'
  import { mixin, mixinDevice } from '@/utils/mixin'
  
  export default {
    name: 'ResourceManager',
    mixins: [mixin, mixinDevice],
    components: {
      Ellipsis,
      IconSelector,
      CreateForm,
    },
    computed: {
      innerHeight() {
        const h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        return h - 270
      },
    },
    data() {
      return {
        loading: false,
        queryParam: {
          menuName: undefined,
          visible: undefined,
        },
        columns: [
          {
            title: '菜单名称',
            dataIndex: 'menuName',
            width: 320,
          },
          {
            title: '菜单类型',
            dataIndex: 'menuType',
  
            customRender: (mType) => {
              switch (mType) {
                case menuType.S:
                  return '系统'
                case menuType.M:
                  return '目录'
                case menuType.C:
                  return '菜单'
                case menuType.F:
                  return '按钮'
              }
            },
          },
          {
            title: '排序',
            dataIndex: 'orderNum',
          },
          {
            title: '状态',
            dataIndex: 'visible',
  
            customRender: (visible) => {
              return visible === '0' ? '显示' : '隐藏'
            },
          },
          {
            title: '组件',
            dataIndex: 'component',
          },
          {
            title: '路径',
            dataIndex: 'path',
          },
          {
            title: '操作',
            dataIndex: 'operation',
            width: 260,
            fixed: 'right',
            scopedSlots: { customRender: 'operation' },
          },
        ],
        dataSource: [],
        orgTree: [],
        visibleOptions: [
          { label: '显示', value: '0' },
          { label: '隐藏', value: '1' },
        ],
  
        menuType: menuType,
      }
    },
    created() {
      this.initialData()
    },
    methods: {
      handleMenuClick(e) {
        console.log('click', e)
      },
      initialData() {
        this.loading = true
        Promise.all([
          getMenuTreeDir(requestBuilder('', { menuType: 'M', platformCode: '0' }, 0, 0)),
          getMenus(this.queryParam),
        ]).then(([treeRes, listRes]) => {
          this.orgTree = treeRes.result
          this.dataSource = removeEmptyChildren(listRes.result)
          this.loading = false
        })
      },
      handleQuery() {
        this.loading = true
        getMenus(this.queryParam).then((res) => {
          this.dataSource = removeEmptyChildren(res.result)
          this.loading = false
        })
      },
      resetQuery() {
        this.queryParam = {
          menuName: undefined,
          visible: undefined,
        }
        this.handleQuery()
      },
      handleMenuAdd() {
        this.$refs.createForm.handleAdd()
      },
      handleMenuDelete(menuRecord) {
        const data = takeTreeByKey(this.orgTree, menuRecord.menuId)
        if (data && data.children && data.children.length > 0) {
          this.$message.error('该节点下存在子节点，无法进行删除操作！')
          return
        }
  
        this.$confirm({
          title: '确认?',
          content: `是否删除${menuRecord.menuName}记录`,
          onOk: () => {
            return delMenu(menuRecord.menuId).then((response) => {
              this.initialData()
              this.$message.success('删除成功', 3)
            })
          },
          onCancel() {},
        })
      },
    },
  }
  </script>
  
  <style scoped>
  ::v-deep .ant-table {
    border: 1px solid #e8e8e8;
  }
  </style>
  