<template>
  <div class="transfer-classification-list-con bg-grey">
    <list-header @filterChange="filterChange"/>
    <div class="list-scroll">
      <mescroll-vue @init="mescrollInit" :down="downOptions" :up="upOptions">
        <div class="list-con">
          <list-item
            v-for="(item, index) of list"
            :key="`list-item-${index}`"
            :data="item"
          />
        </div>
      </mescroll-vue>
    </div>
  </div>
</template>

<script>
import ListHeader from "./list-header.vue";
import ListItem from "./list-item.vue";
import { MescrollMixin } from "@/mixins";
import { mapMutations } from "vuex";
export default {
  mixins: [MescrollMixin],
  components: { ListHeader, ListItem },
  data() {
    return {
      downOptions: {
        autoShowLoading: false,
        use: false,
      },
      upOptions: {
        use: true,
        callback: this.upCallback,
      },
      form: {
        categoryId: "",
        page: 1,
        size: 10,
        keyword: "",
        price: "asc",
        sale: "desc",
      },
      list: [],
    };
  },
  methods: {
    ...mapMutations(["setTitle"]),

    filterChange(filterData) {
      let { index, val, subVal } = filterData;
      if (val == "price") {
        this.form.price = subVal;
        this.form.sale = "";
      } else if (val == "sale") {
        this.form.sale = subVal;
        this.form.price = "";
      } else {
        this.form.sale = "desc";
        this.form.price = "asc";
      }
      this.mescroll.resetUpScroll();
    },
    requestData({ num, size }) {
      if (num == 1) {
        this.$showLoading();
      }
      this.$api({
        apiName: "getTransferMarketList",
        postData: { ...this.form, page: num, size },
        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,
      });
    },
    upCallback(page) {
      this.requestData(page);
    },
  },
  created() {
    let { categoryId, name } = this.$route.query;
    this.setTitle(name);
    this.form.categoryId = categoryId;
  },
};
</script>

<style lang="less">
.transfer-classification-list-con {
  height: 100vh;
  display: flex;
  flex-direction: column;
  > .list-scroll {
    flex: 1;
    overflow-y: auto;
    .list-con {
      padding-top: 10px;
    }
  }
}
</style>