<template>
  <mescroll-vue
    class="transfer-market-con bg-grey"
    ref="mescrollRef"
    @init="mescrollInit"
    :down="downOptions"
    :up="upOptions"
  >
    <div class="search-header-con1">
      <div class="search-header1 flex-default">
        <m-icon icon="icon-search2" :size="16" />
        <input
          class="search-input"
          v-model="searchKey"
          placeholder="请输入商品名称"
          confirm-type="search"
          type="text"
          autocomplete="off"
          enterkeyhint="search"
          @keyup.enter="handleSearch"
        />
      </div>
    </div>
    <goods-classification :list="classificationList" />
    <waterfall
      :col="2"
      :data="list"
      :width="itemWidth"
      :gutterWidth="gutterWidth"
    >
      <template>
        <goods-item
          v-for="(item, index) of list"
          :key="`goods-item-${index}`"
          :data="item"
          :index="index"
        />
      </template>
    </waterfall>
  </mescroll-vue>
</template>

<script>
import GoodsClassification from "./goods-classification.vue";
import GoodsItem from "./goods-item.vue";
import { MescrollMixin } from "@/mixins";
export default {
  mixins: [MescrollMixin],
  components: { GoodsClassification, GoodsItem },
  computed: {
    itemWidth() {
      return 168 * (document.documentElement.clientWidth / 375);
    },
    gutterWidth() {
      return 7 * (document.documentElement.clientWidth / 375);
    },
  },
  data() {
    return {
      downOptions: {
        autoShowLoading: false,
        auto: true,
        callback: this.downCallback,
      },
      upOptions: {
        auto: false,
        callback: this.upCallback,
      },
      classificationList: [],
      list: [],
      searchKey: "",
    };
  },
  methods: {
    handleSearch() {
      this.mescroll.resetUpScroll();
    },
    requestData({ num, size }) {
      if (num == 1) {
        this.$showLoading();
        this.requestClassification();
      }
      this.$api({
        apiName: "getTransferMarketList",
        postData: {
          page: num,
          size,
          keyword: this.searchKey.trim(),
        },
        success: (res) => {
          if (num == 1) {
            this.list = res.records;
          } else {
            this.list = this.list.concat(res.records);
          }
          this.mescroll.endBySize(res.records.length, res.total);
        },
        complete: this.$hideLoading,
      });
    },
    requestClassification() {
      this.$api({
        apiName: "getCategory",
        postData: "",
        success: (res) => {
          this.classificationList = res;
        },
      });
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      this.requestData(page);
    },
  },
};
</script>

<style lang="less">
.transfer-market-con {
  height: 100vh;
  padding: 0 16px;
  overflow-y: auto;
  .empty-top {
    height: 10px;
  }
  .search-header-con1 {
    // position: sticky;
    padding-top: 10px;
  .search-header1 {
    margin-bottom: 10px;
    height: 30px;
    border: 1px solid @mall-primary-color;
    border-radius: 15px;
    padding: 0 14px;
    .search-input {
      font-size: 14px;
      margin-left: 5px;
      &::placeholder {
        color: #aeaeae;
      }
    }
  }
  }
  .vue-waterfall {
    overflow-y: hidden;
  }
}
</style>