<template>
    <div style="height: 100%;">
          <div class="head"></div>
          <ClassicTabs ref="tabs" v-model="selectLabel" :data="tabLabels" @on-filter-change="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 v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>

                <div class="filter-wrapper" v-if="showFilter">
                  <div class="filter-mask" @click="onMaskClick"></div>
                  <FilterBar :list="filterList" v-model="selectFilterId" 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} = 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 {Slide, Scroll} from 'cube-ui';

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

export default {
  name: 'YohoCouponListPage',
  asyncData({store}) {
    return store.dispatch('coupon/yoho/fetchYohoList', {
      type: TYPE.notuse,
      filter: 0,
      limit: 20,
      page: 1
    });
  },
  data() {
    return {
      selectLabel: '未使用',
      showFilter: false,
      selectFilterId: 0,
      inputCouponCode: '',
      tabLabels: [
        {
          label: '未使用',
          type: TYPE.notuse,
          filter: true,
          selectFilterId: 0,
        }, {
          label: '已使用',
          type: TYPE.use,
          filter: false,
          selectFilterId: 0,
        }, {
          label: '已失效',
          type: TYPE.overtime,
          filter: false,
          selectFilterId: 0,
        }
      ],
      scrollOptions: {
        directionLockThreshold: 0,
      },
      slideOptions: {
        listenScroll: true,
        click: false,
        probeType: 3,
        directionLockThreshold: 0
      },
    };
  },
  computed: {
    ...mapState(['yohoList', 'filterList']),
    initialIndex() {
      let index = 0;

      index = this.tabLabels.findIndex(i => i.label === this.selectLabel);
      return index;
    }
  },
  created() {
  },
  mounted() {
    this.getNum();
  },
  methods: {
    ...mapActions(['getCouponCode']),
    changePage(current) {
      const tab = this.tabLabels[current];

      this.selectLabel = this.tabLabels[current].label;

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

    },
    getNum() {
      return this.$store.dispatch('coupon/yoho/fetchYohoNum', {});
    },
    onFilterChange(show) {
      this.showFilter = show;
    },
    onMaskClick() {
      this.showFilter = false;
      this.$refs.tabs.showFilter = false;
    },
    onSubmitCode() {
      this.getCouponCode({code: this.inputCouponCode}).then(result => {
        if (result.code === 200) {
          this.$createToast({
            txt: result.message,
            type: 'correct'
          });
        } else {
          this.$createToast({
            txt: result.message,
            type: 'error'
          });
        }
      });
    }
  },
  watch: {
    selectFilterId(val) {
      this.tabLabels[0].selectFilterId = val;
      this.onMaskClick();
      return this.changePage(0);
    }
  },
  components: {
    FilterBar,
    ClassicTabs: Tabs.ClassicTabs,
    ExchangeBox,
    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>