<template>
<section>
  <el-dialog
    :title="title"
    :visible="showdialogpersonnel"
    :modal-append-to-body="false"
    append-to-body
    class="el-dialog-single"
    :before-close="handleClose"
    width="70%"
  >
  <div class="content">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="lable1" name="first">
        <div class="departmentList">
          <div class="departmentList_left">
            <div class="top-title">{{$SuperviseStr.depart}}列表</div>
            <el-input
              :placeholder="placeholder"
              v-model="search"
              clearable
              style="margin:5px 0"
              >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <div class="tree">
              <el-tree
                :data="data"
                :expand-on-click-node="false"
                @node-click="nodeClick"
                node-key="id"
                default-expand-all
                :props="defaultProps"
                highlight-current
              ></el-tree>
            </div>
          </div>
          <div class="departmentList_center">
            <div class="top-title">
              <!-- <el-checkbox v-if="employeeList.length>0" class="checked" v-model="ischecked" @change="ischeckedChange"></el-checkbox> -->
              <el-tooltip class="item" effect="dark" :content="titlename" placement="top" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                <div>{{$SuperviseStr.depart}}：{{department}}</div>
              </el-tooltip>
            </div>
            <el-input
              placeholder="姓名/账号/手机号/证件号码"
              v-model="searchVal"
              clearable
              style="margin:5px 0"
              >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <div class="checkbos-list">
              <div v-if="employeeList.length==0" class="noData">暂无数据</div>
              <el-checkbox v-model="checkAll" @change="handleCheckAllChange" v-if="employeeList.length>0">全选</el-checkbox>
              <div class="checkbox">
                <el-checkbox  v-for="item in employeeList" :key="item.id" @change="handleCheckedChange(item)" :checked="item.checkStatus" v-model="item.checkStatus">{{item.name}}</el-checkbox>
              </div>
            </div>
            <div class="pagination">
              <el-pagination
                v-if="employeeList.length>0"
                small
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="params.pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="params.pageSize"
                layout="prev, pager, next"
                :total="params.total"
              >
              </el-pagination>
            </div>
          </div>
          <div class="departmentList_right">
            <div class="top-title">
              <div>已选{{tags.length}}名</div>
              <div class="eliminate" v-if="tags.length>0" @click="deleteAll">清除</div>
            </div>
            <div class="tags_list">
              <el-tag
                v-for="tag in tags"
                :key="tag.id"
                closable
                @close="handle(tag)">
                {{tag.name}} ({{tag.credentialNumber}})
              </el-tag>
            </div>
              
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="lable2" name="second">
        <div class="employeeList">
          <div class="employeeList_left">
            <el-checkbox v-model="checkAll" @change="handleCheckAllChange" v-if="employeeList.length>0">全选</el-checkbox>
            <div class="checkbox">
              <el-checkbox  v-for="item in employeeList" :key="item.id" @change="handleCheckedChange(item)" :checked="item.checkStatus" v-model="item.checkStatus">{{item.name}}  ({{item.credentialNumber}})</el-checkbox>
            </div>
            <!-- <pages
              :total="params.total"
              :currentPage.sync="params.pageIndex"
              :pageSize="params.pageSize"
              @handleCurrentChangeSub="handleCurrentChange"
              @handleSizeChangeSub="handleSizeChange"
            ></pages> -->
            <el-pagination
              v-if="employeeList.length>0"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="params.pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="params.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="params.total"
            >
            </el-pagination>
            <div v-if="employeeList.length==0" class="noData">暂无数据</div>
          </div>
          <div class="employeeList_right">
            <div class="top-title">
              <div>已选{{tags.length}}名</div>
              <div class="eliminate" v-if="tags.length>0" @click="deleteAll">清除</div>
            </div>
            <div class="tags_list">
              <el-tag
                v-for="tag in tags"
                :key="tag.id"
                closable
                @close="handle(tag)">
                {{tag.name}} ({{tag.credentialNumber}})
              </el-tag>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="search" v-if="activeName == 'second'">
      <el-input
        placeholder="姓名/账号/手机号/证件号码"
        v-model="inputVal"
        clearable
        >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
  </div>
    
    
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">确 定</el-button>
      <el-button @click="showdialogpersonnel = false">取 消</el-button>
    </div>
  </el-dialog>
</section>
</template>
<script>
import selectTree from "@/components/SelectTree";
import { SearchDepartmentsListEmplyeeApi, employeeTableListApi } from "@/api/staffApi.js"
export default {
  components:{
    selectTree
  },
  props: ["tableData"],
  watch:{
    tableData(val){
      console.log("val",val)
    },
    inputVal(val){
      console.log(val)
      this.params.keyword = val
      this.params.pageIndex = 1
      this.getDataList()
    },
    searchVal(val){
      console.log(val)
      this.params.keyword = val
      this.params.pageIndex = 1
      this.tableDataList()
    }
  },
  computed:{
     data(){
       let searchValue=this.search
       if(searchValue){
        //  return this.tableData.filter(item=>{
        //    return Object.keys(item).some(its=>{
        //      return String(item[its]).toLowerCase().indexOf(searchValue)>-1
        //    })
        //  })
        console.log(this.tableData)
        let treeData=this.tableData
        
        let handleTreeData=this.handleTreeData(treeData,searchValue)
        // return
        console.log(handleTreeData)
        this.setExpandRow(handleTreeData)
        console.log(this.expandRow)
        this.expandRow=this.expandRow.join(",").split(",")//返回数组id ['id1','id2']
        return handleTreeData  //匹配返回过滤查询到的父子树数据
       }
       console.log(this.tableData)
       return this.tableData //没匹配返回全部
     }
  },
  data(){
    return {
      showdialogpersonnel:false,//dialog弹窗
      activeName:'first',
      tags: [],//已选择人员
      employeeList:[],//人员列表
      checkAll:false,//人员是否全选 
      department:'',//部门名称
      inputVal:'',//人员搜索
      searchVal:'',
      search:'',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      expandRow: [],
      params:{//搜索条件
            pageIndex:1,
            pageSize:10,
            keyword:'',             
            total:0,
      },
      title:'选择' + $SuperviseStr.employee,
      lable1:'按' + $SuperviseStr.depart,
      lable2:'按' + $SuperviseStr.employee,
      titlename:$SuperviseStr.depart+"：",
      placeholder:'请输入' + $SuperviseStr.depart,
    }
  },
  methods:{
    // 弹窗初始化
    SelectpopUp(value){
      this.showdialogpersonnel = true
      this.activeName = 'first'
      // console.log("value",value)
      this.tags = value
      this.department = ''
      this.searchVal = ''
      this.inputVal = ''
      this.search = ''
      this.titlename = $SuperviseStr.depart+"："
      this.params = {//搜索条件
            pageIndex:1,
            pageSize:10,
            keyword:'',             
            total:0,
      },
      this.employeeList = []
    },
    // 选项卡切换
    handleClick(tab, event){
      console.log(this.activeName)
      this.inputVal = ''
      this.searchVal = ''
      this.search = ''
      this.employeeList = []
      this.checkAll = false
      this.titlename = $SuperviseStr.depart+"："
      $SuperviseStr.depart+"："
      this.params = {
        pageIndex:1,
        pageSize:10,
        keyword:'',             
        total:0,
      };
      if(this.activeName == 'second'){
        this.getDataList()
      }
    },
    // 关闭 Tag标签
    handle(item){
      console.log(item)
      let index = this.tags.findIndex(data => {
         return data.id == item.id
      })
      // this.$set(this.tags[index],"checkStatus",false)
      this.employeeList.forEach(data => {
        if(data.id == item.id){
          this.$set(data,"checkStatus",false)
        }
      })
      this.ischeckedAll()
      this.tags.splice(index,1)  
    },
    // 根据人员获取人员列表
    getDataList(){
      console.log("params",this.params)
        employeeTableListApi(this.params).then(res => {
          // 切换选项卡过快会赋值问题
          if(this.activeName == 'first'){
            return
          }
          if(res.data&&res.data.data){
              this.employeeList=res.data.data
              this.params.total=res.data.total
              // 先绑定checkStatus值
              this.employeeList.forEach(item => {
                this.$set(item,'checkStatus',false)
              })
              console.log(this.tags)
              // console.log(this.employeeList)
              // 与选中人员匹配，相同值设为选中
              this.tags.forEach(item => {
                this.employeeList.forEach(item1 => {
                  if(item.id == item1.id){
                    this.$set(item1,"checkStatus",true)
                  }
                })
              })
              this.ischeckedAll()
            
            console.log(this.employeeList)
          }
        })
      
    },
    // 根据部门获取人员列表
    tableDataList(){
      SearchDepartmentsListEmplyeeApi(this.params).then(res => {
        console.log(res.data&&res.data.data)
        if(res.data&&res.data.data){
              this.employeeList=res.data.data
              this.params.total=res.data.total
              // 先绑定checkStatus值
              this.employeeList.forEach(item => {
                this.$set(item,'checkStatus',false)
              })
              console.log(this.tags)
              // console.log(this.employeeList)
              // 与选中人员匹配，相同值设为选中
              this.tags.forEach(item => {
                this.employeeList.forEach(item1 => {
                  if(item.id == item1.id){
                    this.$set(item1,"checkStatus",true)
                  }
                })
              })
              this.ischeckedAll()
            
            console.log(this.employeeList)
          }
      })
    },
    // 关闭弹窗
    handleClose(){
      this.showdialogpersonnel = false
    },
    // 全选
    handleCheckAllChange(val){
      console.log(val)
      if(this.checkAll){
        this.employeeList.forEach(item => {
          if(!item.checkStatus){
            this.$set(item,"checkStatus",true)
            this.tags.push(item)
          }
        })
      }else{
        this.employeeList.forEach(item => {
          let index = this.tags.findIndex(item1 => {
            return item.id == item1.id
          })
          if(index>=0){
            this.tags.splice(index,1)
          }
          // item.checkStatus = false
          this.$set(item,"checkStatus",false)
          // this.tags.splice(this.tags.indexOf(item), 1)
        })
      }
    },
    // checkedBox选项
    handleCheckedChange(item){
      console.log(item)
      console.log(this.employeeList)
      if(item.checkStatus){
        this.tags.push(item)
      }else{
        
        let index =  this.tags.findIndex(data => {
          return item.id == data.id
        })
        this.tags.splice(index,1)
      }
      this.ischeckedAll()
    },
    handleCurrentChange(val) {
        console.log(this.params)
        //分页切换页码
        console.log(val);
        this.params.pageIndex = val;
        if(this.activeName == 'first'){
          this.tableDataList()
        }else{
          this.getDataList();
        }
        
    },
    handleSizeChange(val) {
        //切换每页条数
        console.log(val);
        this.params.pageIndex=1 //重置第一页
        this.params.pageSize = val;
        this.getDataList();
    },
    // 是否全选
    ischeckedAll(){
      if(this.employeeList.length>0){
        this.checkAll = this.employeeList.every(data => {
          return data.checkStatus
        })
      }else{
        this.checkAll = false
      }
    },
    // 已选人员清除
    deleteAll(){
      this.tags = []
      this.employeeList.forEach(item => {
        this.$set(item,"checkStatus",false)
        // this.$refs.multipleTable.toggleRowSelection(item,false);
      })
      this.checkAll = false
    },
    //树形表格过滤
    handleTreeData(treeData, searchValue){
      // debugger
      if(!treeData||treeData.length==0) return [];
      const array=[];
      for(let i=0;i<treeData.length;i++){
              let match=false;
              for(let pro in treeData[i]){
                if(typeof(treeData[i][pro])=='string'){
                  match |=treeData[i][pro].includes(searchValue);
                  if(match) break;
                }
              }
              if(this.handleTreeData(treeData[i].children,searchValue).length>0||match){
                array.push({...treeData[i],children:this.handleTreeData(treeData[i].children,searchValue)})                
              }              
      } 
      console.log(array)
      return array;
    },
     //将过滤好的树形数据展开
    setExpandRow(handleTreeData){
       if(handleTreeData.length){
          for(let i of handleTreeData){
             this.expandRow.push(i.id)
             if(i.children.length){
               this.setExpandRow(i.children)
             }
          }
       }
    }, 
    // 点击节点查询部门人员
    nodeClick(val){
      console.log(val)
      this.params.departIds = [val.id]
      this.params.pageIndex = 1
      this.params.pageSize = 10
      this.searchVal = ''
      this.department = val.name
      this.titlename = $SuperviseStr.depart+"：" + this.department
      this.tableDataList()
    },
    confirm(){
      this.showdialogpersonnel = false
      let tags = this.tags.length>0 ? JSON.parse(JSON.stringify(this.tags)) : []
      this.$emit("SelectedList",tags)
    },
    
  }
    
}
</script>
<style lang="scss" scoped>
.el-dialog-single{
  padding:24px;
  
  .content{
    position: relative;
    padding: 0 24px;
    .search{
      position: absolute;
      right: 24px;
      top: 5px;
    }
  }
  .tags_list::-webkit-scrollbar {
      width:6px;
    }
    /* 滚动槽 */
    .tags_list::-webkit-scrollbar-track {
      box-shadow:inset006pxrgba(0,0,0,0.3);
      -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
      border-radius:10px;
    }
    /* 滚动条滑块 */
    .tags_list::-webkit-scrollbar-thumb {
      border-radius:10px;
      background:rgba(0,0,0,0.1);
      box-shadow:inset006pxrgba(0,0,0,0.5);
      -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
    }
  .employeeList{
    height: 300px;
    display: flex;
    justify-content: space-between;
    .employeeList_left{
      padding: 10px;
      width: 65%;
      overflow: auto;
      margin-right: 15px;
      min-height: 270px;
      border: 1px solid #aaa;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .checkbox{
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin-left: 20px;
      }

    }
    .employeeList_left::-webkit-scrollbar {
    width:6px;
    height: 6px;
  }
  /* 滚动槽 */
  .employeeList_left::-webkit-scrollbar-track {
    box-shadow:inset006pxrgba(0,0,0,0.3);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
    border-radius:10px;
  }
  /* 滚动条滑块 */
  .employeeList_left::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:rgba(0,0,0,0.1);
    box-shadow:inset006pxrgba(0,0,0,0.5);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
  }
    
    .employeeList_right{
      width: 30%;
      border: 1px solid #aaa;
      .top-title{
        height: 30px;
        color: #5a6779;
        background: #f2f2f2;
        text-align: center;
        padding: 0 10px;
        line-height: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        .checked{
            position: absolute;
            left: 5px;
        }
        .eliminate{
          position: absolute;
          right: 5px;
          top: 0; 
          color: red;
        }
      }
      .tags_list{
        overflow: auto;
        max-height: 265px;
        padding: 5px 0;
      }
    }
  }
.departmentList{
  max-height: 300px;
  display: flex;
  justify-content: space-between;
  .departmentList_left{
    // padding: 10px 24px;
    width: 32%;
    border: 1px solid #aaa;
     
    .tree{
      height: 75%;
      overflow: auto;
    }
  }
  .tree::-webkit-scrollbar {
    width:6px;
    height: 6px;
  }
  /* 滚动槽 */
  .tree::-webkit-scrollbar-track {
    box-shadow:inset006pxrgba(0,0,0,0.3);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
    border-radius:10px;
  }
  /* 滚动条滑块 */
  .tree::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:rgba(0,0,0,0.1);
    box-shadow:inset006pxrgba(0,0,0,0.5);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
  }
  .departmentList_center{
    border: 1px solid #aaa;
    width: 32%;
    
    .checkbos-list{
      display: flex;
      overflow: auto;
      flex-direction: column;
      align-items: flex-start;
      height: 180px;
      padding: 0 10px;
      .checkbox{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 20px;
      }
    }
    .pagination{
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
    }
    .checkbos-list::-webkit-scrollbar {
      width:6px;
      height: 6px;
    }
    /* 滚动槽 */
    .checkbos-list::-webkit-scrollbar-track {
      box-shadow:inset006pxrgba(0,0,0,0.3);
      -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
      border-radius:10px;
    }
    /* 滚动条滑块 */
    .checkbos-list::-webkit-scrollbar-thumb {
      border-radius:10px;
      background:rgba(0,0,0,0.1);
      box-shadow:inset006pxrgba(0,0,0,0.5);
      -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
    }
  }
  .departmentList_right{
      width: 32%;
      border: 1px solid #aaa;
        .checked{
            position: absolute;
            left: 5px;
        }
        .eliminate{
          position: absolute;
          right: 5px;
          top: 0; 
          color: red;
        }
      
      .tags_list{
        overflow: auto;
        max-height: 265px;
        padding: 5px 0;
      }
    }
  .top-title{
    height: 30px;
    color: #5a6779;
    background: #f2f2f2;
    text-align: center;
    padding: 0 10px;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    // .checked{
    //     position: absolute;
    //     left: 5px;
    // }
    // .eliminate{
    //   position: absolute;
    //   right: 5px;
    //   top: 0;
    //   color: red;
    // }
    
  }
}
}
.noData{
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
<style lang="scss" scoped>
.tags_list{
   .el-tag--light{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
  }
}
</style>
