<template>
  <div class="dept-select-drodown__wrap">
    <div class="dept_path" style="white-space:nowrap;">
      <div class="dept_paths">
        <a href="javascript:void(0);" @click="backToIndex(-1)">全公司</a>
        <a v-for="(item, i) in selectedDeptStack" :key="i" href="javascript:void(0);" @click.stop="backToIndex(i)">
          <van-icon name="arrow" />
          <Wxopendata type="departmentName" :openid="item.name"></Wxopendata>
        </a>
      </div>
    </div>
    <div class="select-dropdown__content" :style="contentStyle">
      <scroller class="selector-left _v-container">
        <van-cell-group style="margin-top:0;">
          <van-cell :class="{on:item.id === selectedLeftDeptId }" v-for="(item, index) in deptData" :key="index"  class="employee_cell"  @click.stop="onselectedLeftDepart(item)">
            <template slot="title">
              <span class="custom-title"><Wxopendata type="departmentName" :openid="item.name"></Wxopendata></span>
            </template>
          </van-cell>
          <ListEmptyDataCell :data="deptData" :loading="loading" />
        </van-cell-group>
      </scroller>

      <scroller ref="scroller_com" class="selector-right _v-container" style="left:2.2rem; width:5.4rem;">
        <van-cell
          :is-link="selectedRightDeptId !== item.id"
          v-for="(item, i) in rightDepartData"
          :key="i"
          class="employee_cell"
          :class="{ on: selectedRightDeptId === item.id }"
          @click.stop="onselectedRightDepart(item)"
        >
          <template slot="title">
            <span class="custom-title"><Wxopendata type="departmentName" :openid="item.name"></Wxopendata></span>
          </template>
          <template slot="right-icon">
            <van-icon name="success" v-if="selectedRightDeptId === item.id" />
          </template>
        </van-cell>
      </scroller>
    </div>
    <div class="date-picker__toolbar">
      <van-button class="reset-button" block square color="rgba(38,162,255,0.2)" @click.stop="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 request from '@/utils/request';
import ListEmptyDataCell from './ListEmptyDataCell';
Vue.use(CellGroup).use(Cell).use(Icon).use(Loading);
export default {
  props: {
    contentHeight: { type: String, default: '5rem' },
    resetBtnText: { type: String, default: '恢复默认' }
  },
  name: 'DeptSelectorDropdown',
  data() {
    return {
      loading: false,
      deptData: [],
      deptDataAll: [],//缓存的数据
      rightDepartData: null,
      selectedDeptStack: null,
      selectedLeftDeptId: null,
      selectedLeftDeptItem: null,
      selectedRightDeptId: null,
      selectedRightDeptItem: null
    };
  },
  components: { ListEmptyDataCell },
  computed: {
    contentStyle() {
      return { height: this.contentHeight };
    }
  },
  methods: {
    backToIndex(index) {
      if (index < 0) {
        this.restoreDefaults();
        this.$emit('onchange', 0);
      } else {
        this.Paging_return(index); //传入当前点击下标
        const deptItem = this.selectedDeptStack[index];
        this.selectedRightDeptId = deptItem.id;
        this.selectedRightDeptItem = deptItem;
        let children=deptItem.children
        this.rightDepartData = [].concat(deptItem, children);
        this.$emit('onchange', deptItem);
      }
    },
    Paging_return(deptItem) {
      this.selectedDeptStack.splice(deptItem + 1, 1 * 1000);
    },
    // 选择部门
    onselectedLeftDepart(deptItem) {
      this.selectedLeftDeptId = deptItem.id;
      this.selectedLeftDeptItem = deptItem;
      this.selectedRightDeptId = deptItem.id;
      this.selectedRightDeptItem = deptItem;
      this.selectedDeptStack = [deptItem];
      let children=deptItem.children
      this.rightDepartData = [].concat(deptItem, children);
      this.$emit('onchange', deptItem);
    },
    onselectedRightDepart(deptItem) {
      if (deptItem.id === this.selectedRightDeptId) {
        return;
      }
      this.selectedRightDeptId = deptItem.id;
      this.selectedRightDeptItem = deptItem;
      this.selectedDeptStack.push(deptItem);
      let children=deptItem.children
      this.rightDepartData = [].concat(deptItem, children);
    },
    onResetDepart() {
      this.backToIndex(-1);
    },
    onConfirmDepart() {
      this.$emit('onConfirm', this.selectedRightDeptItem);
    },
    getDepartData() {
      this.loading = true;
      request('get', '/api/department/index','','v2').then(res => {
          let list=res.data.data.list;
          this.deptData = res.data.data.list;
      }).finally(() => {
          this.loading = false;
      });
    },
    restoreDefaults() {
      this.selectedLeftDeptId = null;
      this.selectedLeftDeptItem = null;
      this.selectedRightDeptId = null;
      this.selectedRightDeptItem = null;
      this.selectedDeptStack = null;
      this.rightDepartData = null;
    }
  },
  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 {
  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;
  }
}

.date-picker__toolbar {
  display: flex;
  flex-direction: row;

  & .reset-button {
    touch-action: none;
    color: #26a2ff !important;
    border: transparent !important;
  }
}
//滚动条
.dept_paths {
  overflow-x: scroll;
  height: 0.8rem;
  display: flex;
  align-items: center;
}
</style>
