<template>
  <div class="users app-container">
    <el-row :gutter="16">
      <el-col :span="6">
        <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" default-expand-all
          :expand-on-click-node="false"></el-tree>
      </el-col>
      <el-col :span="18">
        <div class="top-bar">
          <SearchBar :config="searchConfig" @search="search" @reset="reset" />
          <el-button type="primary" @click.native="handleOperation({ type: 'add' })" icon="el-icon-s-promotion">
            新增</el-button>
        </div>
        <TablePage :data="list.records" :tableTitle="tableTitle" :operates="tableOperates">
          <template v-slot:status="data">
            <el-popconfirm :title="getStatusTitle(data.scope.status)" @onConfirm="handleChangeStatus(data.scope)">
              <el-switch slot="reference" :value="Boolean(Number(data.scope.status))"></el-switch>
            </el-popconfirm>
          </template>

          <template v-slot:operates="scope">
            <TableOperation :operations="tableOperations" :rawData="scope.scope.row" @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="loadListData" />
  </div>
</template>

<script>
  import TablePage from "@/components/Table/TablePage.vue";
  import TableOperation from "@/components/Table/TableOperation.vue";
  import SearchBar from "@/components/SearchBar";
  import { title, operates, operations } from "./config";
  import { getDeptTree, getUserList } from "@/api/user";
  import InfoEditDialog from "./components/InfoEditDialog.vue";
  export default {
    components: {
      TablePage,
      TableOperation,
      SearchBar,
      InfoEditDialog,
    },
    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: "", //真实姓名
          deptNo: "",
          // sex:1,//1-男性 2-女性
          status: 0,//启用状态
        },
        dialogVisible: false
      };
    },
    mounted() {
      this.loadTreeData();
    },
    methods: {
      //   加载树结构数据
      async loadTreeData() {
        const res = await getDeptTree();
        console.log(111, res);
        if (res.code == 0) {
          this.treeData = res.data;
          this.currentDeptNo = this.treeData[0].deptNo;
          this.loadListData();
        }
      },
      //   加载表格数据
      async loadListData() {
        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;
        }
      },

      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.loadListData();
      },

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

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

      async handleOperation(value, row) {
        console.log("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 deleteLt([row.literatureId]);
            // if (deleteRes.code == 0) {
            //   this.$message.success("删除成功！");
            //   this.loadData();
            // }
            break;
        }
      },

      handleClose() {
        this.dialogVisible = false;
        this.form = {
          status: 0,
        };
      },
    },
  };
</script>

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

  .pagination {
    margin: 16px;
  }

  .el-button {
    margin-bottom: 22px;
  }
</style>