<template>
  <div class="my-assets-con flex-default">
    <list-header v-model="tabIndex" :tabList="tabList" @search="handleSearch" />
    <van-swipe
      ref="assetsSwipe"
      @change="swipeChange"
      class="assets-swipe"
      :show-indicators="false"
      :loop="false"
    >
      <van-swipe-item
        v-for="(item, index) of tabList"
        :key="`swipe-item-${index}`"
      >
        <scroll-item
          :ref="`scroll-item-${index}`"
          :i="index"
          :index="tabIndex"
          :tab="item"
          @modifyPrice="handleModifyPrice"
          :searchKey="searchKey"
        />
      </van-swipe-item>
    </van-swipe>

    <modify-price-popup
      v-model="showModifyPrice"
      @confirm="confirmModifyPrice"
    />
  </div>
</template>

<script>
import ListHeader from "./list-header.vue";
import ScrollItem from "./scroll-item.vue";
import ModifyPricePopup from "./modify-price-popup.vue";
import AssetsListItem from "./assets-list-item.vue";
import TransferListItem from "./transfer-list-item.vue";
export default {
  components: { ListHeader, ScrollItem, ModifyPricePopup },
  watch: {
    tabIndex(val) {
      this.$refs.assetsSwipe.swipeTo(val);
    },
  },
  data() {
    return {
      tabIndex: 0,
      tabList: [
        {
          name: "库存",
          val: 1,
          api: "postAssetSelect",
          com: AssetsListItem,
          listKey: "data",
          totalKey: "totalSize",
        },
        // {
        //   name: "转让",
        //   val: 2,
        //   api: "getTransferList",
        //   com: TransferListItem,
        //   listKey: "records",
        //   totalKey: "total",
        // },
      ],
      showModifyPrice: false,
      modifyPriceItem: {},
      searchKey: "",
    };
  },
  methods: {
    swipeChange(index) {
      this.tabIndex = index;
    },
    handleModifyPrice(item) {
      this.modifyPriceItem = item;
      this.showModifyPrice = true;
    },
    confirmModifyPrice(price) {
      this.$showLoading();
      this.$api({
        apiName: "updateTransferPrice",
        postData: {
          tranId: this.modifyPriceItem.tranId,
          price,
          updateTime: this.modifyPriceItem.updateTime,
        },
        success: (res) => {
          this.modifyPriceItem.price = +price;
          this.modifyPriceItem.updateTime = res;
          this.showModifyPrice = false;
        },
        compelte: this.$hideLoading,
      });
    },
    handleSearch(val) {
      this.searchKey = val;
      this.$nextTick(() => {
        this.$refs[`scroll-item-${this.tabIndex}`][0].downCallback();
      });
    },
  },
};
</script>
<style lang="less">
.my-assets-con {
  height: 100%;
  flex-direction: column;
  .assets-swipe {
    flex: 1;
    width: 100%;
  }
}
</style>