<template>
    <el-row :gutter="20" style="padding: 10px;margin:0px;background-color: #ECECEC">
      <!--部门数据-->
      <el-col :span="6" :xs="24" style="padding-right:10px">
        <el-tree
          :data="deptOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          default-expand-all
          @node-click="handleNodeClick"
          style="padding:10px;"
        />
      </el-col>
      <!--用户数据-->
      <el-col :span="18" :xs="24" style="padding:10px; background-color: #fff;">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
          <el-form-item label="用户名称" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入用户名称"
              clearable
              size="small"
              style="width: 240px"
              suffix-icon="el-icon-search"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="userList" ref="userList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
          <el-table-column label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
          <el-table-column label="部门" align="center" prop="dept.deptName" :show-overflow-tooltip="true" />
          <el-table-column label="手机号码" align="center" prop="phonenumber" width="120" />
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
</template>

<script>
  import { listUser } from "@/api/system/user";
  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

    export default {
      name: "index",
      components: { Treeselect },
      data(){
        return {
          multipleSelection:null,
          // 选中人员昵称数组
          names: [],
          // 选中人员账号数组
          accounts: [],
          // // 非单个禁用
          // single: true,
          // // 非多个禁用
          // multiple: true,
          // 总条数
          total: 0,
          // 用户表格数据
          olduserList: null,
          userList: null,
          deptOptions: undefined,
          defaultProps: {
            children: "children",
            label: "label"
          },
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            userName: undefined,
            phonenumber: undefined,
            status: 0,
            deptId: undefined
          }
        }
      },
      watch: {
        // 根据名称筛选部门树
        deptName(val) {
          this.$refs.tree.filter(val);
        },
        userList(n,o){
          // this.multipleSelection.forEach(row => {
          //   // 不能自己自定义对象来设置选中（原因如下分析），那我可以从列表中找到需要选中的那个对象，然后把它拿过来作为选中的项就可以了
          //   // this.$refs.userList.toggleRowSelection(this.userList.find(item => {
          //   //   return row.userName == item.userName;  // 注意这里寻找的字段要唯一，示例仅参考
          //   // }), true);
          //   //this.$refs.userList.toggleRowSelection(this.userList[1], true);
          // });
          // this.$nextTick( ()=> {
          //   console.log("xuanzhong "+this.multipleSelection.length);
          //   console.log(this.multipleSelection);
          //   this.multipleSelection.forEach(row => {
          //     console.log(row.name+"12313");
          //   });
          //   //this.$refs.userList.toggleRowSelection(this.userList[1],true);
          //   //console.log("这是选中行的循环kaishi");
          // })
        }
      },
      created() {
        this.getList();
        this.getTreeselect();
        this.olduserList = this.userList;
      },
      methods:{
        /** 查询用户列表 */
        getList() {
          this.loading = true;
          listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
              this.userList = response.rows;
              this.total = response.total;
              this.loading = false;
              // if(this.multipleSelection!=null)
              // {
              //   //alert("获取用户列表"+this.multipleSelection.length);
              //   this.multipleSelection.forEach(row => {
              //     // 不能自己自定义对象来设置选中（原因如下分析），那我可以从列表中找到需要选中的那个对象，然后把它拿过来作为选中的项就可以了
              //     this.$refs.userList.toggleRowSelection(this.userList.find(item => {
              //       return row.userName == item.userName;  // 注意这里寻找的字段要唯一，示例仅参考
              //     }), true);
              //     //this.$refs.userList.toggleRowSelection(this.userList[1], true);
              //   });
              // }
              // else{
              //   //alert("第一次获取用户列表，暂时还没有选中记录");
              // }
            }
          );
        },
        /** 查询部门下拉树结构 */
        getTreeselect() {
          treeselect().then(response => {
            this.deptOptions = response.data;
          });
        },
        // 筛选节点
        filterNode(value, data) {
          if (!value) return true;
          return data.label.indexOf(value) !== -1;
        },
        // 节点单击事件
        handleNodeClick(data) {
          this.queryParams.deptId = data.id;
          this.getList();
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.page = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.names = selection.map(item => item.nickName);
          this.accounts = selection.map(item => item.userName);
          // if(this.multipleSelection==null){
          //   this.multipleSelection = selection;
          // }
          // else{
          //   //合并
          //   this.multipleSelection
          // }
        }
      }
    }
</script>

<style>
  .pagination-container{padding:0px;}
</style>

