<template>
  <div class="app-container">
    <el-form :inline="true" :model="params" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="params.keyword" placeholder="请输入名称搜索" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search(1)">查询</el-button>
        <el-button type="success" @click="showAddDialog">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="listRet.list" highlight-current-row>
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="code" label="编码" />
      <el-table-column prop="name" label="权限名称" />
      <el-table-column prop="menuName" label="页面名" />
      <el-table-column prop="url" label="url" />
      <el-table-column prop="createTime" label="创建日期" />
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-button type="primary" size="small" @click="editRole(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="showDeleteDialog(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrap">
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="listRet.total"
        :current-page="params.current"
        class="mt-4"
        @current-change="search"
      />
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      append-to-body
      :title="dialogTitle"
      width="30%"
    >
      <el-form
        ref="from"
        :model="formInline"
        class="demo-form-inline"
        label-width="90px"
        :rules="rules"
      >
        <el-form-item label="页面名" prop="menuId">
          <treeselect
            v-model="formInline.menuId"
            :disabled="dialogTitle === '修改权限'"
            placeholder="选择上级菜单"
            :options="menuOptions"
            :normalizer="normalizer"
          />
        </el-form-item>
        <el-form-item label="编码" prop="code">
          <el-input v-model="formInline.code" />
        </el-form-item>
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="formInline.name" />
        </el-form-item>
        <el-form-item label="url">
          <el-input v-model="formInline.url" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="formInline.id ? updateFn('from') : addFn('from')"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
    <el-dialog
      :visible.sync="deleteDialogVisible"
      append-to-body
      title="提示"
      width="30%"
    >
      <span>此操作将永久删除该权限，是否继续?</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="deleteFn">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  queryPermissionList,
  addPermission,
  updatePermission,
  deletePermission
} from "@/api/permission";
import { getMenusTree } from "@/api/menu";
export default {
  name: "权限管理",
  components: { Treeselect },
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
        menuId: [
          { required: true, message: "请选择权限所属页面", trigger: "blur" }
        ],
        code: [{ required: true, message: "请输入编码", trigger: "blur" }]
      },
      formInline: {
        code: "",
        menuId: undefined,
        name: "",
        id: undefined,
        url: ""
      },
      params: {
        current: 1,
        keyword: "",
        size: 10
      },
      listRet: {
        list: [],
        total: 0
      },
      menuOptions: [],
      dialogVisible: false,
      dialogTitle: "修改权限",
      deleteDialogVisible: false,
      deleteId: "",
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        };
      }
    };
  },
  mounted() {
    this.search(1);
    this.getListMenus();
  },
  methods: {
    search(current) {
      this.params.current = current;
      this.getPermissionList();
    },
    // 新增权限
    showAddDialog() {
      this.dialogVisible = true;
      this.dialogTitle = "新增权限";
      this.formInline.code = "";
      this.formInline.menuId = undefined;
      this.formInline.name = "";
      this.formInline.id = undefined;
      this.formInline.url = "";
    },
    async getPermissionList() {
      const ret = await queryPermissionList(this.params);
      if (ret.code === 0) {
        Object.assign(this.listRet, ret.data);
      }
    },
    getListMenus() {
      getMenusTree({ keyword: "" }).then(({ data }) => {
        this.deleteEmptyChildren(data);
        this.menuOptions = data;
      });
    },
    deleteEmptyChildren(data) {
      data.forEach(item => {
        if (!item.children.length) {
          delete item.children;
        } else {
          this.deleteEmptyChildren(item.children);
        }
      });
    },
    editRole(row) {
      this.formInline.code = row.code;
      this.formInline.menuId = row.menuId;
      this.formInline.name = row.name;
      this.formInline.id = row.id;
      this.formInline.url = row.url;
      this.dialogVisible = true;
      this.dialogTitle = "修改权限";
    },
    addFn(formEl) {
      if (!formEl) return;
      this.$refs[formEl].validate((valid, fields) => {
        if (valid) {
          addPermission(this.formInline).then(res => {
            if (res.code === 0) {
              this.dialogVisible = false;
              this.$message.success("新增成功");
              this.search();
            }
          });
        } else {
          console.log("error submit!", fields);
        }
      });
    },
    updateFn(formEl) {
      if (!formEl) return;
      this.$refs[formEl].validate((valid, fields) => {
        if (valid) {
          updatePermission(this.formInline).then(res => {
            if (res.code === 0) {
              this.dialogVisible = false;
              this.$message.success("更新成功");
              this.search();
            }
          });
        } else {
          console.log("error submit!", fields);
        }
      });
    },
    showDeleteDialog(id) {
      this.deleteDialogVisible = true;
      this.deleteId = id;
    },
    deleteFn() {
      deletePermission(this.deleteId).then(res => {
        if (res.code === 0) {
          this.deleteDialogVisible = false;
          this.$message.success("删除成功");
          this.search();
        } else {
          this.$message.error(res.message);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .vue-treeselect__value-container {
  .vue-treeselect__placeholder,
  .vue-treeselect__single-value {
    line-height: 40px;
  }
  .vue-treeselect__input {
    vertical-align: middle;
  }
}
</style>
