<template>
  <LayoutApp>
    <!--<div class="mask"></div>-->
    <Tabs>
      <template slot="panes">
        <div class="head"></div>
        <TabPane label="有货优惠券">

          <TabBar
            v-model="selectLabel"
            show-slider
            :data="tabLabels"
            ref="tabNav"
          >

          </TabBar>

          <div class="tab-side-container">
            <Slide
              ref="slide"
              :loop="false"
              :auto-play="false"
              :show-dots="false"
              :initial-index="initialIndex"
              :options="slideOptions"
              @scroll="scroll"
              @change="changePage"
            >
              <SlideItem>
                <!--<FilterBar v-if="showFilter" :list="filterList"></FilterBar>-->
                <!--<div class="head"></div>-->
                <Scroll :data="yohoList.notuse" :options="scrollOptions">
                  <div class="coupon-wrapper" v-for="(item, index) in yohoList.notuse" :key="index">
                    <div class="coupon-item">{{item.coupon_name}}</div>
                  </div>

                </Scroll>
              </SlideItem>

              <SlideItem>
                <Scroll :data="yohoList.use" :options="scrollOptions">
                  <div class="coupon-wrapper" v-for="(item, index) in yohoList.use" :key="index">
                    <div class="coupon-item">{{item.coupon_name}}</div>
                  </div>

                </Scroll>
              </SlideItem>

              <SlideItem>
                <Scroll :data="yohoList.overtime" :options="scrollOptions">
                  <div class="coupon-wrapper" v-for="(item, index) in yohoList.overtime" :key="index">
                    <div class="coupon-item">{{item.coupon_name}}</div>
                  </div>
                </Scroll>
              </SlideItem>
            </Slide>
          </div>
        </TabPane>

        <TabPane label="UFO优惠券">
          <div class="coupon-wrapper">
            <div class="coupon-item">huangtao2;</div>
          </div>
        </TabPane>

      </template>
    </Tabs>
  </LayoutApp>
</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 {TabBar, Slide, Scroll} from 'cube-ui';

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

export default {
  name: 'YohoCouponListPage',
  computed: {
    ...mapState(['yohoList', 'filterList', 'showFilter']),
    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
        }, {
          label: '已使用',
          type: type.use
        }, {
          label: '已失效',
          type: type.overtime
        }
      ],
      scrollOptions: {
        directionLockThreshold: 0
      },
      slideOptions: {
        listenScroll: true,
        probeType: 3,
        directionLockThreshold: 0
      }
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    tabCls(item) {
      return ['filter-btn-box'];
    },
    scroll(pos) {
      // const x = Math.abs(pos.x)
      // const tabItemWidth = this.$refs.tabNav.$el.clientWidth
      // const slideScrollerWidth = this.$refs.slide.slide.scrollerWidth
      // const deltaX = x / slideScrollerWidth * tabItemWidth
      // this.$refs.tabNav.setSliderTransform(deltaX);
    },

    changePage(current) {
      this.selectLabel = this.tabLabels[current].label;
      this.selectType = this.tabLabels[current].type;

      console.log(this.$store);
      return this.$store.dispatch('coupon/yoho/fetchYohoList', {
        type: this.selectType,
        filter: this.selectFilter,
        limit: 20,
        page: 1
      });
    }
  },
  components: {
    Tabs,
    TabPane: Tabs.Pane,
    FilterBar,
    ClassicTabs: Tabs.ClassicTabs,
    ExchangeBox,
    TabBar,
    Slide,
    SlideItem: Slide,
    Scroll
  }
};
</script>

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

  .coupon-wrapper {
    height: 200px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    background: #f0f0f0;
    box-sizing: content-box;
  }

  .coupon-item {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 10px;
  }

  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
  }

  .list-wrapper {
    overflow: hidden;

    li {
      padding: 15px 10px;
      background-color: white;
      border-radius: 10px;
    }
  }

  .tab-slide-container {
    position: fixed;
    top: 74px;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>