<template>
  <div class="coupon-page">
    <ClassicTabs ref="tabs" v-model="selectLabel" :data="tabLabels" :filterId.sync="selectFilterId"></ClassicTabs>
    <Slide
      class="slide-box"
      ref="slide"
      :loop="false"
      :auto-play="false"
      :show-dots="false"
      :initial-index="initialIndex"
      :options="slideOptions"
      @scroll="scroll"
      @change="changePage"
    >
      <SlideItem class="slide-item">
        <ExchangeBox class="" v-model="inputCouponCode" @click="onSubmitCode"></ExchangeBox>
        <Loading class="loading" v-if="showLoading"></Loading>
        <template v-else>
          <ScrollView class="scroll-view" 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>
        </template>
      </SlideItem>

      <SlideItem class="slide-item">
        <ScrollView class="scroll-view" 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  class="slide-item">
        <ScrollView class="scroll-view" 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>
</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, Loading} 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: '',
      showLoading: true,
      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() {
    Promise.all([
      this.fetchYohoNum(),
      this.$store.dispatch('coupon/yoho/fetchYohoList', {
        type: TYPE.notuse,
        refresh: true
      }),
      this.$store.dispatch('coupon/yoho/fetchYohoList', {
        type: TYPE.use,
        refresh: true
      }),
      this.$store.dispatch('coupon/yoho/fetchYohoList', {
        type: TYPE.overtime,
        refresh: true
      })
    ]).then(() => {
      this.showLoading = false;
    }).catch(() => {
      this.showLoading = false;
    });
  },
  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,
    Loading
  }
};
</script>

<style lang="scss" scoped>

.coupon-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.slide-box {
  flex: 1;

  /deep/ .cube-slide-group {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }

  /deep/ .cube-scroll-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
}

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

.slide-item {
  display: flex;
  flex-direction: column;

  .scroll-view {
    flex: 1;
  }
}

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

.loading {
  margin: 40px auto;
}
</style>