<template lang="pug">
  div.main
    swiper.swiper(:options="swiperOptions")
      swiper-slide(v-for="slide of swiperList" :key="slide")
        img.swiper-image(:src="slide | fmtOSSUrl")
      div.swiper-pagination(slot="pagination")
    div.search
      q-input.search-input(filled v-model="search" dense bg-color="white" placeholder="请输入町洋品号/竞品品号/订货号" clearable @focus="showSearch = true" @input="queryReset" @keyup.enter="toSearch")
        template(v-slot:prepend)
          q-avatar(@click="toSearch")
            img(src="~dinkle/assets/logo/logo.png")
      q-scroll-area.search-list(:thumb-style="thumbStyle" :bar-style="barStyle" v-show="showSearch && search" :style="{ 'height': searchH }")
        q-infinite-scroll(@load="onLoad" :disable="isFinish")
          q-list
            q-item.text-center(clickable v-ripple v-for="item of searchList" :key="item.id" @click="clickItem(item)")
              q-item-section {{ item.label }}
          template(v-slot:loading)
            div
              q-spinner-dots(color="negative")
          div.no-more(v-show="isFinish") — 没有更多数据了 —
    div.modules
      div(v-for="module of moduleList" :key="module.title" @click="jumpModule(module)") {{ module.title }}
    q-separator(color="#E0E0E0")
    div.relation
      img(src="~dinkle/assets/icon/link.png")
      p 竞品速链
    div.modules.contract
      div.modules-item(v-for="(contrast, idx) of linkList" :key="idx" @click="jumpModule(contrast)")
        img(v-if="contrast.image" :src="contrast.image | fmtOSSUrl")
        p(v-else) {{ contrast.title }}
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import {
  getBannerResource,
  getHomepageResource,
  getOtherProductResource,
  searchProduct
} from "dinkle/service/api";

export default {
  name: "",
  components: { Swiper, SwiperSlide },
  data() {
    return {
      // swiper 配置
      swiperOptions: {
        autoplay: true,
        loop: true,
        grabCursor: true,
        setWrapperSize: true,
        a11y: true,
        roundLengths: true,
        spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          hideOnClick: true
        }
      },
      // 轮播图列表
      swiperList: [],
      // 搜索内容
      search: "",
      // 搜索区域高度
      searchH: 0,
      // 是否显示搜索列表
      showSearch: false,
      // 搜索列表样式
      thumbStyle: {
        right: "4px",
        borderRadius: "5px",
        backgroundColor: "#027be3",
        width: "5px",
        opacity: 0.75
      },
      barStyle: {
        right: "2px",
        borderRadius: "9px",
        backgroundColor: "#027be3",
        width: "9px",
        opacity: 0.2
      },
      // 搜索列表
      searchList: [],
      // 首页模块列表
      moduleList: [],
      // 竞品速链列表
      linkList: [],
      // 分页
      paging: {
        pageNo: 1,
        pageSize: 20
      },
      // 是否查询结束
      isFinish: false,
      // 查询防抖处理
      isForbidden: true
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {
    this._initSwiperList();
    this._initModuleList();
    this._initContrastList();
    this.searchH = document.body.clientHeight * 0.6 + "px";
  },
  mounted() {},
  methods: {
    // bannar 初始化
    async _initSwiperList() {
      const res = await getBannerResource();
      this.swiperList = res.data.map(item => item.resourceKey);
    },
    // modules 初始化
    async _initModuleList() {
      const res = await getHomepageResource();
      this.moduleList = res.data.map(item => {
        return {
          title: item.resourceRemark,
          link: item.jumpLink
        };
      });
    },
    // 模块跳转
    jumpModule(module) {
      if (module.link) window.open(module.link, "");
    },
    // 竞品速链初始化
    async _initContrastList() {
      const res = await getOtherProductResource();
      this.linkList = res.data.map(item => {
        return {
          id: item.id,
          title: item.resourceRemark,
          link: item.jumpLink,
          image: item.resourceKey
        };
      });
    },
    // 搜索查询
    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 => {
        return {
          id: item.id,
          label:
            item.productNumber == item.bookNumber
              ? item.productNumber
              : `${item.productNumber} - ${item.bookNumber}`
        };
      });
      this.searchList.push(...arr);
      if (!done) {
        this.isForbidden = false;
      }
      this.isFinish = this.searchList.length >= res.data.total;
      done && done();
    },
    // 跳转到详情
    clickItem(item) {
      this.showSearch = false;
      this.$router.push({
        name: "detail",
        query: {
          id: item.id
        }
      });
    },
    // 跳转到搜索页面
    toSearch() {
      this.showSearch = false;
      this.$router.push({
        name: "search",
        params: {
          search: this.search
        }
      });
    },
    // 分页查询
    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">
.main
  background-color #F0F2F5
.swiper
  --swiper-theme-color: #ff6600;
  &-image
    width: 100%;
.search
  position absolute
  left 8%
  width 84%
  top 100px
  z-index 999
  opacity: 0.89;
  &-input
     width 86%
     margin-left 7%
  &-list
    margin-top 5px
    background-color #FFF
    width: 100%;
    border-radius 2px
    overflow hidden
.modules
  display flex
  align-items center
  flex-wrap wrap
  margin 20px 0
.modules > div
  font-weight: 400;
  color: #9C9C9C;
  line-height: 9px;
  font-size 13px
  text-align center
  width 25%
  &:hover
    color #ff6600
.relation
  display flex
  align-items center
  margin 15px 15px
  color #333
  p
    font-size 18px
    margin-left 5px
  img
    width 20px
.contract
   margin 10px 10px 10px 15px
.modules-item
  margin-bottom 5px
  margin-right 5px
  width calc(25% - 5px) !important
  line-height 51px
  background-color #EEEEEF
  font-weight: 400;
  color: #595959;
  &:hover
    background-color #ff6600
    color #fff !important
  p, img
    width: 100%
    height 51px
    line-height 51px
    font-size 13px
.no-more
  background-color #fff
  padding 10px
  color #9C9C9C
  text-align center
  font-size 11px
>>> .q-infinite-scroll__loading
  text-align center
  padding-bottom 10px
>>> .q-field--filled .q-field__control
  border-radius 0.4rem
</style>
