<template>
  <Scroll ref="scroll" class="detail-list-wrapper" :data="recordDetailList" :options="options" :scrollEvents="['scroll']"
          @scroll="scrollHandler"
          @pulling-up="onPullingUp"
  >
    <TabBar class="tab-bar-wrapper" :data="tabs"
            v-model="selectedTabs"
            @click="clickHandler"
    >
    </TabBar>

    <DateFilter class="date-filter-wrapper" @on-change="changeHandler"></DateFilter>

    <template v-if="fetchRecordDetailListRequest && pager.page === 0">
      <div class="loading-wrapper">
        <Loading class="loading"></Loading>
      </div>
    </template>

    <template v-else>
      <div v-if="recordDetailList.length === 0" class="no-data">当前月份无数据</div>
      <RecordList v-else class="record-list-wrapper" :data="recordDetailList"></RecordList>
    </template>

  </Scroll>
</template>

<script>
import TabBar from './components/tab-bar';
import DateFilter from './components/date-filter';
import RecordList from './components/record-list';
import {Scroll, Loading} from 'cube-ui';
import {throttle} from 'lodash';

import {createNamespacedHelpers} from 'vuex';
const {mapState, mapMutations, mapActions} = createNamespacedHelpers('invite/invite');

export default {
  name: 'DetailList',
  components: {
    TabBar,
    DateFilter,
    RecordList,
    Scroll,
    Loading
  },
  data() {
    return {
      title: '全部佣金',
      selectedTabs: 0,
      tabs: [{
        label: '全部',
        value: 0,
      }, {
        label: '待打款',
        value: 1,
      }, {
        label: '已打款',
        value: 2,
      }],
      options: {
        bounce: false,
        pullUpLoad: {
          txt: {
            more: '加载更多',
            noMore: '没有更多了'
          }
        },
        probeType: 2
      }
    };
  },
  mounted() {
    this.scrollEvent = throttle(this.onDounceScroll.bind(this), 200);
  },
  methods: {
    ...mapMutations({
      showFilter: 'SET_FILTER_TOP',
      setTab: 'SET_TAB'
    }),
    ...mapActions(['fetchOrderDetailList']),
    async clickHandler(p) {
      this.setTab({value: p});

      this.forceUpdate();
      const result = await this.fetchOrderDetailList();

      this.forceUpdate(result);
    },
    onDounceScroll(p) {
      if (Math.abs(p.y) >= this.filterTop) {
        this.showFilter({show: true});
      } else {
        this.showFilter({show: false});
      }
    },
    scrollHandler(p) {
      this.scrollEvent(p);
    },
    changeHandler(p) {
      this.$emit('on-date-pick', p);

      this.forceUpdate();
    },
    async onPullingUp() {
      const result = await this.fetchOrderDetailList();

      this.forceUpdate(result);
    },
    forceUpdate(force = true) {
      this.$refs.scroll.forceUpdate(force);
    }
  },
  computed: {
    ...mapState(['filterTop', 'recordDetailList', 'fetchRecordDetailListRequest', 'pager'])
  }
};
</script>

<style lang="scss" scoped>
  .detail-list-wrapper {
    overflow: scroll;
    height: 100%;
  }

  .tab-bar-wrapper {
    width: 450px;
    margin-left: 40px;
  }

  .date-filter-wrapper {
    top: -2px;
    background: #f5f5f5;
    padding-left: 40px;
  }

  .record-list-wrapper {
    padding: 0 40px;
  }

  .no-data {
    margin-top: 270px;
    font-size: 24px;
    width: 100%;
    text-align: center;
  }

  .loading-wrapper {
    margin-top: 40px;
    text-align: center;
  }

  .loading {
    display: inline-block;
    margin: 0 auto;
  }
</style>