<template>
  <div style="height: 100%;">
    <ClassicTabs ref="tabs" v-model="selectLabel" :data="tabLabels" :filterId.sync="selectFilterId"></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>

          <ScrollView class="scroll-view1" ref="notuse" :data="getNotUseList" :options="scrollOptions" v-if="getNotUseList.length" :reach-bottom="reachBottom">
            <CouponItem :item="item" v-for="(item, index) in getNotUseList" :key="index + '' + item.coupon_id"></CouponItem>
          </ScrollView>
          <Empty v-else></Empty>
        </SlideItem>

        <SlideItem style="background-color: #f0f0f0;">
          <ScrollView class="scroll-view2" ref="use" :data="getUseList" :options="scrollOptions" v-if="getUseList.length" :reach-bottom="reachBottom">
            <CouponItem :item="item" v-for="(item, index) in getUseList" :key="index + '' + item.coupon_id"></CouponItem>
          </ScrollView>
          <Empty v-else></Empty>
        </SlideItem>

        <SlideItem  style="background-color: #f0f0f0;">
          <ScrollView class="scroll-view2" ref="overtime" :data="getOvertimeList" :options="scrollOptions" v-if="getOvertimeList.length" :reach-bottom="reachBottom">
            <CouponItem :item="item" v-for="(item, index) in getOvertimeList" :key="index + '' + item.coupon_id"></CouponItem>
          </ScrollView>
          <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 ScrollView from '../components/scroll-view';

import {Slide} from 'cube-ui';

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

export default {
  name: 'YohoCouponListPage',
  data() {
    return {
      selectIndex: 0,
      selectLabel: '未使用',
      selectType: TYPE.notuse,
      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,
        pullUpLoad: {
          threshold: 0,
          txt: {
            more: '加载更多',
            noMore: '以上是最新的内容'
          }
        },
        bounce: true
      },
      slideOptions: {
        listenScroll: true,
        probeType: 3,
        click: false,
        directionLockThreshold: 0
      },
    };
  },
  computed: {
    ...mapState(['filterList']),
    ...mapGetters(['getNotUseList', 'getUseList', 'getOvertimeList']),
    initialIndex() {
      let index = 0;

      index = this.tabLabels.findIndex(i => i.label === this.selectLabel);
      return index;
    }
  },
  mounted() {
    this.fetchYohoNum();

    this.$store.dispatch('coupon/yoho/fetchYohoList', {
      type: TYPE.use,
      refresh: true
    });

    this.$store.dispatch('coupon/yoho/fetchYohoList', {
      type: TYPE.overtime,
      refresh: true
    });
  },
  methods: {
    ...mapActions(['getCouponCode', 'fetchYohoList', 'fetchYohoNum']),
    changePage(current) {
      this.selectIndex = current;
      this.selectLabel = this.tabLabels[current].label;
      this.selectType = this.tabLabels[current].type;
    },
    scroll() {

    },
    onSubmitCode() {
      this.getCouponCode({code: this.inputCouponCode}).then(result => {
        if (result.code === 200) {
          this.$createToast({
            txt: result.message,
            type: 'txt',
            mask: true,
            time: 1000
          }).show();
          this.reachBottom(true);
        } else {
          this.$createToast({
            txt: result.message,
            type: 'txt',
            mask: true,
            time: 1000
          }).show();
        }
      });
    },
    reachBottom(refresh = false) {
      this.fetchYohoList({
        type: this.selectType,
        filter: this.tabLabels[this.selectIndex].selectFilterId,
        refresh
      }).then((result) => {
        if (!result) {
          this.$refs[this.selectType] && this.$refs[this.selectType].forceUpdate();
        }
      });
    }
  },
  watch: {
    selectFilterId(val) {
      this.tabLabels[0].selectFilterId = val;
      this.$refs.notuse && this.$refs.notuse.scrollTo(0, 0);
      this.reachBottom(true);
    }
  },
  components: {
    FilterBar,
    ClassicTabs: Tabs.ClassicTabs,
    ExchangeBox,
    Slide,
    SlideItem: Slide.Item,
    CouponItem,
    Empty,
    ScrollView
  }
};
</script>

<style lang="scss" scoped>

  .page-wrapper {
    height: calc(100% - 90px);
  }

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

  .scroll-view1 {
    height: calc(100% - 270px);
  }

  .scroll-view2 {
    height: calc(100% - 180px);
  }
</style>