<template>
  <div id="menuManagement">
    <el-row :gutter="24">
      <el-col :span="6">
        <el-button type="primary" size="small" class="menu-add_btn" @click="openMenuFormDlg()">{{ $t('system.permission.addMenu') }}</el-button>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple">
          <span v-if="current.menuId !== null" style="height: 32px;line-height: 32px;font-size: 14px;color: #606266;margin-left: 5px;">{{ $t('system.permission.currentMenu') }}:{{ current.menuName }}</span>
          <el-button-group>
            <el-button type="primary" :disabled="current.menuId == null" size="small" icon="el-icon-plus" :title="$t('system.permission.add')" @click="openAddPermDlg" />
            <el-button type="primary" :disabled="deleteData.length === 0" size="small" icon="el-icon-delete" :title="$t('system.permission.delete')" @click="deletePermissions" />
          </el-button-group>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="6">
        <el-tree
          v-loading="treeLoading"
          :data="menuTree"
          highlight-current
          :expand-on-click-node="false"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node" @click="getChildrenMenus(data)">
            <span>{{ data.permName }}</span>
            <span @click.stop="">
              <el-dropdown size="mini" trigger="click" placement="bottom" @command="handleCommand">
                <span class="el-dropdown-link">
                  <el-button class="menu-edit_btn" type="primary" icon="el-icon-edit" circle />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="{type:'addChildMenu',parentId:data.permId}"><span>{{ $t('system.permission.addChildMenu') }}</span></el-dropdown-item>
                  <el-dropdown-item :command="{type:'modifyMenu',menuId:data.permId}"><span>{{ $t('system.permission.modifyMenu') }}</span></el-dropdown-item>
                  <el-dropdown-item :command="{type:'deleteMenu',menuId:data.permId}"><span>{{ $t('system.permission.deleteMenu') }}</span></el-dropdown-item>
                  <el-dropdown-item :command="{type:'moveUp',menuId:data.permId}"><span>{{ $t('system.permission.moveUp') }}</span></el-dropdown-item>
                  <el-dropdown-item :command="{type:'moveDown',menuId:data.permId}"><span>{{ $t('system.permission.moveDown') }}</span></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </span>
        </el-tree>
      </el-col>
      <el-col :span="18">
        <div class="grid-content panel">
          <el-table
            v-loading="tableLoading"
            :data="permList"
            style="width: 100%;min-height:600px"
            @select="selectPermCheckbox"
            @select-all="selectPermCheckbox"
          >
            <el-table-column fixed label="选择" type="selection" width="50" />
            <el-table-column type="index" prop="name" :label="$t('system.permission.table.index')" width="100" />
            <el-table-column prop="permName" :label="$t('system.permission.table.permName')" width="300" />
            <el-table-column prop="permCode" :label="$t('system.permission.table.permCode')" width="400" />
            <el-table-column :label="$t('system.permission.table.operation')" width="200">
              <template slot-scope="scope">
                <el-button type="text" @click="modifyPermission(scope.row.permId)">{{ $t('system.permission.table.modify') }}</el-button>
                <el-button type="text" @click="deletePermission(scope.row.permId)">{{ $t('system.permission.table.delete') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <!--  新增/修改菜单  -->
    <el-dialog :close-on-click-modal="false" :title="$t('system.permission.menuDlg.title')" :visible.sync="addOrEditMenuDlgVisible" width="600px">
      <el-form ref="menuForm" :model="menuForm" :rules="rules" class="demo-ruleForm">
        <el-form-item :label="$t('system.permission.menuDlg.menuName')" prop="permName" label-width="120px" :rules="[{required: true, message: $t('system.permission.menuDlg.valid.menuName'), trigger: 'blur'}]">
          <el-input v-model="menuForm.permName" />
        </el-form-item>
        <el-form-item :label="$t('system.permission.menuDlg.menuCode')" prop="permCode" label-width="120px" :rules="[{required: true, message: $t('system.permission.menuDlg.valid.menuCode'), trigger: 'blur'}]">
          <el-input v-model="menuForm.permCode" />
        </el-form-item>
        <el-form-item :label="$t('system.permission.menuDlg.isDefault')" prop="isDefault" label-width="120px" :rules="[{required: true, message: $t('system.permission.menuDlg.valid.isDefault'), trigger: 'blur'}]">
          <el-select v-model="menuForm.isDefault" clearable>
            <el-option :label="$t('common.bool.no')" :value="0" />
            <el-option :label="$t('common.bool.yes')" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('system.permission.menuDlg.remark')" label-width="120px">
          <label>{{ $t('system.permission.menuDlg.remarkContent') }}</label>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addOrEditMenuDlgVisible=false">{{ $t('common.btn.cancel') }}</el-button>
        <el-button type="primary" :loading="addOrEditMenuBtnLoading" @click="addOrEditMenu()">{{ $t('common.btn.submit') }}</el-button>
      </div>
    </el-dialog>

    <!--  新增/修改权限  -->
    <el-dialog :close-on-click-modal="false" :title="$t('system.permission.permDlg.title')" :visible.sync="addOrEditPermDlgVisible" width="600px">
      <el-form ref="permForm" :model="permForm" :rules="rules" class="demo-ruleForm">
        <el-form-item :label="$t('system.permission.permDlg.permName')" prop="permName" label-width="120px" :rules="[{required: true, message: $t('system.permission.permDlg.valid.permName'), trigger: 'blur'}]">
          <el-input v-model="permForm.permName" />
        </el-form-item>
        <el-form-item :label="$t('system.permission.permDlg.permCode')" prop="permCode" label-width="120px" :rules="[{required: true, message: $t('system.permission.permDlg.valid.permCode'), trigger: 'blur'}]">
          <el-input v-model="permForm.permCode" />
        </el-form-item>
        <el-form-item :label="$t('system.permission.permDlg.belongMenu')" label-width="120px">
          <label>{{ current.menuName }}</label>
        </el-form-item>
        <el-form-item :label="$t('system.permission.permDlg.isDefault')" prop="isDefault" label-width="120px" :rules="[{required: true, message: $t('system.permission.permDlg.valid.isDefault'), trigger: 'blur'}]">
          <el-select v-model="permForm.isDefault" clearable>
            <el-option :label="$t('common.bool.no')" :value="0" />
            <el-option :label="$t('common.bool.yes')" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('system.permission.permDlg.remark')" label-width="120px">
          <label>{{ $t('system.permission.permDlg.remarkContent') }}</label>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addOrEditPermDlgVisible = false">{{ $t('common.btn.cancel') }}</el-button>
        <el-button type="primary" :loading="addOrEditPermBtnLoading" @click="addOrEditPerm()">{{ $t('common.btn.submit') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllMenu,
  getPermInfo,
  addMenu,
  moveMenuSort,
  getMenuChildrenPerm,
  deleteMenu,
  editMenu,
  deleteMore
} from '../../../api/system/perm'

export default {
  name: 'PermissionManagement',
  mixins: [],
  data() {
    return {
      menuTree: [],
      permList: [],
      tableLoading: false,
      treeLoading: true,
      rules: {},
      addOrEditMenuDlgVisible: false,
      addOrEditMenuBtnLoading: false,
      menuForm: {
        isMenu: 1,
        parentId: 0,
        permId: null,
        permCode: '',
        permName: '',
        isDefault: 0
      },
      current: {
        menuId: null,
        menuName: null
      },
      addOrEditPermDlgVisible: false,
      addOrEditPermBtnLoading: false,
      permForm: {
        isMenu: 0,
        parentId: 0,
        permId: null,
        permCode: '',
        permName: '',
        isDefault: 0
      },
      deleteData: []
    }
  },
  mounted() {
    this.getAllMenu()
  },
  methods: {
    getAllMenu() {
      this.treeLoading = true
      getAllMenu().then(res => {
        this.menuTree = res.result
        this.treeLoading = false
      }, () => {
        this.treeLoading = false
      })
    },
    initMenuForm() {
      if (this.$refs.menuForm !== undefined) {
        this.$refs.menuForm.resetFields()
      }
      this.menuForm = {
        isMenu: 1,
        parentId: 0,
        permId: null,
        permCode: '',
        permName: '',
        isDefault: 0
      }
    },
    openMenuFormDlg() {
      this.initMenuForm()
      this.addOrEditMenuDlgVisible = true
    },
    addOrEditMenu() {
      this.$refs.menuForm.validate((valid) => {
        if (valid) {
          this.addOrEditMenuBtnLoading = true;
          (this.menuForm.permId !== null ? editMenu(this.menuForm) : addMenu(this.menuForm)).then(res => {
            this.$message.success(this.$t('common.operationOk'))
            this.addOrEditMenuDlgVisible = false
            this.addOrEditMenuBtnLoading = false
            this.getAllMenu()
          }, () => {
            this.addOrEditMenuBtnLoading = false
          })
        }
      })
    },
    getChildrenMenus(data) {
      if (data.isMenu === 1 && data.children.length === 0) {
        this.deleteData = []
        this.current.menuId = data.permId
        this.current.menuName = data.permName
        this.tableLoading = true
        getMenuChildrenPerm({ permId: data.permId }).then(res => {
          this.permList = res.result
          this.tableLoading = false
        }, () => {
          this.tableLoading = false
        })
      }
    },
    initPermForm() {
      if (this.$refs.permForm !== undefined) {
        this.$refs.permForm.resetFields()
      }
      this.permForm = {
        isMenu: 0,
        parentId: 0,
        permId: null,
        permCode: '',
        permName: '',
        isDefault: 0
      }
    },
    openAddPermDlg() {
      if (!this.current.menuId) {
        this.$message.warning(this.$t('system.permission.selectOneMenu'))
      } else {
        this.initPermForm()
        this.permForm.parentId = this.current.menuId
        this.addOrEditPermDlgVisible = true
      }
    },
    addOrEditPerm() {
      this.$refs.permForm.validate((valid) => {
        if (valid) {
          this.addOrEditPermBtnLoading = true;
          (this.permForm.permId !== null ? editMenu(this.permForm) : addMenu(this.permForm)).then(res => {
            this.$message.success(this.$t('common.operationOk'))
            getMenuChildrenPerm({ permId: this.current.menuId }).then(res => {
              this.permList = res.result
            })
            this.addOrEditPermDlgVisible = false
            this.addOrEditPermBtnLoading = false
          }, () => {
            this.addOrEditPermBtnLoading = false
          })
        }
      })
    },
    deletePermission(permissionId) {
      this.$confirm(this.$t('system.permission.deletePermTip'), this.$t('common.tip'), { type: 'error' }).then(() => {
        deleteMenu({ permId: permissionId }).then(res => {
          this.$message.success(this.$t('common.operationOk'))
          getMenuChildrenPerm({ permId: this.current.menuId }).then(res => {
            this.permList = res.result
          })
        })
      }, () => {
      })
    },
    deletePermissions() {
      if (this.deleteData.length === 0) {
        this.$message.warning(this.$t('system.permission.selectOnePerm'))
        return false
      } else {
        this.$confirm(this.$t('system.permission.deleteMorePermTip'), this.$t('common.tip'), { type: 'error' }).then(() => {
          deleteMore({ permIds: this.deleteData }).then(res => {
            this.$message.success(this.$t('common.operationOk'))
            getMenuChildrenPerm({ permId: this.current.menuId }).then(res => {
              this.permList = res.result
            })
          })
        })
      }
    },
    selectPermCheckbox(row) {
      this.deleteData = []
      for (let i = 0; i < row.length; i++) {
        this.deleteData.push(row[i].permId)
      }
    },
    modifyPermission(permId) {
      this.initPermForm()
      getPermInfo(permId).then((res) => {
        this.permForm = {
          isMenu: res.result.isMenu,
          parentId: res.result.parentId,
          permId: res.result.permId,
          permCode: res.result.permCode,
          permName: res.result.permName,
          isDefault: res.result.isDefault
        }
        this.addOrEditPermDlgVisible = true
      })
    },
    handleCommand(command) {
      this.initMenuForm()
      if (command.type === 'addChildMenu') {
        this.menuForm.parentId = command.parentId
        this.addOrEditMenuDlgVisible = true
      } else if (command.type === 'modifyMenu') {
        getPermInfo(command.menuId).then((res) => {
          this.menuForm = {
            isMenu: res.result.isMenu,
            parentId: res.result.parentId,
            permId: res.result.permId,
            permCode: res.result.permCode,
            permName: res.result.permName,
            isDefault: res.result.isDefault
          }
          this.addOrEditMenuDlgVisible = true
        })
      } else if (command.type === 'deleteMenu') {
        this.$confirm(this.$t('system.permission.deleteMenuTip'), this.$t('common.tip'), { type: 'error' }).then(() => {
          deleteMenu({ permId: command.menuId }).then(res => {
            this.$message.success(this.$t('common.operationOk'))
            this.getAllMenu()
          })
        }, () => {
        })
      } else if (command.type === 'moveUp') {
        moveMenuSort(0, command.menuId).then(res => {
          this.$message.success(this.$t('common.operationOk'))
          this.getAllMenu()
        }, () => {
        })
      } else if (command.type === 'moveDown') {
        moveMenuSort(1, command.menuId).then(res => {
          this.$message.success(this.$t('common.operationOk'))
          this.getAllMenu()
        }, () => {
        })
      }
    }
  }

}
</script>

<style lang="scss" scoped="">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.menu-add_btn {
  width: 100%;
}

#menuManagement {
  .grid-content {
    min-height: 32px;
    .el-button-group {
      float: right;
    }
  }
  .el-tree {
    /*border: 1px solid #e2e2e2;*/
    .custom-tree-node {
      position: relative;
      padding: 9px 15px;
    }
    .menu-edit_btn {
      /*position: absolute;*/
      /*right: 40px;*/
      /*top: 10px;*/
      padding: 1px 3px;
      border-radius: 3px;
    }
  }
}

</style>
<style lang="scss">
#menuManagement {
  .el-table thead th {
    background: #fff;
  }
}
.el-table__fixed-header-wrapper .el-checkbox {
  margin-left: 5px !important;
}

</style>
