<template>
  <LayoutApp :title="title">
    <DateFilter class="date-filter-wrapper" v-show="showFilter" @on-change="dateHandler"></DateFilter>
    <DetailList ref="list" @on-date-pick="dateHandler"></DetailList>
  </LayoutApp>
</template>

<script>
import LayoutApp from '../components/layout/layout-app';
import DetailList from './detailList/detail-list';
import DateFilter from './detailList/components/date-filter';
import {Loading} from 'cube-ui';

import {createNamespacedHelpers} from 'vuex';

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

export default {
  name: 'DetailListPage',
  components: {
    LayoutApp,
    DetailList,
    DateFilter,
    Loading
  },
  data() {
    return {
      title: '全部佣金'
    };
  },
  async mounted() {
    this.setDate({value: [
      new Date().getFullYear(),
      new Date().getMonth() + 1
    ]});

    this.setTab({value: 0});

    const result = await this.fetchOrderDetailList();

    this.$refs.list.forceUpdate(result);
  },
  computed: {
    ...mapState(['showFilter', 'date', 'recordDetailList'])
  },
  methods: {
    ...mapMutations({
      setDate: 'SET_DATE',
      setTab: 'SET_TAB'
    }),
    ...mapActions(['fetchOrderDetailList']),
    dateHandler() {
      this.showTimePicker();
    },
    showTimePicker() {
      if (!this.timePicker) {
        this.timePicker = this.$createDatePicker({
          title: '',
          min: [2019, 4],
          max: new Date(),
          value: this.date,
          startColumn: 'year',
          columnCount: 2,
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle
        });
      }

      this.timePicker.show();
    },
    async selectHandle(date, selectedVal) {
      this.setDate({value: [...selectedVal]});

      this.$refs.list.forceUpdate();
      const result = await this.fetchOrderDetailList();

      this.$refs.list.forceUpdate(result);
    },
    cancelHandle() {
    }
  },
};
</script>

<style lang="scss" scoped>
  /deep/ .layout-context {
    background-color: #fefefe !important;
  }

  .date-filter-wrapper {
    position: absolute;
    width: 100%;
    top: -2px;
    background: #f5f5f5;
    padding-left: 40px;
    z-index: 2;
  }

</style>