<template>
  <div>
    <div class="employee_selector_box">
      <el-row :gutter="10">
        <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="scroller-box one">

          <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">
              <a href="javascript:void(0)" v-for="(item,index) in dept_list" :key="index">
                <div class="employee_cell" @click="select_dept(item)" v-show="item.pid == pid && item.name.indexOf(keyword) >= 0 && dept_not_select.indexOf(item.id) < 0">
                  <i class="el-icon-caret-right" style=" display: inline-block;"></i>
                  <div class="employee_checkbox" v-if="can_select_dept">
                    <el-checkbox v-model="item.checked"></el-checkbox>
                  </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" v-show="item.id">
                  <div class="employee_cell" v-if="can_select_employee" @click.prevent.stop="select_employee(item)" v-show="employee_not_select.indexOf(item.id) < 0">
                    <div class="employee_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>
                    
                    <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>
                    </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">
            <span style="line-height: 40px; padding-left: 10px;" class="fl" v-show="multi">已选择{{employee_selected_list.length}}个员工</span>
            <el-button type="type" @click="clear_data">清空</el-button>
          </div>
          <el-scrollbar wrap-class="column-wrapper scrollable-items-container" :native="false" style="height: 400px;">
            <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" v-if="item.img_url">
                  <img :src="item.img_url" class="employee_cell_head_img" />
                </div>
                <div class="employee_img_url" v-else>
                  <img src="static/images/head_default.png" class="employee_cell_head_img" />
                </div>
                <div class="employee_name">
                  <!-- {{item.name}} -->
                  <WWOpenData type="userName" :openid="item.name"></WWOpenData>
                </div>
                <div class="employee_delete">
                  <el-button type="default" size="mini" @click="employee_cancel(item,true)" 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> 
    -->

  </div>
</template>

<script>
  var timers = null
  export default {
    props:{
      Out_of_the_current:{
        type: Boolean,
      },
      two_of_the_current:{
        type: Boolean,
      },
      two_of_the_current_two:{
        type: Number,
      },
      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
      },
      isChecKedAll: {
        type: Boolean,
        default: true
      },
      close_clear_data: {
        type: Boolean,
        default: true
      },
      max: {
        type: Number,
        default: 0
      }
    },
    name: "EmployeeSelector",
    data() {
      let selected = JSON.parse(JSON.stringify(this.selected))
      return {
        searchBox:[],
        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) {
            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()
        },
        immediate: true
      },
      // 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){
          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()
      },
      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.options =this.keyword?this.alloptions.filter(item=> item.name.includes (this,keyword)): this. alloptions
        //this.list
        this.list = this.searchBox.filter(item=> item.name.includes(this.keyword))
        // this.list.filter(val)
        // clearTimeout(timers)
        // // timers = setTimeout(function () {
        // //   this.get_user_list(function () {})
        // // }, 500)
        // timers = setTimeout(()=>{
        //   this.get_user_list()
        // },500)
      }
    },
    methods: {
      defaultImg(){
        return "https://rescdn.qqmail.com/node/wwmng/wwmng/style/images/independent/DefaultAvatar$73ba92b5.png"
      },
      // 全选
      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.selectedQuitEmployee?this.$set(this.list[i], 'checked', true):''
              if (employeeSelectedIds.includes(this.list[i].id)) {
                total += 1
              }else{
                this.list[i].status !== 2 && this.selectedQuitEmployee?this.employee_selected_list.push(this.list[i]):''
              }
            }
            // console.log(this.employee_not_select)
            // console.log(this.employee_selected_list)
            // debugger
          })
        }else{
          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 (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)
          this.$emit('confirms', '')
        } 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})
          item.checked = true
          this.$emit('confirms', this.employee_selected_list)
        }
      },
      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)
            }
          }
          this.dept_selected.push(item.id)
          this.dept_selected_list.push({dept_id: item.id, dept_name: item.name, avatar: 'static/images/e66f.jpg'})
          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
          for(let i in list){
            list[i]['letter_index'] = '#'
            if(this.$store.getters.employee_map[list[i].id] && this.employee_not_select.indexOf(list[i].id) < 0){
              list[i]['letter_index'] = this.$store.getters.employee_map[list[i].id].letter_index
              list[i]['status'] = this.$store.getters.employee_map[list[i].id].status
              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'
              }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)
          })
          this.searchBox = this.list
          done()
          return false
        }
        this.list = []
        this.$http('get','/api/employee/index',{dept_id: this.pid,keywords: this.keyword,page: 0,page_size: 2000}).then((res) => {
          for (let i in res.data.data.list) {
            res.data.data.list[i]['checked'] = false
            if (this.employee_selected.indexOf(res.data.data.list[i].id) >= 0) {
              res.data.data.list[i]['checked'] = true
            }
            if (res.data.data.list[i].img_url == '' || res.data.data.list[i].img_url == this.defaultImg()) {
              res.data.data.list[i].img_url = 'static/images/head_default.png'
            }
          }
          let lists = res.data.data.list
          lists.forEach((element,index) => {
            let role_list = element.employee_detail.role_list
              if(this.Out_of_the_current){
                role_list.forEach((item,key)=>{
                  if(item.name == "creator"){
                    lists.splice(index,1)
                  }
               })
              }
          });
          lists.forEach((element,index) => {
            if(this.two_of_the_current){
              if(element.id == this.two_of_the_current_two){
                lists.splice(index,1)
              }
            }
          })
          this.list = lists
          this.searchBox = this.list
          // console.log(this.searchBox)
          done()
        }).catch((e) => {
          done()
        })
      }
    },
    created() {
      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: 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: -webkit-inline-box;
    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: 440px;
    padding-right: 0px !important;
    background-color: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
  }
  /* .scroller-box.one{
    height: 440px;
  } */

  .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: 320px;
  }
  .scrollbarHeight2{
    height: 340px;
  }
</style>
