<template>
  <div class="order-search-con flex-default bg-grey">
    <search-header
      ref="searchHeader"
      :type="type"
      @search="handleSearch"
      :focus.sync="inputFocus"
    />
    <div class="search-scroll">
      <mescroll-vue
        :fixed="false"
        ref="mescrollRef"
        @init="mescrollInit"
        :down="downOption"
        @down="downCallback"
        :up="upOption"
        @up="upCallBack"
      >
        <component
          :is="itemComponent"
          v-for="(item, index) of list"
          :key="`search-item-${index}`"
          :data="item"
        />
      </mescroll-vue>
    </div>
  </div>
</template>


<script>
import SearchHeader from "./search-header";
import OrderListItem from "../components/order-list-item";
import DeliveryListItem from "../components/delivery-list-item";
import { OrderType, OrderTypeObj } from "@/enums";
import { MescrollMixin } from "@/mixins";
export default {
  mixins: [MescrollMixin],
  components: {
    SearchHeader,
    OrderListItem,
    DeliveryListItem,
  },
  data() {
    return {
      type: OrderType.ORDER,
      downOption: {
        use: false,
        auto: false,
      },
      upOption: {
        toTop: {
          src: "",
        },
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        callback: this.upCallBack
      },
      inputFocus: true,
      list: [],
      searchKey: "",
    };
  },
  computed: {
    itemComponent() {
      return this.type == OrderType.ORDER ? OrderListItem : DeliveryListItem;
    },
  },
  methods: {
    handleSearch(searchKey) {
      this.searchKey = searchKey;
      this.mescroll.resetUpScroll();
    },
    requestData(searchKey, page) {
      if (page == 1) {
        this.list = [];
      }

      let apiName = OrderTypeObj[this.type].listApi;
      page == 1 && this.$showLoading();
      this.$api({
        apiName,
        postData: {
          page,
          size: 10,
          searchKey,
        },
        success: (res) => {
          this.list = this.list.concat(res.data);
          this.mescroll.endBySize(res.data.length, res.totalSize);
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
    upCallBack(me) {
      if (!this.searchKey) {
        this.list = [];
        this.mescroll.endBySize(0, 0);
      } else {
        this.requestData(this.searchKey, me.num);
      }
    },
  },
  mounted() {
    this.type = this.$route.query.type
  },
};
</script>


<style lang="less">
.order-search-con {
  flex-direction: column;
  height: 100%;
  .search-scroll {
    flex: 1;
    min-height: 0;
    width: 100%;
  }
}
</style>