<template>
    <el-row :gutter="20" style="padding: 10px;margin:0px;background-color: #ECECEC;min-height: 545px;overflow: auto;">
      <!--部门数据-->
      <el-col :span="6" :xs="24" style="padding-right:10px">
        <el-tree
          :data="deptOptions"
          node-key ="id"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          default-expand-all
          @node-click="handleNodeClick"
          style="padding:10px;"
        />

        <p style="padding-top: 20px;text-align: center;">已选择 <span style="color: red;">{{userIdsArr.length}} </span>人</p>
      </el-col>

      <!--用户数据-->
      <el-col :span="18" :xs="24" style="padding:10px; background-color: #fff;min-height: 525px;">
        <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" @select="handleSelection" @select-all="selectAll" @selection-change="handleSelectionChange" @row-click="handleCurrentChange" row-key="userName">
          <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 },
      props: ['userIds'],
      data(){
        return {
          userIdsArr:[],
          selectInput:'',
          arrID:[],
          multipleSelection:null,
          // 选中人员昵称数组
          names: [],
          // 选中人员账号数组
          accounts: [],
          // // 非单个禁用
          // single: true,
          // // 非多个禁用
          // multiple: true,
          // 总条数
          total: 0,
          // 用户表格数据
          userList: null,
          deptOptions: undefined,
          defaultProps: {
            children: "children",
            label: "label"
          },
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            userName: undefined,
            phonenumber: undefined,
            status: 0,
            deptId: undefined
          }
        }
      },
      watch: {
        userIds: {
          immediate: true,
          handler() {
            if(this.userIds!="")
              this.userIdsArr = this.userIds.split(',');
          }
        }
      },
      created() {
        this.getList();
        this.getTreeselect();
        if(this.userIds!="")
          this.userIdsArr = this.userIds.split(',');
      },
      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;

            this.$nextTick(function(){
              console.log("进入nexttick中："+this.userIds);
              this.checked(this.userIds);//每次更新了数据，触发这个函数即可。
            })
          });
        },
        /** 查询部门下拉树结构 */
        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();
        },
        /** 全选按钮  */
        selectAll(selection){
          //selection为0代表取消全选，把userList中数据去除
          if(selection.length>0){
            //全选   无到有
          }
          else{
            for(var i=0; i<this.userList.length ;i++){
              this.$emit("removeFunction",this.userList[i].userName,this.userList[i].nickName);
            }
          }
        },
        /** 手动勾选行的多选框触发的事件 */
        handleSelection(selection,row) {
          if (this.userIdsArr.includes(row.userName)) {
            this.$emit("removeFunction",row.userName,row.nickName);
          }
          else {
            console.log(row.userName+"不存在");
          }
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.names = selection.map(item => item.nickName);
          this.accounts = selection.map(item => item.userName);
          this.$emit('fatherFunction',this.accounts.join(','),this.names.join(','));
        },
        //行选中
        handleCurrentChange(row, event, column) {
          var same=false;
          if(this.userIdsArr.length > 0){
            for(var i=0; i<this.userIdsArr.length ;i++){
              if(this.userIdsArr[i]==row.userName){
                same=true;
                break;
              }
            }
            if(same==true){
              this.$refs.userList.toggleRowSelection(row,false);
              this.$emit("removeFunction",row.userName,row.nickName);
            }
            else{
              this.$refs.userList.toggleRowSelection(row,true);
              this.$emit('fatherFunction',row.userName,row.nickName);
            }
          }
          else{
            this.$refs.userList.toggleRowSelection(row,true);
            this.$emit('fatherFunction',row.userName,row.nickName);
          }
        },
        removeByValue(arr, val){
          for (var i = 0; i < arr.length; i++) {
            if (arr[i] == val) {
              arr.splice(i, 1);
              break;
            }
          }
        },
        checked(userids){
          let selectUsers = [];
          selectUsers = userids.split(',');
          for(let i=0; i<this.userList.length ;i++){
            for(let j=0;j<selectUsers.length;j++){
              if(selectUsers[j] == this.userList[i].userName){
                this.$refs.userList.toggleRowSelection(this.userList[i], true);//默认选中
              }
            }
          }
        }
      }
    }
</script>

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

