<template>
  <div class="dept-select-drodown__wrap">

    <div class="select-dropdown__content" :style="contentStyle">
      <EmployeeSelectorNoMark :employee_list.sync="employee_list" :selected.sync="selected" @confirm="confirm"></EmployeeSelectorNoMark>
    </div>
    <div class="date-picker__toolbar">
      <van-button
        class="reset-button"
        block
        square
        color="rgba(38,162,255,0.2)"
        @click="onResetDepart"
      >{{ resetBtnText }}
      </van-button>
      <van-button block square type="info" @click="onConfirmDepart">确认</van-button>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {CellGroup, Cell, Icon, Loading} from 'vant'
  import ListEmptyDataCell from './ListEmptyDataCell'
  import EmployeeSelectorNoMark from './EmployeeSelectorNoMark'

  Vue.use(CellGroup).use(Cell).use(Icon).use(Loading)

  export default {
    props: {
      contentHeight: {type: String, default: '7.5rem'},
      resetBtnText: {type: String, default: '恢复默认'}
    },
    name: 'EmployeeSelectorDropdown',
    data () {
      return {
        employee_list: [],
        selected: {employee: [], dept: []},
        loading: false,
        deptData: null,
        rightDepartData: null,
        selectedDeptStack: null,
        selectedLeftDeptId: null,
        selectedLeftDeptItem: null,
        selectedRightDeptId: null,
        selectedRightDeptItem: null,
      }
    },
    components: {ListEmptyDataCell, EmployeeSelectorNoMark},
    computed: {
      contentStyle () {
        return {height: this.contentHeight}
      }
    },
    methods: {
      onselectedLeftDepart (deptItem) {
        this.selectedLeftDeptId = deptItem.id
        this.selectedLeftDeptItem = deptItem
        this.selectedRightDeptId = deptItem.id
        this.selectedRightDeptItem = deptItem
        this.selectedDeptStack = [deptItem]
        this.rightDepartData = [].concat(deptItem, this.deptData.filter(o => o.pid === deptItem.id))
        this.$emit('onchange', deptItem)
      },
      onselectedRightDepart (deptItem) {
        if (deptItem.id === this.selectedRightDeptId) {
          return
        }
        this.selectedRightDeptId = deptItem.id
        this.selectedRightDeptItem = deptItem
        this.selectedDeptStack.push(deptItem)
        this.rightDepartData = [].concat(deptItem, this.deptData.filter(o => o.pid === deptItem.id))
        this.$emit('onchange', deptItem)
      },
      onResetDepart () {
        this.selected = {employee: [], dept: []}
        this.employee_list = []
      },
      onConfirmDepart () {
        this.$emit('onConfirm', this.selectedRightDeptItem)
      },
      getDepartData () {

      },
      restoreDefaults () {
        this.selectedLeftDeptId = null
        this.selectedLeftDeptItem = null
        this.selectedRightDeptId = null
        this.selectedRightDeptItem = null
        this.selectedDeptStack = null
        this.rightDepartData = null
      },
      confirm(data){
        this.selectedRightDeptItem = data
      }
    },
    mounted () {
      this.getDepartData()
    }
  }
</script>

<style scoped lang="less">
  .dept-select-drodown__wrap {
    position: relative;
    overflow: hidden;
  }

  .select-dropdown__content {
    position: relative;
  }

  .employee_cell {
    padding: 0.16rem 0.32rem;
    touch-action: none;
  }

  .employee_cell .van-cell__title {
    line-height: 0.8rem;

    & > span {
      font-size: 0.3rem;
    }
  }

  .dept_path a {
    color: #238dfa;
    font-size: 0.3rem;
  }

  .dept_path a:nth-last-child(1) {
    color: #999;
  }

  .dept_path a * {
    vertical-align: middle;
  }

  .dept_path {
    position: relative;
    display: flex;
    height: 0.8rem;
    font-size: 0.32rem;
    padding: 0 0.32rem;
    align-items: center;
    touch-action: none;
    overflow-x: scroll;
  }

  .dept_path:after {
    content: ' ';
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #efefef;
    height: 1px;
    position: absolute;
    transform: scaleY(0.5);
  }

  .selector-left {
    width: 2.2rem !important;
    background-color: #f5f5f5;
  }

  .selector-left .van-cell {
    background-color: #f5f5f5;
  }

  .selector-left .employee_cell {
    padding-left: 0.32rem;
  }

  .selector-left .employee_cell.on {
    position: relative;

    &:before {
      position: absolute;
      top: 50%;
      left: 0.08rem;
      content: '';
      width: 0.04rem;
      height: 0.36rem;
      background: #26a2ff;
      border-radius: 0.04rem;
      transform: translateY(-50%);
    }
  }

  /deep/ .selector-left .van-cell:not(:last-child):after {
    left: 0;
  }

  .selector-right {
    background-color: #fff;
  }

  .van-cell {
    &.on {
      color: #238dfa;

      & .van-cell__title > span {
        font-size: 0.3rem;
      }
    }

    & .van-cell__title > span {
      font-size: 0.3rem;
    }

    & .van-icon-success {
      align-self: center;
    }
  }

  .date-picker__toolbar {
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 22;
    background-color: #fff;
    & .reset-button {
      touch-action: none;
      color: #26a2ff !important;
      border: transparent !important;
    }
  }
  .employee_list_box{padding:0.32rem;}
</style>

