<template>
<section>
    <el-dialog
      :title="`选择${$SuperviseStr.employee}`"
      :visible="showdialogpersonnel"
      :modal-append-to-body="false"
      append-to-body
      class="el-dialog-single"
      :before-close="handleClose"
      width="70%"
    >
      <el-tabs v-model="activeName" style="padding: 24px;">
        <el-tab-pane label="按部门" name="first">
          <div class="layout-center">
            <div class="left">
              <div class="top-title">部门列表</div>
              <div class="tree">
                <el-tree
                  :data="data"
                  @node-click="nodeClick"
                  :expand-on-click-node="false"
                  node-key="id"
                  default-expand-all
                  :props="defaultProps"
                  highlight-current
                ></el-tree>
              </div>
            </div>
            <div class="center">
              <div class="top-title">  
                <el-checkbox v-if="staffList.length>0" class="checked" v-model="ischecked" @change="ischeckedChange"></el-checkbox>
                <div>部门：{{department}}</div>
              </div>
              <div class="employee-list">
                <!-- <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="item in staffList" :label="item.name" @change="change">{{item.name}}</el-checkbox>
                </el-checkbox-group> -->
                <el-input
                  placeholder="请输入内容"
                  v-model="search"
                  >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <el-table
                  ref="multipleTable"
                  :data="staffList"
                  tooltip-effect="dark"
                  style="width: 100%;height:100%;overflow:auto;"
                  :show-header="false"
                  @select="select"
                  @select-all="selectAll"
                  >
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label=""
                    show-overflow-tooltip>
                  </el-table-column>
                </el-table>
              </div>
              <el-pagination
                small
              >
              </el-pagination>
            </div>

            <div class="right">
              <div class="top-title">
                <div>已选{{tags.length}}名{{$SuperviseStr.employee}}</div>
                <div class="eliminate" v-if="tags.length>0" @click="deleteAll">清除</div>
                </div>
              <el-tag
                v-for="tag in tags"
                :key="tag.id"
                closable
                @close="handle(tag)">
                {{tag.name}}
              </el-tag>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="`按${$SuperviseStr.employee}`" name="second">
          <div class="layout-center">
            <div class="right">
            <div class="top-title">
              <div>已选{{tags.length}}名{{$SuperviseStr.employee}}</div>
              <div class="eliminate" v-if="tags.length>0" @click="deleteAll">清除</div>
              </div>
            <el-tag
              v-for="tag in tags"
              :key="tag.id"
              closable
              @close="handle(tag)">
              {{tag.name}}
            </el-tag>
          </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      
      <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 { UserDeptListApi } from "@/api/staffApi.js"
export default {
  components:{
    selectTree
  },
  props: ["tableData"],
  watch:{
    tableData(val){
      console.log("val",val)
      this.data = val
    },
    search(newVal){
      console.log(newVal)
        this.getSearch() 
    }
    // tags(newVal){
    //   console.log("new",newVal)
    //   this.tagChanges()
    // },
  },
  data(){
    return {
      showdialogpersonnel:false,//dialog弹窗
      activeName:'first',
      department:'',//部门名称
      staffList:[],//部门人员
      searchList:[],//处理搜索人员
      tags: [],//已选择人员
      data: this.tableData,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      total:0,
      search:'',
      ischecked:false,
      params:{//搜索条件
            pageIndex:1,
            pageSize:10,
            keyword:'',             
            total:0,
          }
    }
  },
  methods:{
    deleteAll(){
      this.tags = []
      this.staffList.forEach(item => {
        this.$set(item,"checkStatus",false)
        this.$refs.multipleTable.toggleRowSelection(item,false);
      })
      this.ischecked = false
    },
    // 部门人员搜索
    getSearch(){
      let keyWord = this.search.toLowerCase()
      let arr = []
      if(keyWord){
        arr = this.searchList.filter(item => {
          if(item.name.toLowerCase().indexOf(keyWord) != -1){
            return item
          }
        })
        console.log("arr",arr)
        this.staffList = arr
        let rows = []
        this.tags.forEach(item => {
          this.staffList.forEach(item1 => {
            if(item.id == item1.id){
              this.$set(item1,"checkStatus",true)
              // item1.checkStatus = true
              rows.push(item1)
            }
          })
        })
        setTimeout(()=> {
          this.checked(rows)
        },0)
        this.ischecked = this.staffList.every(data => {
          return data.checkStatus
        })
      }else{
        this.staffList = this.searchList
        let rows = []
        this.tags.forEach(item => {
          this.staffList.forEach(item1 => {
            if(item.id == item1.id){
              this.$set(item1,"checkStatus",true)
              // item1.checkStatus = true
              rows.push(item1)
            }
          })
        })
        // 添加定时器，处理选中状态
        setTimeout(()=> {
          this.checked(rows)
        },0)
        this.ischecked = this.staffList.every(data => {
          return data.checkStatus
        })
      }
      
    },
    // 父组件删除tags，子组件对应修改
    tagChanges(tag){
      console.log("tag",tag)
      console.log(this.staffList)
      this.staffList.forEach(item => {
        if(item.id == tag){
          this.$refs.multipleTable.toggleRowSelection(item);
          this.$set(item,"checkStatus",false)
        }
      })
      this.ischecked = false
    },
    confirm(){
      this.showdialogpersonnel = false
      let tags = this.tags.length>0 ? JSON.parse(JSON.stringify(this.tags)) : []
      this.$emit("SelectedList",tags)
    },
    // 弹窗
    SelectpopUp(value){
      this.showdialogpersonnel = true
      console.log("value",value)
      this.tags = value
      this.department = ''
      this.search = ''
      this.staffList = []
    },
    handleClose(){
      this.showdialogpersonnel = false
    },
    change(val){
      console.log(val);
    },
    // 单选
    select(selection, row){
      console.log(selection)
      console.log(row)
      console.log(this.tags)
      if(!row.checkStatus){
        // row.checkStatus = true
        this.$set(row,"checkStatus",true)
        this.tags.push(row)
      }else{
       let index =  this.tags.findIndex(item => {
          return item.id == row.id
        })
        // row.checkStatus = false
        this.$set(row,"checkStatus",false)
        console.log(index)
        // console.log(this.tags.indexOf(row))
        // 防止index为-1时，删除数组最后一个值  
        if(index>=0){
          this.tags.splice(index, 1)
        }
        

        // console.log(this.tags)
      }
      if(selection.length == this.staffList.length){
        this.ischecked = true
      }else{
        this.ischecked = false
      }
      
    },
    // 全选值
    selectAll(selection){
      console.log(selection)//全选数组
      // 全选
      if(selection.length>0){
        selection.forEach(item => {
          if(!item.checkStatus){
            // item.checkStatus = true
            this.$set(item,"checkStatus",true)
            this.tags.push(item)
          }
        })
      }else{
        // 取消全选
        console.log(this.tags)
        console.log(this.staffList)
        // console.log(this.tags.indexOf(this.staffList[0].id))
        
        this.staffList.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)
        })

        // let indexList = []
        // this.staffList.forEach(item => {
        //   indexList.push(this.tags.findIndex(item1 => {
        //     return item1.id == item.id
        //   }))
        // })
        // console.log(indexList)
        // let newTags = []
        // indexList.forEach(item => {
        //   console.log(item)
        //   if(item>=0){
        //     this.tags.slice(item, 1)
        //   }
          
        // })
      }
      
    },
    ischeckedChange(val){
      console.log(val)
        this.checkedAll()
    },
    // 设置默认选中
    checked(rows){
      rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
    },
    // 全选按钮
    checkedAll(){
      this.$refs.multipleTable.toggleAllSelection();
      // selectAll函数监听数组是否全选
    },
    // 根据部门数组id分页查询用户列表
    tableDatalist(){
       UserDeptListApi(this.params).then(res => {
        console.log(res)
      })
    },
    // 点击节点查询部门人员
    nodeClick(data){
      this.search = ''
      console.log(data)
      this.department = data.name
      this.params.departIds=[data.id]
      console.log(this.params)
      this.tableDatalist(this.params)
      // UserDeptListApi(this.params).then(res => {
      //   console.log(res)
      //   // let rows =[]
      //   // this.staffList = res.data
      //   // this.searchList = res.data
      //   // this.tags.forEach(item => {
      //   //   this.staffList.forEach(item1 => {
      //   //     if(item.id == item1.id){
      //   //       this.$set(item1,"checkStatus",true)
      //   //       // item1.checkStatus = true
      //   //       console.log(item1)
      //   //       rows.push(item1)
      //   //     }
      //   //   })
      //   // })
      //   // // 添加定时器，处理选中状态
      //   // setTimeout(()=> {
      //   //   this.checked(rows)
      //   // },0)
      //   // this.ischecked= this.staffList.every(data => {
      //   //   return data.checkStatus
      //   // })
        
        
      //   // console.log(rows)
      //   // console.log(this.staffList)
      //   // console.log(this.tags)
      // })
    },
    // 已选员工删除
    handle(tag){
      console.log(tag)
      // this.tags.splice(this.tags.indexOf(tag), 1);
      let index =  this.tags.findIndex(item => {
          return item.id == tag.id
        })
        console.log(index)
        console.log(this.staffList)
        let indexTwo = this.staffList.findIndex(data => {
          return data.id == tag.id
        })
        console.log(indexTwo)
        this.tags.splice(index, 1)
        // 用indexTwo设置元素选择状态
        setTimeout(() => {
          if(indexTwo>=0){
            this.$refs.multipleTable.toggleRowSelection(this.staffList[indexTwo]);
            // this.staffList[indexTwo].checkStatus = false
            this.$set(this.staffList[indexTwo],"checkStatus",false)
            let Allchecked = this.staffList.every(data => {
              console.log(data)
              return data.checkStatus
            })
            console.log(Allchecked)
            if(!Allchecked){
              this.ischecked = false
      }
          }
        },0)
        
        tag.checkStatus = false
        this.$set(tag,"checkStatus",false)
      
      console.log(this.tags)
      console.log(this.staffList)
      
    }
  }
}
</script>
<style lang="scss">
.el-dialog-single{
  // padding:10px 24px;
  padding: 0;
.layout-center{
  display: flex;
  max-height: 400px;
  .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;
    }
  }
  .left{
    padding: 10px 24px;
    width: 30%;
    overflow: auto;
    margin-right: 15px;
    .tree{
      height: 90%;
    }
  }
  .center{
    padding: 10px 24px;
    width: 30%;
    // overflow: auto;
    .employee-list{
      // max-height: 100%;
      height:80%;
      .el-table__body tr > td{
        border: none;
      }
      .el-table::before{
        height: 0;
      }
      .el-table__row{
        height: 30px;
      }
      .el-table td{
        height: 30px;
        padding: 0 !important;
      }
      .el-checkbox-group{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
    }
  }
  .right{
    width: 30%;
    padding: 10px 24px;
    overflow: auto;
     .el-tag--light{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
     }
  }
}
}

</style>
