<template>
  <div class="dropdown-box">
    <div class="dept_path">
      <a href="javascript:void(0);" @click="backToIndex(-1)">全公司</a>
      <a
        v-for="(item, i) in selectedDepartStack"
        :key="i"
        href="javascript:void(0);"
        @click="backToIndex(i)"
      >
        <van-icon name="arrow" />
        {{item.name}}
      </a>
    </div>
    <div class="body_com">
      <scroller class="selector-left">
        <van-cell-group style="margin-top:0;">
          <van-cell
            :class="{on: item.id === selectedLeftDepartId}"
            v-for="(item,index) in departData"
            :key="index"
            :title="item.name"
            v-show="item.pid == 0"
            class="employee_cell"
            @click="onselectedLeftDepart(item)"
          />
        </van-cell-group>
      </scroller>

      <scroller ref="scroller_com" class="selector-right" style="left:2.2rem; width:5.4rem;">
        <van-cell
          :is-link="selectedRightDepartId !== item.id"
          v-for="(item, i) in rightDepartData"
          :key="i"
          :title="item.name"
          class="employee_cell"
          :class="{on: selectedRightDepartId === item.id}"
          @click="onselectedRightDepart(item)"
        >
          <template slot="right-icon">
            <van-icon name="success" v-if="selectedRightDepartId === item.id" />
          </template>
        </van-cell>
      </scroller>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { ActionSheet, Popup, Checkbox } from 'vant';
Vue.use(Popup);
Vue.use(Checkbox);
Vue.use(ActionSheet);
import { Search } from 'vant';

Vue.use(Search);
import request from '@/utils/request'
export default {
  props: {
    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
    },
    close_clear_data: {
      type: Boolean,
      default: true
    },
    max: {
      type: Number,
      default: 0
    }
  },
  name: "EmployeeSelector1",
  data() {
    let selected = JSON.parse(JSON.stringify(this.selected))
    return {
      departData: null,
      rightDepartData: null,
      selectedDepartStack: null,
      selectedLeftDepartId: null,
      selectedLeftDepartItem: null,
      selectedRightDepartId: null,
      selectedRightDepartItem: null,
    }
  },
  beforeDestroy() {
    if (this.append_body) {
      document.body.removeChild(this.$el)
    }
  },
  methods: {
    backToIndex(index) {
      if (index < 0) {
        this.restoreDefaults()
      } else if (index === 0) {
        this.onselectedLeftDepart(this.selectedDepartStack[0])
      } else {
        const departItem = this.selectedDepartStack[index]
        this.selectedRightDepartId = departItem.id
        this.selectedRightDepartItem = departItem
        this.rightDepartData = [].concat(departItem, this.departData.filter(o => o.pid === departItem.id))
      }
    },
    onselectedLeftDepart(departItem) {
      if (departItem.id === this.selectedLeftDepartId) {
        return;
      }
      this.selectedLeftDepartId = departItem.id
      this.selectedLeftDepartItem = departItem
      this.selectedRightDepartId = departItem.id
      this.selectedRightDepartItem = departItem
      this.selectedDepartStack = [departItem]
      this.rightDepartData = [].concat(departItem, this.departData.filter(o => o.pid === departItem.id))
    },
    onselectedRightDepart(departItem) {
      if (departItem.id === this.selectedRightDepartId) {
        return;
      }
      this.selectedRightDepartId = departItem.id
      this.selectedRightDepartItem = departItem
      this.selectedDepartStack.push(departItem)
      this.rightDepartData = [].concat(departItem, this.departData.filter(o => o.pid === departItem.id))
    },
    getDepartData() {
      request('get','/api/department/index',{ pid: this.pid }).then((res) => {
        const result = res.data;
        if (result.code === 1) {
          const arr = [];
          const { list: items } = result.data;
          for (let key in items) {
            arr.push(items[key])
          }
          this.departData = arr
        }
      }).catch((e) => {

      }).finally(() => this.$toast.clear())
    },
    restoreDefaults() {
      this.selectedLeftDepartId = null
      this.selectedLeftDepartItem = null
      this.selectedRightDepartId = null
      this.selectedRightDepartItem = null
      this.selectedDepartStack = null
      this.rightDepartData = null
    }
  },
  mounted() {
    this.getDepartData();
  }
}
</script>

<style scoped lang="less">
.body_com {
  height: calc(100% - 0.8rem);
  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);
}

.dropdown-box {
  height: 6rem;
}
.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 {
  width: 5.4rem !important;
  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;
  }
}
</style>

