<template>
  <el-dialog
    :title="title"
    :visible.sync="visible_" :close-on-click-modal="false" :before-close="close_before" append-to-body @close='closeDialog'
    width="640px" class="employee_select_dialog">
    <div class="employee_selector_box" v-loading="selectApersonModuleLoad">
      <el-row :gutter="10">
        <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="scroller-box">

          <div class="search-box">
            <div class="search">
            <el-button slot="append" icon="el-icon-search" class="manager_button"></el-button>
            <el-input v-model="keyword" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div class="dept_path">
            <a href="javascript:void(0);" @click="back_by_index(0)">全公司</a>
            <a
              v-for="(item, index) in pid_list_arr"
              :key="index"
              href="javascript:void(0);"
              @click="back_by_index(index + 1)"
            >
              <i class="el-icon-arrow-right"></i>
              <WWOpenData type="departmentName" :openid="item.name"></WWOpenData>
            </a>
          </div>
          <el-checkbox v-if="isChecKedAll" v-model="checked" @change="checkedChange" >全选</el-checkbox>
          <el-scrollbar
            wrap-class="column-wrapper scrollable-items-container"
            :native="false"
            :class="isChecKedAll?'scrollbarHeight1':'scrollbarHeight2'"
          >
            <div class="choose_left">
              <div v-if="hidden_department">
              </div>
              <a href="javascript:void(0)" v-for="(item,index) in dept_list" :key="index" v-else>
                <div class="employee_cell" @click.stop="select_dept(item)"
                     v-show="item.pid == pid && item.name.indexOf(keyword) >= 0 && dept_not_select.indexOf(item.id) < 0">

                  <div class="employee_checkbox" style="position: relative;">
                    <el-checkbox v-if="can_select_dept" v-model="item.checked"></el-checkbox>
                    <div style=" position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5;"></div>
                  </div>
                  <div class="employee_name">
                    <WWOpenData type="departmentName" :openid="item.name"></WWOpenData>
                  </div>

                  <div v-if="can_select_dept" class="dept_child_cell">
                    <span href="javascript:void(0);" class="child_btn" @click.stop="show_child(item)">
                      | 下级
                    </span>
                  </div>

                  <div class="employee_cell_clear"></div>

                </div>
              </a>

              <div class="persons_box" style="padding-top:4px;">
                <a class="employee_cell_a" href="javascript:void(0)" v-for="(item,index) in list" :key="index">
                  <div class="employee_cell" v-if="can_select_employee" @click="select_employee(item)"
                       v-show="employee_not_select.indexOf(item.id) < 0">

                    <div class="employee_checkbox" style="position: relative;">
                      <!-- <el-checkbox v-model="item.checked"></el-checkbox> -->
                      <el-checkbox v-model="item.checked" v-if="selectedQuitEmployee" :style="item.status > 1 || employee_not_select.indexOf(item.id) > 0?'opacity: 0':'opacity: 1'" ></el-checkbox>
                      <el-checkbox v-model="item.checked" v-if="!selectedQuitEmployee" :style="item.status > 1 || employee_not_select.indexOf(item.id) > 0?'opacity: 0':'opacity: 1'" ></el-checkbox>
                      <div style=" position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5;"></div>
                    </div>
                    <div class="employee_img_url">
                      <img :src="item.img_url" class="employee_cell_head_img"/>
                    </div>
                    <div class="employee_name">
                      <!-- {{item.name}} -->
                      <WWOpenData type="userName" :openid="item.name"></WWOpenData>
                      {{item.direct_Supervisor?'(直属上级)':''}}
                    </div>
                    <div class="employee_cell_clear"></div>

                  </div>
                </a>
              </div>

            </div>


          </el-scrollbar>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" class="col-line"><span style="opacity: 0;">空</span></el-col>
        <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="scroller-box">
          <div class="option-box">
            <el-button type="type" @click="clear_data">清空</el-button>
          </div>
          <el-scrollbar
            wrap-class="column-wrapper scrollable-items-container"
            :native="false"
            style="height: 354px;"
          >
            <div class="choose_right">
              <div class="employee_cell" v-for="(item,index) in dept_selected_list" :key="index">

                <div class="employee_name">
                  <WWOpenData type="departmentName" :openid="item.dept_name"></WWOpenData>
                </div>
                <div class="employee_delete">
                  <el-button type="default" size="mini" @click="dept_cancel(item)" icon="el-icon-close" circle></el-button>
                </div>
                <div class="employee_cell_clear"></div>
              </div>

              <div class="employee_cell" v-for="(item,index) in employee_selected_list" :key="index">
                <div class="employee_img_url">
                  <img :src="item.img_url" class="employee_cell_head_img"/>
                </div>
                <div class="employee_name">
                  <!-- {{item.name}} -->
                  <WWOpenData type="userName" :openid="item.name"></WWOpenData>
                  <span v-if="direct_Supervisor_you">{{item.id==directSupervisor?'(直属上级)':''}}</span>
                </div>
                <div class="employee_delete">
                  <el-button type="default" size="mini" @click="employee_cancel(item)" icon="el-icon-close" circle></el-button>
                </div>
                <div class="employee_cell_clear"></div>
              </div>
            </div>
          </el-scrollbar>
        </el-col>
      </el-row>
    </div>

    <span slot="footer" class="dialog-footer">
    <el-button @click="close">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>


  </el-dialog>
</template>

<script>

  export default {
    props:{
      title:{
        type: String,
        default: "选择部门和员工"
      },
      isChecKedAll: {
        type: Boolean,
        default: false
      },
      whether_to_remove_right: {
        type: Boolean,
        default: false
      },
      hidden_department: {
        type: Boolean,
        default: false
      },
      append_body: {
        type: Boolean,
        default: false
      },
      visible: {
        type: Boolean,
        default: false
      },
      can_select_dept: {
        type: Boolean,
        default: true
      },
      can_select_employee: {
        type: Boolean,
        default: true
      },
      employee_not_select: {
        type: Array,
        default: () => {
          return []
        }
      },
      dept_not_select: {
        type: Array,
        default: () => {
          return []
        }
      },
      selected: {
        type: Object,
        default: () => {
          return {employee: [], dept: []}
        }
      },
      multi: {
        type: Boolean,
        default: true
      },
      dept_multi: {
        type: Boolean,
        default: true
      },
      employee_list: {
        type: Array,
        default: () => {
          return []
        }
      },
      selectedQuitEmployee:{
        type: Boolean,
        default: true
      },
      close_clear_data: {
        type: Boolean,
        default: true
      },
      max: {
        type: Number,
        default: 0
      },
      use_employee_list: {
        type: Boolean,
        default: false
      },
      is_filtration_creator: {
        //是否去除创始人
        type: Boolean,
        default: false
      },
      is_manager_only: {
        //是否只显示管理者
        type: Boolean,
        default: false
      },
      include_self: {
        //是否显示自己
        type: Boolean,
        default: true
      },
      employee_not_select: {
        // 排除员工的ID，包含ID时不出现在选择列表中
        type: Array,
        default: () => {
          return [];
        }
      },
    },
    name: "EmployeeSelector",
    data() {
      let selected = JSON.parse(JSON.stringify(this.selected))
      return {
        selectApersonModuleLoad:false,
        searchBox:[],
        direct_Supervisor_you:false,
        directSupervisor:0,
        dialogVisible: true,
        employee_selected_list: selected.employee,
        dept_selected_list: selected.dept,
        employee_selected: [],
        dept_selected: [],
        com_height: '100%',
        company_info: {},
        actions_show: false,
        dept_name: '',
        dept_id: 0,
        list: [],
        dept_list: [],
        keyword: '',
        owner_id: 0,
        user_info: this.$store.getters.user_info,
        pid: 0,
        pid_list: [],
        selected_box_width: '0',
        pid_list_arr: [],
        visible_: false,
        checked: false//全选按钮
      }
    },
    watch: {
      max(val) {
        this.set_button_width()
      },
      selected:{
        deep:true,
        handler(val){
          let selected = JSON.parse(JSON.stringify(val))
          this.employee_selected = []
          this.dept_selected = []
          this.employee_selected_list = selected.employee
          this.dept_selected_list = selected.dept
          for (let i in selected.employee) {
            if (!selected.employee[i].img_url || selected.employee[i].img_url == this.defaultImg()) {
              // this.$set(this.selected.employee[i], 'img_url', 'static/images/head_default.png')
              this.$set(this.selected.employee[i], 'img_url', 'static/images/gttx0.jpg')
            }
            this.employee_selected.push(selected.employee[i].id)
          }
          for(let i in selected.dept){
            this.dept_selected.push(selected.dept[i].dept_id)
          }
          this.set_button_width()
        }
      },
      // selected(val) {
      //   let selected = JSON.parse(JSON.stringify(val))
      //   this.employee_selected = []
      //   this.dept_selected = []
      //   this.employee_selected_list = selected.employee
      //   this.dept_selected_list = selected.dept
      //   for (let i in selected.employee) {
      //     this.employee_selected.push(selected.employee[i].id)
      //   }
      //   for(let i in selected.dept){
      //     this.dept_selected.push(selected.dept[i].dept_id)
      //   }
      //   this.set_button_width()
      // },
      visible(val){
        this.visible_ = JSON.parse(JSON.stringify(val))
        if(val){
          this.selectApersonModuleLoad = true
          setTimeout(() => {
            if (this.$route.query.pid) {
              this.pid = this.$route.query.pid
            }
            this.get_user_list(function () {

            })
            this.get_dept_list()
          }, 200)
        }
        this.set_button_width()
      },
      employee_selected_list() {
        let l = this.employee_selected_list.length + this.dept_selected_list.length
        let width = 0.9 * l;
        this.selected_box_width = width + 'rem'
        this.set_button_width()
        
        this.checkAll_Optimize()//全选细节优化，选中发生变化时执行
      },
      dept_selected_list() {
        let l = this.employee_selected_list.length + this.dept_selected_list.length
        let width = 0.9 * l;
        this.selected_box_width = width + 'rem'
        this.set_button_width()
      },
      keyword(val) {
        this.list = this.searchBox.filter(item=> item.name.includes(this.keyword))
        // this.get_user_list(function () {

        // })
      },
      
      list(){
        this.checkAll_Optimize()//全选细节优化，人员列表发生变化时执行
      },
    },
    methods: {
      defaultImg(){
        return "https://rescdn.qqmail.com/node/wwmng/wwmng/style/images/independent/DefaultAvatar$73ba92b5.png"
      },
      //全选细节优化
      checkAll_Optimize(){
        let checkedTrue = true
        for(let i in this.list){
          if(this.list[i].status!=2 && this.list[i].status!=3){//排除人员列表中的离职和拒绝加入人员
            if(this.list[i].checked == false){
              checkedTrue = false
            }
          }
        }
        if(checkedTrue){
          if(this.list.length != 0){
            this.checked = true
          }else{
            this.checked = false
          }
        }else{
          this.checked = false
        }
      },
      //关闭弹窗清除数据
      closeDialog(){
          this.direct_Supervisor_you = false
      },
      // 全选
      checkedChange(val){
        if (val) {
          for (let i in this.list) {
            if (this.employee_not_select.indexOf(this.list[i].id) < 0) {
              this.$set(this.list[i], 'checked', true)
            }
          }
          this.$nextTick(() => {
            let employeeSelectedList = JSON.parse(JSON.stringify(this.employee_selected_list))
            let employeeSelectedIds = [], total = 0
            employeeSelectedList.forEach(element => {
              employeeSelectedIds.push(element.id)
            });
            for (const i in this.list) {
              this.list[i].status !== 2 && this.list[i].status !== 3 && this.selectedQuitEmployee?this.$set(this.list[i], 'checked', true):''
              if (employeeSelectedIds.includes(this.list[i].id)) {
                total += 1
              }else{
                this.list[i].status !== 2 && this.list[i].status !== 3 && this.selectedQuitEmployee?this.employee_selected_list.push(this.list[i]):''
              }
            }
            // debugger
          })
        }else{
            for(let i in this.employee_selected_list){
              for(let a in this.list){
                if(this.list[a].status!=2 && this.list[a].status!=3){//排除人员列表中的离职和拒绝加入人员
                  if(this.employee_selected_list[i].id == this.list[a].id){
                    this.employee_selected_list.splice(i,1)
                  }
                }
              }
            }
          // this.employee_selected_list = []
          // this.employee_selected = []
          for (let i in this.list) {
            this.$set(this.list[i], 'checked', false)
          }
          // this.clear_data()
        }
      },

      close_before(done) {
        this.close()
      },
      set_button_width() {

      },
      back() {
        this.pid = this.pid_list[this.pid_list.length - 1]
        this.pid_list.splice(this.pid_list.length - 1)
        this.pid_list_arr.splice(this.pid_list_arr.length - 1)
        this.get_user_list(function () {

        })
      },
      back_by_index(index) {

        if (index == this.pid_list.length) {
          return false
        }
        this.pid = this.pid_list[index]
        this.pid_list.splice(index, 100)
        this.pid_list_arr.splice(index, 100)
        this.get_user_list(function () {

        })
      },
      show_child(item) {
        this.pid_list.push(this.pid)
        this.pid_list_arr.push(item)
        this.pid = item.id
        this.get_user_list(function () {

        })
      },
      employee_cancel(item) {

        this.employee_selected.splice(this.employee_selected.indexOf(item.id), 1)
        let delete_index = -1
        for (let i in this.employee_selected_list) {
          if (this.employee_selected.indexOf(this.employee_selected_list[i].id) < 0) {
            delete_index = i
          }
        }
        if (delete_index >= 0) {
          // this.employee_selected_list.splice(delete_index, 1)
          for (let i in this.list) {
            if (this.list[i].id == item.id) {
              this.$set(this.list[i], 'checked', false)
            }
          }
          
          for(let i in this.employee_selected_list){
            if(this.employee_selected_list[i].id == item.id){
              this.employee_selected_list.splice(i, 1)
            }
          }
        }
      },
      dept_cancel(item) {
        this.dept_selected.splice(this.dept_selected.indexOf(item.dept_id), 1)
        let delete_index = -1
        for (let i in this.dept_selected_list) {
          // if (this.dept_selected.indexOf(this.dept_selected_list[i].dept_id) < 0) {
          //   delete_index = i
          // }
          if(this.dept_selected_list[i].dept_id == item.id){
            delete_index = i
          }
          if(this.dept_selected_list[i].dept_id == item.dept_id){
            delete_index = i
          }
        }
        if (delete_index >= 0) {
          this.dept_selected_list.splice(delete_index, 1)
          for(let i in this.dept_list){
            if(this.dept_list[i].id == item.dept_id){
              this.$set(this.dept_list[i], 'checked', false)
            }
          }
        }
      },
      select_employee(item){
        if (this.selectedQuitEmployee) {
          if (this.employee_not_select.indexOf(item.id) >= 0 || item.status > 1) {
            return false
          }
        }else{
          if (this.employee_not_select.indexOf(item.id) >= 0) {
            return false
          }
        }

        if(item.checked){
          item.checked = false
          this.employee_cancel(item)
        } else {
          if (!this.multi) {
            this.employee_selected = []
            this.employee_selected_list = []
            for (let i in this.list) {
              this.$set(this.list[i], 'checked', false)
            }
          }
          if (this.max > 0 && this.employee_selected.length == this.max && this.multi) {
            this.$toast('最多只能选择' + this.max + '人')
            return false
          }
          this.employee_selected.push(item.id)
          this.employee_selected_list.push({id: item.id, name: item.name, img_url: item.img_url,direct_Supervisor:item.direct_Supervisor})
          item.checked = true
        }
        
        WWOpenData.bind(this.$el)
      },
      unique(arr){
        return Array.from(new Set(arr))
      },
      select_dept(item) {
        if (!this.can_select_dept) {
          this.show_child(item)
          return false
        }
        if (item.checked) {
          item.checked = false
          this.dept_cancel(item)
        } else {
          if (!this.dept_multi) {
            this.dept_selected = []
            this.dept_selected_list = []
            for (let i in this.dept_list) {
              this.$set(this.dept_list[i], 'checked', false)
            }
          }
          let dept_sele = this.dept_selected
          dept_sele.push(item.id)
          this.dept_selected =this.unique(dept_sele)
          // this.dept_selected.push(item.id)
          // let dept_sele = new Set(this.dept_selected)
          // this.dept_selected = this.unique(this.dept_selected)
          this.dept_selected_list.push({dept_id: item.id, dept_name: item.name, avatar: 'static/images/e66f.jpg'})
          let newobj = {};
            this.dept_selected_list = this.dept_selected_list .reduce((preVal, curVal) => {
              newobj[curVal.dept_id] ? '' : newobj[curVal.dept_id] = preVal.push(curVal);
              return preVal
            }, [])
          item.checked = true
        }

      },
      clear_data(){
        this.employee_selected = []
        this.employee_selected_list = []
        this.dept_selected = []
        this.dept_selected_list = []
        for (let i in this.list) {
          this.$set(this.list[i], 'checked', false)
        }
        for (let i in this.dept_list) {
          this.$set(this.dept_list[i], 'checked', false)
        }
      },
      close() {
        //this.visible = false
        this.$emit('update:visible', false)
        this.$emit('cancel')
        if (this.close_clear_data) {
          // this.employee_selected = []
          // this.employee_selected_list = []
          this.dept_selected = []
          this.dept_selected_list = []
          for (let i in this.list) {
            this.$set(this.list[i], 'checked', false)
          }
          for (let i in this.dept_list) {
            this.$set(this.dept_list[i], 'checked', false)
          }
        }

      },
      confirm() {
        this.$emit('confirm', {
          employee: this.employee_selected_list,
          dept: this.dept_selected_list
        })
        this.close()
      },
      get_dept_list(){
        if(this.employee_list.length > 0){
          return
        }
        this.$http('get','/api/department/index',{pid: this.pid, keyword:this.keyword}).then((res) => {
          for(let i in res.data.data.list){
            res.data.data.list[i]['checked'] = false
            if (this.dept_selected.indexOf(res.data.data.list[i].id) >= 0) {
              res.data.data.list[i]['checked'] = true
            }
          }
          this.dept_list = res.data.data.list
          this.owner_id = res.data.data.owner_id
          this.company_info = res.data.data.company_info
          if (res.data.data.dept_info == null) {
            this.dept_name = JSON.parse(JSON.stringify(res.data.data.company_info.name))
            this.dept_id = 0
          } else {
            this.dept_name = JSON.parse(JSON.stringify(res.data.data.dept_info.name))
            this.dept_id = res.data.data.dept_info.id
          }

        }).catch((e) => {

        })
      },
      get_user_list (done) {
        if(this.employee_list.length > 0){
          let list = this.employee_list
          if(this.employee_selected.length == 0){
            for(let i in this.selected.employee){
              this.employee_selected.push(this.selected.employee[i].id)
            }
          }
          for(let i in list){
            if(list[i].direct_Supervisor){
              this.direct_Supervisor_you = list[i].direct_Supervisor
              this.directSupervisor = list[i].id
            }
            list[i]['letter_index'] = '#'
            if(this.$store.getters.employee_map[list[i].id]){
              list[i]['letter_index'] = this.$store.getters.employee_map[list[i].id].letter_index
              if(this.$store.getters.employee_map[list[i].id].img_url == '' || this.$store.getters.employee_map[list[i].id].img_url == this.defaultImg()){
                // list[i]['img_url'] = 'static/images/head_default.png'
                list[i]['img_url'] = 'static/images/gttx0.jpg'
              }else {
                list[i]['img_url'] = this.$store.getters.employee_map[list[i].id].img_url
              }
            }

            list[i]['checked'] = false
            if(this.employee_selected.indexOf(list[i].id) >= 0){
              list[i]['checked'] = true
            }
          }

          if (this.keyword) {
            list = []
            this.employee_list.forEach(element => {
              if(element.name.indexOf(this.keyword) != "-1"){
                list.push(element)
              }
            });
          }

          this.list = list.sort((a,b) => {
            return a.letter_index.charCodeAt(0) - b.letter_index.charCodeAt(0)
          })
          if(this.whether_to_remove_right){
            this.selectedLists()
          }
          this.searchBox = this.list
          
          this.selectApersonModuleLoad = false
          done()
          return false
        }
        this.list = []
        this.selectApersonModuleLoad = true
        this.$http('get','/api/employee/index',{dept_id: this.pid,keywords: this.keyword,page: 0,page_size: 2000}).then((res) => {
          
          let list = this.filtration(res.data.data.list);

          let employeeSelectedData = []
          for(let i in this.employee_selected_list){
            employeeSelectedData.push(this.employee_selected_list[i].id)
          }
          for (let i in list) {
            list[i]['checked'] = false
            if (this.employee_selected.indexOf(list[i].id) >= 0) {
              list[i]['checked'] = true
            }
            if (employeeSelectedData.indexOf(list[i].id) >= 0) {
              list[i]['checked'] = true
            }
            if (list[i].img_url == '' || list[i].img_url == this.defaultImg()) {
              // list[i].img_url = 'static/images/head_default.png'
              list[i].img_url = 'static/images/gttx0.jpg'
            }
          }
          if (this.use_employee_list) {
            list.forEach(element => {
              if (element.employee_detail.role_list.findIndex((value)=>value.name=='dept_manager'||value.name=='creator'||value.name=='point_manager'||value.name=='admin') >= 0) {
                this.list.push(element)
              }
            });
            return false
          }else{
            this.list = list
          }
          if(this.whether_to_remove_right){
            this.selectedLists()
          }
          this.searchBox = this.list
          done()
        }).catch((e) => {
          done()
        }).finally(()=>{
          this.selectApersonModuleLoad = false
        })
      },
      selectedLists(){
        let selected_list = []
        // console.log(this.employee_selected_list.filter(a=>!this.list.some(b=>b.id==a.id)))
        selected_list = this.employee_selected_list.filter(a=>!this.list.some(b=>b.id==a.id))
        console.log(selected_list.length)
        if(selected_list.length!=0){
          console.log(selected_list.length)
          for(let i in this.employee_selected_list){
            for(let a in selected_list){
              if(this.employee_selected_list[i].id == selected_list[a].id){
                this.employee_selected_list.splice(i,1)
              }
            }
          }
        }
      },
      
    // 过滤各种条件：如：自己，创始人，只显示管理者等。。。
      filtration(data) {
        var list = data;
        // 去除已经离职的人
        for (let i = 0; i < list.length; i++) {
          if (list[i].status == 2) {
            list.splice(i, 1);
            i--
          }
        }
        var managerList = []; // 管理者列表
        // 只显示管理者
        if (this.is_manager_only) {
          var isManager;
          list.map(item => {
            isManager = false;
            item.employee_detail.role_list.map(item2 => {
              if (item2.name == 'creator' || item2.name == 'point_manager' || item2.name == 'dept_manager' || item2.name == 'admin') {
                isManager = true;
              }
            });
            if (isManager) {
              managerList.push(item);
            }
          });
          list = managerList;
        }
        // 过滤自己
        if (!this.include_self) {
          const currUserId = this.$store.getters.user_info.id;
          for (let i = 0; i < list.length; i++) {
            if (list[i].id == currUserId) {
              list.splice(i, 1);
              i--
            }
          }
        }
        // 过滤创始人
        if (this.is_filtration_creator) {
          for (let i = 0; i < list.length; i++) {
            if (list[i].is_creator == 1) {
              list.splice(i,1);
              i--
            }
          }
        }
        //过滤指定人员[]
        if (this.employee_not_select.length > 0) {
          for (let i = 0; i < list.length; i++) {
            if (this.employee_not_select.indexOf(list[i].id) >= 0) {
              list.splice(i, 1);
              i--
            }
          }
        }
        return list;
      },
      removeSelf(list){
        if (!this.include_self){
          const currUserId = this.$store.getters.user_info.id
          const index = list.findIndex(o=>o.id === currUserId)
          if(index > -1){
            list.splice(index, 1)
          }
        }
        return list
      }
    },
    created() {
      for(let i in this.selected.employee){
        if(!this.selected.employee[i].img_url || this.selected.employee[i].img_url == this.defaultImg()){
          // this.selected.employee[i].img_url = 'static/images/head_default.png'
          this.selected.employee[i].img_url = 'static/images/gttx0.jpg'
        }
      }
      if (document.documentElement.style.height) {
        this.com_height = document.documentElement.style.height
      }
      setTimeout(() => {
        if (this.$route.query.pid) {
          this.pid = this.$route.query.pid
        }
        this.get_user_list(function () {
          
        })
        
        this.get_dept_list()
      }, 200)

    }
  }
</script>

<style scoped>
  .employee_selector_box {
    width: 600px;
    padding: 24px;
  }

  /* 搜索框 */
  .employee_selector_box .search{
    position: relative;
    display: table-cell;
    left: 10%;
    padding: 0;
    border: 1px #C0C4CC solid;
    border-radius: 16.5px;
  }
  .employee_selector_box .search-box button{
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    width: auto;
    padding: 0;
    background: none;
    border-radius: 0px;
    border: none;
  }
  .employee_selector_box .search-box /deep/ .el-input{
    display: inline-block;
    width: 84%;
    padding: 0 24px 0 6px;
    background: none;
    border-radius: 0px;
    border: none;
  }
  .employee_selector_box .search-box /deep/ .el-input input{
    padding:0;
    line-height: 34px;
    border:none;
  }
  /* /搜索框 */

  /* 左边框 */
  .employee_selector_box .choose_left {
    /* padding:8px 10px 8px 10px; */
    padding: 0 10px;
    margin: 8px 0;
  }

  .employee_selector_box .choose_left .employee_cell{
    border-bottom:1px #f8f8f8 solid;
  }
  .employee_selector_box .choose_left .employee_cell_a .employee_cell{
    border-bottom:none;
  }
  .employee_selector_box .choose_left .employee_checkbox{
    padding-left: 8px;
  }
  .employee_selector_box .choose_left .employee_img_url{
    padding-left: 8px;
  }
  .employee_selector_box .choose_left .employee_name{
    padding-left: 8px;
  }

  .employee_selector_box /deep/ .el-scrollbar__thumb {
    width:2px;
    margin:15px 0 0 6px;
    background:#409EFF;
  }
  /* 左边框 */

  /* 右边距 */
  .employee_selector_box .option-box{
    padding:14px 0;
  }
  .employee_selector_box .option-box button{
    margin-right:16px;
  }
  .employee_selector_box .choose_right{
    padding:8px 10px;
  }
  .employee_selector_box .choose_right .employee_delete .el-button{
    transform: scale(0.5);
    background: #C0C4CC;
  }
  .employee_selector_box .choose_right .employee_delete .el-button /deep/ .el-icon-close{
    color:#fff;
  }
  .employee_selector_box .choose_right .employee_delete .el-button:active{
    background: #409EFF;
  }
  .employee_selector_box .choose_right .employee_delete .el-button:active /deep/ .el-icon-close{
    color:#FFF;
  }
  .employee_selector_box .choose_right .employee_cell .employee_name{
    padding-left:8px;
  }
  .employee_selector_box .choose_right .employee_cell .employee_img_url{
    padding-left:8px;
  }
  /* 右边距 */

  .employee_selector_box /deep/ .employee_cell{
    padding:8px 0;
  }
  .employee_selector_box /deep/ .employee_cell:hover{
    background:#ecf5ff;
  }

  .employee_cell {
    display: table;
    cursor: pointer;
    width: 100%;
    color:#606266;
    padding: 8px 0;
    background-color: transparent;
  }

  .employee_cell .employee_cell_clear {
    clear: both;
  }

  .employee_cell .employee_img_url {
    display: table-cell;
    vertical-align: middle;
    width: 30px;
    padding-left:0px;
  }

  .employee_cell .employee_img_url img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }

  .employee_cell .employee_checkbox {
    display: table-cell;
    vertical-align: middle;
    width: 30px;
    text-align: center;
  }

  .employee_cell .employee_name{
    display:table-cell;
    vertical-align: middle;
    color:#606266;
  }

  .employee_delete {
    display: table-cell;
    text-align: right;
    padding-right:0px;
  }

  .employee_cell_a {
    display: block;
  }

  .employee_cell_a:hover {
    background-color: #ecf5ff;
    border-radius:4px;
  }

  .dept_child_cell {
    display: table-cell;
    vertical-align: middle;
  }

  .dept_child_cell span {
    float: right;
    padding-right:8px;
  }
  .dept_child_cell span:hover{
    color:#1c1c1c;
  }
  .dept_child_cell span:active{
    color:#1c1c1c;
  }

  .scroller-box {
    height: 400px;
    padding-right: 0px !important;
    background-color: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
  }

  .col-line {
    position: relative;
    height: 400px;
  }

  .col-line:before {
    content: " ";
    width: 1px;
    height: 400px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    background-color: #eee;
  }

  .search-box {
    background-color: #fff;
    padding:14px 5px;
    border-bottom: 1px solid #eee;
    margin: 0 -5px;
  }

  .option-box {
    padding: 5px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    margin: 0 -5px;
    text-align: right;
  }

  .child_btn {
    color: #409EFF;
  }
  .dept_path{
    margin: 10px 0;
    display: block;
    white-space: nowrap;
    overflow: auto;
  }

  /*滚动条的宽度*/

  .dept_path::-webkit-scrollbar {
    width:5px;
    height:5px;
  }

  /*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/

  .dept_path::-webkit-scrollbar-track {
    width: 6px;
    background-color:#fff0;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
  }

  /*滚动条的设置*/

  .dept_path::-webkit-scrollbar-thumb {
    background-color:#fff0;
    background-clip:padding-box;
    min-height:28px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
  }
  /*滚动条移上去的背景*/

  .dept_path:hover::-webkit-scrollbar-thumb{
    background-color:rgba(144,147,153,.3);
  }


  .scrollbarHeight1{
    height: 300px;
  }
  .scrollbarHeight2{
    height: 320px;
  }
</style>
