<template>
  <div class="container">
    <i-tabs :current="tabActive" @tabChange="handleChange" color="#ed3f14">
      <i-tab key="0" title="保养套餐" />
      <i-tab key="1" title="洗美套餐" />
      <i-tab key="2" title="系统养护" />
    </i-tabs>
    <scroll-view scroll-y class="bundle-content" v-show="tabActive==='0'">
      <div class="bundle-card" v-for="item in list1" :key="item.id">
        <b-card :options="item" />
      </div>
      <no-data name="暂无套餐" :options="list1" />
    </scroll-view>
    <scroll-view scroll-y class="bundle-content" v-show="tabActive==='1'">
      <div class="bundle-card" v-for="item in list2" :key="item.id">
        <b-card :options="item" />
      </div>
      <no-data name="暂无套餐" :options="list2" />
    </scroll-view>
    <scroll-view scroll-y class="bundle-content" v-show="tabActive==='2'">
      <div class="bundle-card" v-for="item in list3" :key="item.id">
        <b-card :options="item" />
      </div>
      <no-data name="暂无套餐" :options="list3" />
    </scroll-view>

  </div>
</template>

<script>
import BundleCard from '@/components/BundleCard';
import NoData from '@/components/NoData';
import { bundleList } from '@/api/bundle';
import storage from '@/utils/storage.js'
export default {
  components: { 'b-card': BundleCard, 'no-data': NoData },
  name: 'bundle1',

  data() {
    return {
      animated: true,
      swipeable: true,
      tabActive: '0',
      list1: null,
      list2: null,
      list3: null
    };
  },
  methods: {
    handleChange(e) {
      this.tabActive = e.target.key;
    },
    setPageData(data) {
      this.list2 = data.filter(item => item.clsId === '1');
      this.list1 = data.filter(item => item.clsId === '2');
      this.list3 = data.filter(item => item.clsId === '3');
    }
  },

  onShow(options) {
      wx.showLoading({
        mask: true,
        title: '加载中'
      });
      const _this = this;
      let bundleListData = storage.get('bundleListData')
      if(bundleListData){
        _this.setPageData(bundleListData)
        wx.hideLoading();
      }else{
        bundleList({}).then(res => {
          if (res.status === '200') {
            _this.setPageData(res.data)
            // 缓存
            storage.put('bundleListData', res.data, 3)
          } else {
            wx.showToast({
              title: res.message,
              icon: 'none',
              duration: 2500
            });
          }
          wx.hideLoading();
        });
      }
  },
  onLoad(options) {
    let { tab } = options;
    tab += '';
    if (tab === '0' || tab === '1' || tab === '2') {
      this.tabActive = tab;
    } else {
      this.tabActive = '0';
    }
  }
};
</script>

<style lang="stylus">
.bundle-content {
  height: calc(100vh - 100rpx);
  overflow: auto;
  box-sizing: border-box;
  background-color: #f8f8f9;

  .bundle-card {
    padding: 15rpx 40rpx;
    background-color: #fff;
  }

  .bundle-card + .bundle-card {
    margin-top: 15rpx;
  }
}
</style>
