<template>
    <div style="height: 100%">
          <div class="head"></div>
          <ClassicTabs v-model="selectLabel" :data="tabLabels" @filter="onFilterChange"></ClassicTabs>

          <div class="tab-slide-container">
            <Slide
              ref="slide"
              :loop="false"
              :auto-play="false"
              :show-dots="false"
              :initial-index="initialIndex"
              :options="slideOptions"
              @scroll="scroll"
              @change="changePage"
            >
              <SlideItem style="background-color: #f0f0f0;">
                <ExchangeBox></ExchangeBox>

                <div class="filter-wrapper" v-if="show">
                  <div class="filter-mask"></div>
                  <FilterBar :list="filterList" class="filter"></FilterBar>
                </div>

                <div class="head"></div>

                <Scroll :data="yohoList.notuse" :options="scrollOptions" v-if="yohoList.notuse.length">
                  <CouponItem :item="item" v-for="(item, index) in yohoList.notuse" :key ="index"></CouponItem>
                </Scroll>
                <Empty v-else></Empty>
              </SlideItem>

              <SlideItem style="background-color: #f0f0f0;">
                <Scroll :data="yohoList.use" :options="scrollOptions" v-if="yohoList.use.length">
                  <CouponItem :item="item" v-for="(item, index) in yohoList.use" :key ="index" v-if="yohoList.use.length"></CouponItem>
                </Scroll>
                <Empty v-else></Empty>
              </SlideItem>

              <SlideItem style="background-color: #f0f0f0;">
                <Scroll :data="yohoList.overtime" :options="scrollOptions" v-if="yohoList.overtime.length">
                  <CouponItem :item="item" v-for="(item, index) in yohoList.overtime" :key ="index" v-if="yohoList.overtime.length"></CouponItem>
                </Scroll>
                <Empty v-else></Empty>
              </SlideItem>
            </Slide>
          </div>
    </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex';

const {mapState, mapActions, mapGetters} = createNamespacedHelpers('coupon/yoho');

import Tabs from '../components/tabs';
import FilterBar from '../components/filter-bar';
import ExchangeBox from '../components/exchange-box';
import CouponItem from '../components/coupon-item';
import Empty from '../components/empty';

import {TabBar, Slide, Scroll} from 'cube-ui';

const TYPE = {notuse: 'notuse', use: 'use', overtime: 'overtime'};

export default {
  name: 'YohoCouponListPage',
  computed: {
    ...mapState(['yohoList', 'filterList', 'showFilter']),
    ...mapGetters(['getNotUseNum', 'getUseNum', 'getOvertime']),
    initialIndex() {
      let index = 0;

      index = this.tabLabels.findIndex(i => i.label === this.selectLabel);
      return index;
    }
  },
  asyncData({store, router}) {
    return store.dispatch('coupon/yoho/fetchYohoList', {
      type: TYPE.notuse,
      filter: 0,
      limit: 20,
      page: 1
    });
  },
  data() {
    return {
      selectLabel: '未使用',
      selectType: TYPE.notuse,
      selectFilter: 0,
      tabLabels: [
        {
          label: '未使用',
          type: TYPE.notuse,
          filter: true
        }, {
          label: '已使用',
          type: TYPE.use,
          filter: false
        }, {
          label: '已失效',
          type: TYPE.overtime,
          filter: false
        }
      ],
      scrollOptions: {
        directionLockThreshold: 0,
        stopPropagation: true
      },
      slideOptions: {
        listenScroll: true,
        probeType: 3,
        directionLockThreshold: 0
      },
      show: false
    };
  },
  created() {
  },
  mounted() {
    this.getNum();
  },
  methods: {
    changePage(current) {
      this.selectLabel = this.tabLabels[current].label;
      this.selectType = this.tabLabels[current].type;
      console.log(current, 'index', this.selectType, this.selectLabel);

      return this.$store.dispatch('coupon/yoho/fetchYohoList', {
        type: this.selectType,
        filter: this.selectFilter,
        limit: 20,
        page: 1
      });
    },
    scroll() {

    },
    getNum() {
      return this.$store.dispatch('coupon/yoho/fetchYohoNum', {});
    },

    onFilterChange(show) {
      this.show = show;
    }
  },
  components: {
    Tabs,
    TabPane: Tabs.Pane,
    FilterBar,
    ClassicTabs: Tabs.ClassicTabs,
    ExchangeBox,
    TabBar,
    Tab: TabBar.Tab,
    Slide,
    SlideItem: Slide.Item,
    Scroll,
    CouponItem,
    Empty
  }
};
</script>

<style lang="scss" scoped>
  .head {
    height: 90px;
  }

  .tab-slide-container {
    height: 100%;
  }

  .cube-scroll-wrapper {
    padding-top: 20px;
  }

  .filter-wrapper {
    width: calc(100% / 3);
    height: 100%;
    position: fixed;
    z-index: 4;
  }

  .filter {
    position: absolute;
    top: 0;
  }

  .filter-mask {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }
</style>