<template>
  <div class="address-management-con bg-grey">
    <m-tabs v-model="tabIndex" :tabs="tabList" class="tab-list" />
    <van-swipe
      ref="addrSwipe"
      @change="swiperChange"
      class="addr-swipe"
      :show-indicators="false"
      :loop="false"
      :touchable="false"
    >
      <van-swipe-item
        v-for="(item, i) of tabList"
        :key="`swiper-item-${i}-${item.value}`"
        :ref="`swiper-item-${item.value}`"
      >
        <scroll-item :i="i" :tab="item" :index="tabIndex" />
      </van-swipe-item>
    </van-swipe>
    <div class="address-management-footer">
      <van-button type="primary" block @click="addAddress">添加地址</van-button>
    </div>
  </div>
</template>

<script>
import ScrollItem from "./scroll-item.vue";
import ExpressListItem from "./express-list-item.vue";
import CoinListItem from "./coin-list-item.vue";
export default {
  components: { ScrollItem },
  data() {
    return {
      tabIndex: 0,
      tabList: [
        {
          name: "提货地址",
          addPageName: "add-express-addr",
          itemCom: ExpressListItem,
          listApi: "getAddrList",
          delApi: "delAddr"
        },
        // {
        //   name: "提币地址",
        //   addPageName: "add-coin-addr",
        //   itemCom: CoinListItem,
        //   listApi: "getTranAddr",
        //   delApi: ""
        // },
      ],
    };
  },
  watch: {
    tabIndex(val) {
      this.$refs.addrSwipe.swipeTo(val);
    },
  },
  methods: {
    swiperChange(index) {
      this.tabIndex = index;
    },
    addAddress() {
      this.$router.push({ name: this.tabList[this.tabIndex].addPageName });
    },
  },
};
</script>

<style lang="less">
.address-management-con {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .m-tabs-con {
    flex-shrink: 0;
  }
  .addr-swipe {
    height: 100%;
    flex-shrink: 1;
  }
  .mescroll-uni-warp {
    ::v-deep.mescroll-uni-fixed {
      top: 0 !important;
    }
    ::v-deep.mescroll-upwarp {
      min-height: 74px;
    }
  }
}
</style>
