<template lang="pug">
  div.main
    q-page-sticky.search(expand position="top")
      q-input.search-input(filled v-model="search" dense placeholder="请输入町洋品号/竞品品号/订货号" clearable @input="queryReset" @keyup.enter="queryReset")
        template(v-slot:prepend)
          q-avatar
            img(src="~dinkle/assets/logo/logo.png")
    q-infinite-scroll(@load="onLoad" :disable="isFinish")
      productList(:list="searchList" :isForbidden="isForbidden")
      template(v-slot:loading)
        q-spinner-dots(color="negative")
      div.no-more(v-show="isFinish && searchList.length") — 没有更多数据了 —
</template>

<script>
import { searchProduct } from "dinkle/service/api";
import ProductList from "dinkle/components/productCell";

export default {
  name: "",
  components: {
    ProductList
  },
  data() {
    return {
      // 搜索内容
      search: "",
      // 搜索列表
      searchList: [],
      // 分页
      paging: {
        pageNo: 1,
        pageSize: 10
      },
      // 是否查询结束
      isFinish: false,
      // 查询onload误触处理
      isForbidden: true
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {
    this.search = this.$route.params.search;
    if (this.search) {
      this.queryReset();
    } else {
      this.isForbidden = true;
    }
  },
  mounted() {},
  methods: {
    // 搜索查询
    async querySearch(done) {
      if (!this.search) return;
      const { pageNo, pageSize } = this.paging;
      const res = await searchProduct({
        keyword: this.search,
        pageNo,
        pageSize
      });
      const arr = res.data.records.map(item => {
        const list = item.relationEntityList || [];
        const relation = list.map(sub => ({
          id: sub.refProductId,
          factory: sub.refProductFactory
        }));
        return {
          id: item.id,
          label: item.productNumber,
          factory: item.productFactory,
          code: item.productCode,
          image: item.productImage,
          isSelected: false,
          existPK: false,
          relation
        };
      });
      this.searchList.push(...arr);
      if (!done) this.isForbidden = false;
      this.isFinish = this.searchList.length >= res.data.total;
      done && done();
    },
    // 分页查询
    onLoad(_, done) {
      if (this.isForbidden) {
        done && done();
        return;
      }
      this.paging.pageNo += 1;
      this.querySearch(() => done());
    },
    // 重置分页
    queryReset() {
      this.isForbidden = true;
      this.paging.pageNo = 1;
      this.searchList = [];
      this.querySearch();
    }
  }
};
</script>

<style scoped lang="stylus">
.search
  z-index 999
  padding 10px
  background-color #F0F2F5
.no-more
  background-color #fff
  padding 10px
  color #9C9C9C
  text-align center
  font-size 11px
>>> .q-field
  width 80%
>>> .q-infinite-scroll__loading
  text-align center
  padding-bottom 10px
  background-color #fff
</style>
