<template>
 <el-dialog
      custom-class="manager"
      title="设置管理者"
      width="526px"
      height="100%"
      :before-close="closeDialog"
      :visible.sync="isDialog"
      :close-on-click-modal="false"
      style="height:100%;"
    >
  <div style=" background-color: #fff;width: 100%;clear:both;">
      <el-row>
      <el-col :span="11" style="margin-bottom:0; padding-right:0;">
        <div class="manager_box_left">
           <div style="width: 100%;height: 40px;background: #DCDFE6;
              font-size: 14px; color: #606266;line-height: 40px;
              padding-left: 14px;
              ">
                  所有人
              </div>
               <div style="margin-bottom:0; padding:14px 12px 0;" class="inline-block-btn-list">
          <div class="gap-right-8" style="display:inline-block; width:100%; margin-bottom:0;font-size:12px;">
            <el-input
              clearable
              placeholder="输入关键词查找"
              ref="search-bar"
              v-model="filter.keywords"
              class="input-with-select"
              @keyup.enter.native="onFilterChanged"
            >
              <el-button slot="append" icon="el-icon-search" @click="onFilterChanged" class="manager_button"></el-button>
            </el-input>
          </div>
        </div>
          <el-scrollbar
            wrap-class="column-wrapper scrollable-items-container dept_tree"
            :native="false"
            style="min-height: 330px;"
          >
            <div class="manager_all_persons">
              <el-table
                v-loading="loading"
                ref="multipleTable"
                :data="tableData"
                :border="false"
                tooltip-effect="dark"
                @row-click="rowClick"
                @selection-change="handleSelectionChange"
                @select-all="select_all"
                style="position:relative;width: 100%;z-index: 1"
              >
                <el-table-column type="selection" width="42" :selectable="isSelectable"></el-table-column>

                <el-table-column prop="name" label="选择人员">
                  <template slot-scope="scope">
                    <div class="rank_head" style="cursor: pointer;">
                      <img
                        v-if="scope.row.img_url != '' && scope.row.img_url != null"
                        v-bind:src="scope.row.img_url"
                        width="20px"
                        height="20px"
                      >
                      <img
                        v-if="scope.row.img_url == null || scope.row.img_url == ''"
                        src="static/images/head_default.png"
                        width="20px"
                        height="20px"
                      >
                      {{scope.row.name}}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-scrollbar>
        </div>
        </el-col>

          <div style="display:inline-block;border-right: 1px solid #D8D8D8;height: 420px;float: none;"></div>

        <el-col :span="11">

        <div class="manager_box_right" >
          <div style="width: 100%;height: 40px;background: #DCDFE6;
              font-size: 14px; color: #606266;line-height: 40px;
              padding-left: 14px;
              ">
                  已选管理者
              </div>
          <el-scrollbar
             wrap-class="column-wrapper scrollable-items-container dept_tree"
            :native="false"
            style="min-height: 380px;"
          >
            <div class="manager_choose_persons">
              <el-table

                @header-click="clearEmployee"
                :data="multipleSelection"
                :border="false"
                custom-class="manager_person_list"
              >

              <!-- （'+(multipleSelection.length)+'人） -->
              <el-table-column prop="name">
                  <template slot-scope="scope">
                    <div class="rank_head" style="cursor: pointer;">
                      <img
                        v-if="scope.row.img_url != '' && scope.row.img_url != null"
                        v-bind:src="scope.row.img_url"
                        width="20px"
                        height="20px"
                      >
                      <img
                        v-if="scope.row.img_url == null || scope.row.img_url == ''"
                        src="static/images/head_default.png"
                        width="42px"
                        height="42px"
                      >
                      {{scope.row.name}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  height="50%"
                  width="50"
                  column-key="clear"
                  label-class-name="clearEmployeeBtn"
                >
                  <template slot-scope="scope">
                    <div class="rank_head" style="cursor: pointer; text-align: center;">
                      <a
                        @click="removeEmployee(scope.row.id)"
                        class="el-icon-circle-close"
                        style="color:#ff7d79;"
                      ></a>
                    </div>
                  </template>
                </el-table-column>
              </el-table
>
            </div>
          </el-scrollbar>
        </div>
      </el-col>
    </el-row>

     <el-col :span="24">
        <el-pagination
          background
          style="margin-top:0;"
          :page-sizes="[10, 20, 50, 100]"
          layout="sizes, prev, pager, next"
          @size-change="handleSizeChange"
          :page-size="pageLimit"
          :total="totalCount"
          :current-page.sync="currentPage"
          @current-change="changePage"
        ></el-pagination>

      </el-col>
     <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: 20px;">
        <el-button @click="checkoutEmploye">取 消</el-button>
        <el-button type="primary"   @click="checkoutEmploye" plain>确定</el-button>
      </div>
  </div>
  </el-dialog>
</template>
<script>
export default {
  // multipleSelectionId
  props: {
    employeeSelectorIds: {
      type: Array,
      default: () => {return []}
    },
    ishow: {
        type: Boolean,
        default: false
    },
    include_admin: {
      type: Boolean,
      default: false
    },
  },

  watch: {
    ishow() {
        console.log(this.ishow)
        console.log("jddmdmdm")
        this.isDialog = this.ishow
    },
    tableData(val) {
      this.$nextTick(() => {
        this.pageSelectedId = []
        val.forEach(item => {
          if (this.employeeSelectorIds.indexOf(item.id) >= 0) {
            this.$refs['multipleTable'].toggleRowSelection(item, true)
            this.pageSelectedId.push(item.id)
          }
        })
      })
    },
    employeeSelectorIds(val) {
      this.$nextTick(() => {
        if (!this.tableData) { return }
        this.pageSelectedId = []
        this.tableData.forEach(item => {
          this.$refs['multipleTable'].toggleRowSelection(item, false)
          if (val.indexOf(item.id) >= 0) {
            this.$refs['multipleTable'].toggleRowSelection(item, true)
            this.pageSelectedId.push(item.id)
          }
        })
      })
    }
  },
  data() {
    return {
      loading: false,
      profile: this.$store.getters.user_info,
      accessEnabled: false,
      dialogTableVisible: false,
      filter: {
        dept_id: [],
        status: 1,
        keywords: ''
      },
      isDialog: false,
      totalCount: 0,
      pageLimit: 6,
      currentPage: 0,
      tableData: [],
      multipleSelection: [],
      multipleSelectionId: [],
      multipleSelectionJson: {},

      pageSelectedId: [],
      dialogExcelVisible: false,
      deptTree: [],
      creatorId: '',
      department_list: []
    }
  },
  methods: {
    // 取消
    checkoutEmploye() {
      this.isDialog = false;
      this.$emit('changishow');
      
    },
    closeDialog() {
       this.isDialog = false;
       this.$emit('changishow');
       
    },
    clearEmployee(column, event) {
      const self = this
      if (column.columnKey == 'clear') {
        for (const i in this.tableData) {
          self.$refs['multipleTable'].toggleRowSelection(
            self.tableData[i],
            false
          )
        }
        this.multipleSelectionId = []
        this.multipleSelectionJson = {}
        this.multipleSelection = []
        this.pageSelectedId = []
      }
    },

    removeEmployee(id) {
      let self = this
      const multipleSelectionId = []
      const multipleSelectionJson = {}
      const multipleSelection = []
      const pageSelectedId = []
      for (const i in this.tableData) {
        if (this.tableData[i].id == id) {
          this.$refs['multipleTable'].toggleRowSelection(
            this.tableData[i],
            false
          )
        }
      }
      for (const i in this.multipleSelection) {
        if (this.multipleSelection[i].id != id) {
          multipleSelection.push(this.multipleSelection[i])
          multipleSelectionJson[
            this.multipleSelection[i].id
          ] = this.multipleSelection[i]
          multipleSelectionId.push(this.multipleSelection[i].id)
        }
      }

      this.multipleSelectionId = multipleSelectionId
      this.multipleSelectionJson = multipleSelectionJson
      this.multipleSelection = multipleSelection


      self.$nextTick(() => {
        self.$emit('check', self.multipleSelection)
        // self.$parent.$parent.$parent.$parent.set_target_ids(self.multipleSelection)
      })

    },

    handleNodeClick(data) {
      if (data.value == 0) {
        this.loadBaseData()
        this.filter.dept_id = []
      } else {
        this.filter.dept_id = [data.value]
      }
      this.onFilterChanged()
    },
    handleSizeChange(val) {
      this.pageLimit = val
      this.onFilterChanged()
    },
    onFilterChanged: function() {
      this.currentPage = 0
      this.loadEmployeeList()
    },
    toggleSelection: function(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },

    select_all(all) {
      const ids = []

      for (const i in all) {
        ids.push(all[i].id)
      }
    },
    handleSelectionChange: function(val) {
        console.log(val)
      // console.log(this.multipleSelectionId)
      const ids = []
      for (const i in val) {
        ids.push(val[i].id)
      }
      for (const i in val) {
        if (this.multipleSelectionId.indexOf(val[i].id) < 0) {
          this.multipleSelectionId.push(val[i].id)
          this.multipleSelectionJson[val[i].id] = val[i]
          this.multipleSelection.push(val[i])
        }
        if (this.pageSelectedId.indexOf(val[i].id) < 0) {
          this.pageSelectedId.push(val[i].id)
        }
      }
      const ids_cancel = []
      if (this.pageSelectedId.length > ids.length) {
        // 之前被选择的数量比现在的数量多，说明有一些被取消了选择
        // 求出这些被取消的选择id

        for (const i in this.pageSelectedId) {
          if (ids.indexOf(this.pageSelectedId[i]) < 0) {
            ids_cancel.push(this.pageSelectedId[i])
          }
        }
        this.pageSelectedId = ids
      }

      if (ids_cancel.length > 0) {
        const multipleSelectionId = []
        const multipleSelection = []
        const multipleSelectionJson = {}

        for (const i in this.multipleSelectionId) {
          if (ids_cancel.indexOf(this.multipleSelectionId[i]) < 0) {
            multipleSelectionId.push(this.multipleSelectionId[i])
          }
        }
        this.multipleSelectionId = multipleSelectionId

        for (const i in this.multipleSelection) {
          if (ids_cancel.indexOf(this.multipleSelection[i].id) < 0) {
            multipleSelection.push(this.multipleSelection[i])
          }
        }
        this.multipleSelection = multipleSelection

        for (const i in this.multipleSelection) {
          multipleSelectionJson[i] = this.multipleSelection[i]
        }
        this.multipleSelectionJson = multipleSelectionJson
      }

      const self = this
      self.$nextTick(() => {
        self.$emit('check', self.multipleSelection)
        // self.$parent.$parent.$parent.$parent.set_target_ids(self.multipleSelection)
      })
    },
    rowClick(row, event, column) {
      this.$refs['multipleTable'].toggleRowSelection(row)
    },
    isSelectable: function(row, index) {
      return true
    },
    toSexName: function(row, column, cellValue) {
      return cellValue == '1' ? '女' : '男'
    },
    dateFormatter: function(row, column, cellValue) {
      return this.$moment(cellValue * 1000).format('YYYY年MM月DD日')
    },
    // 获取员工列表
    loadEmployeeList: function() {
      var self = this
      self.loading = true
       let params = {
         page: this.currentPage,
         page_size: this.pageLimit,
         keywords: this.filter.keywords
      }
       if(this.currentPage == 0) {
        params.page = this.currentPage
      }else {
        params.page = this.currentPage - 1
      }
      // const params = {
      //   site_id: this.$store.getters.site_id,
      //   page: this.currentPage,
      //   interval: this.pageLimit
      // }

      // for (const item in this.filter) {
      //   const value = this.filter[item]
      //   if (item == 'dept_id') {
      //     if (!value || value.length == 0) {
      //       continue
      //     }
      //     params[item] = value[value.length - 1]
      //   } else {
      //     const valueStr = value.toString()
      //     if (valueStr && valueStr.length > 0) {
      //       params[item] = valueStr
      //     }
      //   }
      // }
      // if(self.include_admin){
      //   params['include_admin'] = 1
      // }

      this.$http('get','/api/employee/index',params)
        .then(function(response) {
           
          if (response.data.code == 1) {
            self.loading = false
            self.tableData = response.data.data.list;
            self.totalCount = response.data.data.pageInfo.count;
            var jsonData = response.data
            try {
              // self.department_list = jsonData.department
              // self.totalCount = jsonData.total_count
              // self.pageSelectedId = []
              // const pageSelectedId = []
              // self.$nextTick(() => {
              //   // console.log(self.multipleSelectionId)
              //   for (const i in jsonData.list_data) {
              //     // console.log(self.multipleSelectionId.indexOf(jsonData.list_data[i].id),jsonData.list_data[i].id,self.multipleSelectionJson[jsonData.list_data[i].id])
              //     if (
              //       self.multipleSelectionId.indexOf(
              //         jsonData.list_data[i].id
              //       ) >= 0
              //     ) {
              //       self.$refs['multipleTable'].toggleRowSelection(
              //         self.tableData[i],
              //         true
              //       )

              //       pageSelectedId.push(self.tableData[i].id)
              //     }
              //   }

              //   self.pageSelectedId = pageSelectedId
              // })
            } catch (err) {
              console.log(err)
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    changePage: function(current) {
      console.log(current)
      // if (isNaN(current) || current < 1) {
      //   return false
      // }
      this.loadEmployeeList()
    }
  },
  created() {
   // this.loadBaseData()
    this.loadEmployeeList()
    if (this.profile.manager_type > 1) {

    }
  }
}
</script>
<style scoped>
.el-dialog__body {
   clear: both;
   padding: 30px 0;
}
.el-table__footer-wrapper, .el-table__header-wrapper {
    display: none;
}
.el-table td, .el-table th.is-leaf {
    border: none;
}
.el-table::before {
    width: 0%;
}
.el-pagination {
  text-align: center;
  margin-top: 15px;
}
.dept_tree a.on {
  background-color: #f0f7ff;
}
.clearEmployeeBtn {
  cursor: pointer;
  color: #409eff;
  font-weight: normal;
}
.clearEmployeeBtn:hover {
  color: #66b1ff;
}
.rank_head img {
  width: 20px;
  height: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  margin-right: 5px;
}
.rank_head * {
  vertical-align: middle;
}
/deep/ .manager .el-dialog__header{
  padding: 30px 35px 27px;
}
/deep/ .manager .el-dialog__body{
  padding: 0;
}
/deep/ .manager .input-with-select .el-input__inner{
  display: inline-block;
  width:84%;
  padding:0 4px;
  background:none;
  border-radius:0px;
  border:none;
  float:right;
}
/deep/ .manager .input-with-select .el-input-group__append{
  display: inline-block;
  vertical-align: top;
  top:10px;
  left:10px;
  width:10%;
  padding: 0;
  background: none;
  border-radius: 0px;
  border: none;
  float: left;
}
/deep/ .manager .manager_box_left .el-table__body-wrapper{
  overflow-y:auto;
  height:280px;
}

/deep/ .manager .manager_box_right .el-table__body-wrapper{
  overflow-y:auto;
  height:340px;
}
/deep/ .manager .el-table__body-wrapper::-webkit-scrollbar{
  /*background:rgba(236,245,254,1);*/
  background:transparent;
  width:4px;
}
/deep/ .manager .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background:#409EFF;
}
.manager .input-with-select {
  position:relative;
  border: 1px #C0C4CC solid;
  border-radius: 16.5px;
}
/deep/ .manager .el-input__suffix{
  transform: translateX(-2px) !important;
}
.manager .manager_button{
  margin:0;
  padding: 0;
  background:none;
  border-radius:none;
  border:none;
}
.manager .input-with-select .el-input__inner{
  border:none !important;
  background:none !important;
}
.manager{
  position:relative;
  display:block;
  text-align: center;
  margin-top:18vh !important;
  padding-bottom:30px;
}
.manager .manager_box_left{
  display:inline-block;
  border-radius:4px;
  width:200px;
  height:420px;
  margin-left:35px;
  border:1px #DCDFE6 solid;
}
.manager .manager_box_right{
  display:inline-block;
  border-radius:4px;
  width:200px;
  height:420px;
  margin-right:35px;
  border:1px #DCDFE6 solid;
}
.manager .el-row{
  position:relative;
  display:block;
  text-align: center;
}
.manager .el-row .el-col-11:nth-child(1){
  position:relative;
  display:inline-block;
  text-align: left;
  float:left;
}
.manager .el-row .el-col-11:nth-child(3){
  position:relative;
  display:inline-block;
  text-align: left;
  float:right;
}
.manager  .department_tree{
  line-height: 36px;
  margin-bottom: 10px;
  background: #ECF5FE;
  padding-left: 16px;
  cursor: pointer;
}
.manager .line{
  display:inline-block;
  border-right: 1px solid #D8D8D8;
  height: 420px;
  float:none;
}
.manager .dialog-footer{
  padding-bottom:30px;
}
/deep/ .manager .el-tree-node__expand-icon.is-leaf{
  color: #909399;
  padding: 0 12px 0 20px;
  font-size: 16px;
}
/deep/ .manager .manager_all_persons .el-table__body td{
  padding:4px 0;
  border:none;
}

/deep/ .manager .el-table_2_column_9 .cell{
  padding-left:0px;
}
/deep/ .manager .manager_choose_persons .el-table__body td{
  padding:4px 0;
}
.manager .el-table_2_column_9 .cell .rank_head{
  margin-left:0px;
}
.manager .rank_head a:before{
  color:#C0C4CC;
}

</style>
