<template>
  <div class="users app-container">
    <el-row :gutter="16">
      <el-col :span="4" class="left-tree">
        <el-scrollbar style="height: 100%">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            default-expand-all
            :expand-on-click-node="false"
          ></el-tree>
        </el-scrollbar>
      </el-col>

      <el-col :span="20">
        <div class="top-bar">
          <SearchBar :config="searchConfig" @search="search" @reset="reset" />
          <PermissionButton
            perms="sys:user:add"
            button
            size="mini"
            type="primary"
            @click.native="handleOperation({ type: 'add' })"
            icon="el-icon-plus"
          >
            新增</PermissionButton
          >
        </div>
        <TablePage
          :data="list.records"
          :tableTitle="tableTitle"
          :operates="tableOperates"
          v-loading="loading"
        >
          <template v-slot:status="{ scope }">
            <el-popconfirm
              :title="getStatusTitle(scope.status)"
              @confirm="handleChangeStatus(scope)"
            >
              <el-switch
                slot="reference"
                :value="Boolean(Number(scope.status))"
              ></el-switch>
            </el-popconfirm>
          </template>

          <template v-slot:operates="{ scope }">
            <TableOperation
              :operations="tableOperations"
              :rawData="scope"
              @handleOperation="handleOperation"
            >
            </TableOperation>
          </template>
        </TablePage>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(list.current)"
          :page-sizes="[10, 20, 40, 50]"
          :page-size="Number(list.size)"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(list.total)"
          class="pagination"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <InfoEditDialog
      :visible="dialogVisible"
      :form="form"
      :orgTreeData="treeData"
      @handleClose="handleClose"
      @refresh="loadData"
    />
    <EditRole
      :visible="editRoleVisible"
      :roleData="currentRoleData"
      :id="currentId"
      @handleClose="handleCloseEditRole"
    />
    <EditPassword
      :visible="editPasswordVisible"
      :id="currentId"
      @handleClose="handleCloseEditPassword"
    />
  </div>
</template>

<script>
import { title, operates, operations } from "./config";
import {
  getDeptTree,
  getUserList,
  deleteUser,
  getUserOwnRoles,
  getUserOwnRolesV1,
  upadateUser,
} from "@/api/user";
import InfoEditDialog from "./components/InfoEditDialog.vue";
import EditRole from "./components/EditRole.vue";
import EditPassword from "./components/EditPassword.vue";

export default {
  components: {
    InfoEditDialog,
    EditRole,
    EditPassword,
  },
  computed: {
    tableTitle() {
      return title;
    },
    tableOperates() {
      return operates;
    },
    tableOperations() {
      return operations;
    },
    getStatusTitle(status) {
      return (status) => {
        if (status) {
          return "是否确定要弃用？";
        } else {
          return "是否确定要启用？";
        }
      };
    },
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      list: {
        records: [],
        size: 10,
        current: 1,
        total: 0,
      },
      searchConfig: [
        {
          prop: "username",
          type: "input",
          label: "账号",
        },
        {
          prop: "phone",
          type: "input",
          label: "手机号",
        },
      ],
      currentDeptNo: null,
      form: {
        username: "", //用户名
        nickname: "", //昵称
        password: "", //密码
        phone: "", //手机号
        realName: "", //真实姓名
        deptId: "",
        // sex:1,//1-男性 2-女性
        status: 1, //启用状态
      },
      dialogVisible: false,
      editRoleVisible: false,
      editPasswordVisible: false,
      currentRoleData: {},
      currentId: null,
      loading: false,
    };
  },
  mounted() {
    this.loadTreeData();
  },
  methods: {
    //   加载树结构数据
    async loadTreeData() {
      const res = await getDeptTree();
      if (res.code == 0) {
        this.treeData = res.data[0].children; //去除默认顶级部门
        this.currentDeptNo = this.treeData[0].deptNo;
        this.loadData();
      }
    },
    //   加载表格数据
    async loadData() {
      this.loading = true;
      var params = {
        page: this.list.current,
        limit: this.list.size,
        deptNo: this.currentDeptNo,
      };
      const res = await getUserList(params);
      if (res.code == 0) {
        this.list = res.data;
      }
      this.loading = false;
    },

    async search(form) {
      var params = {
        page: this.list.current,
        limit: this.list.size,
        deptNo: this.currentDeptNo,
        ...form,
      };
      const res = await getUserList(params);
      if (res.code == 0) {
        this.list = res.data;
      }
    },
    reset() {
      this.loadData();
    },

    handleNodeClick(e) {
      const { deptNo } = e;
      this.currentDeptNo = deptNo;
      this.loadData();
    },
    // 改变页容量
    handleSizeChange(value) {
      this.list.size = value;
      this.loadData();
    },

    // 改变当前显示页
    handleCurrentChange(value) {
      this.list.current = value;
      this.loadData();
    },

    async handleOperation(value, row) {
      switch (value.type) {
        case "add":
          this.dialogVisible = true;
          break;
        case "edit":
          this.form = row;
          this.dialogVisible = true;
          break;
        case "delete":
          let deleteRes = await deleteUser([row.id]);
          if (deleteRes.code == 0) {
            this.$message.success("删除成功！");
            this.loadData();
          }
          break;
        case "editRole":
          this.editRoleVisible = true;
          let roleRes = await getUserOwnRolesV1(row.id);
          this.currentRoleData = roleRes.data;
          this.currentId = row.id;
          break;
        case "editPassword":
          console.log("editPassword");
          this.editPasswordVisible = true;
          this.currentId = row.id;
          break;
      }
    },

    handleChangeStatus(row) {
      const callback = this.loadData;
      this.$bizCommon.changeStatus(row, upadateUser, callback);
    },

    handleClose() {
      this.dialogVisible = false;
      this.form = {
        status: 1,
      };
    },
    handleCloseEditRole() {
      this.editRoleVisible = false;
      this.currentRoleData = {};
      this.currentId = null;
    },

    handleCloseEditPassword() {
      this.editPasswordVisible = false;
      this.currentId = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.top-bar {
  display: flex;
  justify-content: space-between;
  // align-items: flex-end;
  margin-bottom: 20px;
}

.pagination {
  margin: 16px;
}

.el-button {
  margin-bottom: 22px;
}

.left-tree {
  height: calc(100vh - 130px);
}

::v-deep .el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
