<template>
  <div class="dept-select-drodown__wrap">
    <div class="dept_path">
      <a
        v-for="(item, i) in selectedRuleStack"
        :key="i"
        href="javascript:void(0);"
        @click="backToIndex(i)"
      >
        <van-icon name="arrow" v-show="i > 0"/>
        {{item.name}}
      </a>
    </div>
    <div class="select-dropdown__content" :style="contentStyle">
      <scroller class="selector-left">
        <van-cell-group style="margin-top:0;">
          <van-cell
            :class="{on: item.id === selectedLeftRuleId}"
            v-for="(item,index) in deptData"
            :key="index"
            :title="item.name"
            v-show="item.pid == 0"
            class="employee_cell"
            @click="onselectedLeftDepart(item)"
          />
          <ListEmptyDataCell :data="deptData" :loading="loading"/>
        </van-cell-group>
      </scroller>

      <scroller ref="scroller_com" class="selector-right" style="left:2.2rem; width:5.4rem;">
        <van-cell
          :is-link="selectedRightRuleId !== item.id"
          v-for="(item, i) in rightDepartData"
          :key="i"
          :title="item.name"
          class="employee_cell"
          :class="{on: selectedRightRuleId === item.id}"
          @click="onselectedRightDepart(item)"
        >
          <template slot="right-icon">
            <van-icon name="success" v-if="selectedRightRuleId === 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="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: 'RuleSelectorDropdown',
    data () {
      return {
        loading: false,
        deptData: null,
        rightDepartData: null,
        selectedRuleStack: null,
        selectedLeftRuleId: null,
        selectedLeftRuleItem: null,
        selectedRightRuleId: null,
        selectedRightRuleItem: null,
      }
    },
    components: {ListEmptyDataCell},
    computed: {
      contentStyle () {
        return {height: this.contentHeight}
      }
    },
    methods: {
      backToIndex (index) {
        if (index < 0) {
          this.restoreDefaults()
          this.$emit('onchange', 0)
        } else if (index === 0) {
          this.onselectedLeftDepart(this.selectedRuleStack[0])
        } else {
          const ruleItem = this.selectedRuleStack[index]
          this.selectedRightRuleId = ruleItem.id
          this.selectedRightRuleItem = ruleItem
          this.rightDepartData = [].concat(ruleItem, this.deptData.filter(o => o.pid === ruleItem.id))
          this.$emit('onchange', ruleItem)
        }
      },
      onselectedLeftDepart (ruleItem) {
        this.selectedLeftRuleId = ruleItem.id
        this.selectedLeftRuleItem = ruleItem
        this.selectedRightRuleId = ruleItem.id
        this.selectedRightRuleItem = ruleItem
        this.selectedRuleStack = [ruleItem]
        this.rightDepartData = [].concat(ruleItem, this.deptData.filter(o => o.pid === ruleItem.id))
        this.$emit('onchange', ruleItem)
      },
      onselectedRightDepart (ruleItem) {
        if (ruleItem.id === this.selectedRightRuleId) {
          return
        }
        this.selectedRightRuleId = ruleItem.id
        this.selectedRightRuleItem = ruleItem
        this.selectedRuleStack.push(ruleItem)
        this.rightDepartData = [].concat(ruleItem, this.deptData.filter(o => o.pid === ruleItem.id))
        this.$emit('onchange', ruleItem)
      },
      onResetDepart () {
        this.backToIndex(-1)
      },
      onConfirmDepart () {
        this.$emit('onConfirm', this.selectedRightRuleItem)
      },
      getDepartData () {
        this.loading = true
        request('get','/api/integral/rule/trees').then((res) => {
          const result = res.data
          if (result.code === 1) {
            const arr = []
            const {rule_tree: items} = result.data
            for (let key in items) {
              arr.push(items[key])
            }
            this.deptData = arr
          }
        }).catch((e) => {

        }).finally(() => {
          this.$toast.clear()
          this.loading = false
        })
      },
      restoreDefaults () {
        this.selectedLeftRuleId = null
        this.selectedLeftRuleItem = null
        this.selectedRightRuleId = null
        this.selectedRightRuleItem = null
        this.selectedRuleStack = 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;
    }
  }
</style>

