<template>
  <div class="transfer-good-list-con">
    <m-nav-bar title="优品捡漏" background="transparent" light />
    <m-tabs v-model="tabIndex" :tabs="tabList" background="transparent" />
    <van-swipe
      class="list-swipe"
      ref="goodSwipe"
      @change="swipeChange"
      :show-indicators="false"
      :loop="false"
    >
      <van-swipe-item
        v-for="(item, index) of tabList"
        :key="`swipe-item-${index}`"
      >
        <scroll-item :i="index" :index="tabIndex" :tab="item" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import ScrollItem from "./scroll-item.vue";
export default {
  components: { ScrollItem },
  data() {
    return {
      tabIndex: 0,
      tabList: [
        { name: "全部" },
        { name: "箱包配饰" },
        { name: "鞋服" },
        { name: "数码" },
        { name: "母婴" },
        { name: "个护美妆" },
      ],
    };
  },
  watch: {
    tabIndex(val) {
      this.$refs.goodSwipe.swipeTo(val);
    },
  },
  methods: {
    swipeChange(index) {
      this.tabIndex = index;
    },
  },
};
</script>

<style lang="less">
.transfer-good-list-con {
  background: url(~@/assets/img/transfer-good-list-bg.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #f5f7fb;
  display: flex;
  flex-direction: column;
  height: 100%;
  > .m-tabs {
    border-bottom: none;
    margin-top: 10px;
    .van-tab__text {
      color: rgba(255, 255, 255, 0.8);
    }
    .van-tab--active .van-tab__text {
      color: #ffffff;
    }
    .van-tabs__line {
      background: #ffffff;
    }
  }
  > .list-swipe {
    flex: 1;
  }
}
</style>