<template>
  <div class="main-box">
    <scroll-view
      ref="scrollView"
      class="main-box-container"
      :to-top="scrollTop"
      :before-bottom-height="100"
      @toBottom="loadData"
      @scroll="onScroll"
    >
      <div>
        <template v-for="(item, index) in layoutData">
          <!-- 新banner  11 -->
          <div v-if="item && +item.elementType === 11" :key="index" class="main-box-bn">
            <cr-swipe
              class="main-box-bn-swiper"
              :autoplay="3000"
              indicator-color="white"
              @change="changeSwiper($event, index)"
            >
              <cr-swipe-item
                v-for="(itm, idx) in item.items"
                :key="idx"
                class="hb-swiper-item"
                @click="
                  handleToDetailsTrack(itm, 'newBannerClick', idx, {
                    frames_mark: index,
                    url: itm.jumpUrl,
                    bname: itm.bname
                  })
                "
              >
                <img :src="itm.img | Img2Thumb" class="hbs-item-img" alt="" />
              </cr-swipe-item>

              <template #indicator>
                <div class="main-box-bn-dots">
                  <div
                    v-for="(itm, idx) in item.items"
                    :key="idx"
                    class="hb-dots-item"
                    :class="[item.swiperCurrent == idx ? 'hb-dots-item_selected' : '']"
                  />
                </div>
              </template>
            </cr-swipe>
          </div>
          <!-- 金刚区 4 -->
          <div v-if="item && +item.elementType === 4" :key="index" class="main-box-nav">
            <!-- h5 最多取20个 -->
            <cr-swipe
              class="my-nav-swipe"
              :show-indicators="false"
              @change="onNavChange($event, index, item)"
            >
              <cr-swipe-item
                v-for="(itm, idx) in item.rewriteItems"
                :key="idx"
                class="my-nav-swipe-item"
              >
                <div v-for="(childItm, childIdx) in itm" :key="childIdx" class="hn-item">
                  <div
                    class="hn-item-imgbox"
                    @click="
                      handleToDetailsTrack(childItm, 'KingKongPosition', childIdx, {
                        KKD_name: childItm.bname,
                        position_number: childIdx
                      })
                    "
                  >
                    <img :src="childItm.img | Img2Thumb" alt="" />
                  </div>
                  <span class="hn-item-title">{{ childItm.name }}</span>
                </div>
              </cr-swipe-item>
              <template v-if="item.rewriteItems.length > 1" #indicator>
                <div ref="homeNav" class="custom-indicator">
                  <div
                    class="custom-indicator-in"
                    :style="[
                      { width: `${item.navWidth}px` },
                      { transform: `translateX(${item.navScrollWidth}px)` },
                      { 'transition-duration': '300ms' }
                    ]"
                  />
                </div>
              </template>
            </cr-swipe>
          </div>
          <!-- 瓷片区一组四双列混排（轮播) （209） -->
          <!--porcelainType  瓷片区单元素类型 1:单图片 2:图片加商品 3:轮播单图片 -->
          <!-- 左侧部分 -->
          <div v-if="+item.elementType === 209" :key="index" class="main-box-chip">
            <template v-for="(itm, idx) in item.porcelainAssembly">
              <div v-if="+itm.porcelainType === 3" :key="idx" class="main-box-chip-left">
                <cr-swipe class="my-swipes" :autoplay="3000" indicator-color="white">
                  <cr-swipe-item v-for="(porItm, porIdx) in itm.porcelainList" :key="porIdx">
                    <img
                      :key="porIdx"
                      alt=""
                      :src="porItm.bgImage | imageMogr4Operation(true)"
                      @click="
                        handleToDetailsTrack(porItm, 'HomePagePorcelainAreaClick', porIdx, {
                          assembly_id: item.id,
                          assembly_name: item.componentName,
                          url: porItm.jumpUrl,
                          position: `0-${porIdx + 1}`
                        })
                      "
                    />
                  </cr-swipe-item>
                </cr-swipe>
              </div>
            </template>
            <!-- 右侧部分 -->
            <div class="main-box-chip-right">
              <template v-for="(itm, idx) in item.porcelainAssembly">
                <img
                  v-if="+itm.porcelainType === 1"
                  :key="idx"
                  alt=""
                  :src="itm.bgImage | imageMogr4Operation(true)"
                  @click="
                    handleToDetailsTrack(itm, 'HomePagePorcelainAreaClick', idx, {
                      assembly_id: item.id,
                      assembly_name: item.componentName,
                      url: itm.jumpUrl,
                      position: idx
                    })
                  "
                />
              </template>
            </div>
          </div>
          <!-- 商品专题（横板） -->
          <div v-if="item && +item.elementType === 221" :key="index" class="main-box-special-row">
            <div class="main-box-special-wrapper">
              <img
                :src="item.commodityTopics[0].coverImg | imageMogr4Operation(true)"
                alt=""
                @click="
                  handleToDetailsTrack(
                    item.commodityTopics[0],
                    'HomePageCommoditySpecialMoreBtnClick',
                    index,
                    {
                      assembly_id: item.id,
                      assembly_name: item.componentName
                    }
                  )
                "
              />
              <div class="special-row-con">
                <div
                  :ref="`specialRow${index}`"
                  class="content"
                  @scroll="scrollEvent(index)"
                  @touchstart="onTouch"
                  @touchmove="onTouch"
                  @touchend="onTouch"
                >
                  <div
                    v-for="(itm, idx) in item.commodityTopics[0].skus"
                    :key="idx"
                    class="content-item"
                    @click="
                      handleToDetailsTrack(itm, 'HomePageCommoditySpecialCommodityCardClick', idx, {
                        assembly_id: item.id,
                        assembly_name: item.componentName,
                        commodity_id: itm.skuNo
                      })
                    "
                  >
                    <img class="special-row-img" :src="itm.imageUrl | imageMogr4Operation" alt="" />
                    <div class="special-row-money">
                      <span>￥</span>
                      <span> {{ itm.price }}</span>
                    </div>
                  </div>
                </div>
                <div v-if="item.commodityTopics[0].skus.length > 4" class="progress">
                  <cr-progress
                    :percentage="item.calcWidth"
                    :show-pivot="false"
                    color="linear-gradient(to right, rgba(255, 75, 0, 1), rgba(255, 119, 5, 1))"
                  />
                </div>
              </div>
            </div>
          </div>
          <!-- 抢购活动（横板） purchaseType 1：距开始  2：距结束   -->
          <div v-if="item && +item.elementType === 115" :key="index" class="main-box-special-row">
            <div class="main-box-special-wrapper">
              <img
                :src="item.rushPurchase.coverImg | imageMogr4Operation(true)"
                alt=""
                @click.stop="goJumpPanicBuying(item)"
              />
              <div v-if="purchaseType(item) === '1'" class="purchase-count-start">
                <img src="https://img.lkbang.net/shijian3x.9af0cc88.png" alt="" />
                <span class="purchase-text">距开始</span>
                <cr-count-down
                  :style="{ color: '#FF1515', fontSize: '12px', lineHeight: 0 }"
                  :format="
                    dateFormat(
                      item.rushPurchase.activityTimeInfo.startTime,
                      item.rushPurchase.activityTimeInfo.currentTime
                    )
                  "
                  :time="
                    item.rushPurchase.activityTimeInfo.startTime -
                      item.rushPurchase.activityTimeInfo.currentTime
                  "
                />
              </div>
              <div v-if="purchaseType(item) === '2'" class="purchase-count-end">
                <img src="https://img.lkbang.net/jiesushijian.56080549.png" alt="" />
                <span class="purchase-text">距结束</span>
                <cr-count-down
                  :style="{ color: '#fff', fontSize: '12px', lineHeight: 0 }"
                  :format="
                    dateFormat(
                      item.rushPurchase.activityTimeInfo.endTime,
                      item.rushPurchase.activityTimeInfo.currentTime
                    )
                  "
                  :time="
                    item.rushPurchase.activityTimeInfo.endTime -
                      item.rushPurchase.activityTimeInfo.currentTime
                  "
                />
              </div>
              <div class="special-row-con">
                <div
                  :ref="`specialRow${index}`"
                  class="content"
                  @scroll="scrollEvent(index)"
                  @touchstart="onTouch"
                  @touchmove="onTouch"
                  @touchend="onTouch"
                >
                  <div
                    v-for="(itm, idx) in item.rushPurchase.skus"
                    :key="idx"
                    class="content-item"
                    @click="
                      handleToDetailsTrack(itm, 'HomePageCommoditySpecialCommodityCardClick', idx, {
                        commodity_id: itm.skuNo
                      })
                    "
                  >
                    <img class="special-row-img" :src="itm.imageUrl | imageMogr4Operation" alt="" />
                    <div class="special-row-money">
                      <span>￥</span>
                      <span> {{ itm.price }}</span>
                    </div>
                    <div class="special-row-saleprice">
                      原价:
                      <span>￥</span>
                      <span> {{ itm.skuInfoSalePrice }}</span>
                    </div>
                  </div>
                </div>
                <div v-if="item.calcWidth && item.rushPurchase.skus.length > 4" class="progress">
                  <cr-progress
                    :percentage="item.calcWidth"
                    :show-pivot="false"
                    color="linear-gradient(to right, rgba(255, 75, 0, 1), rgba(255, 119, 5, 1))"
                  />
                </div>
              </div>
            </div>
          </div>
          <!-- 商品专题（横板）old -->
          <div v-if="item && +item.elementType === 1011" :key="index" class="main-box-special-row">
            <img
              :src="item.categoryFloor.floorImg | imageMogr4Operation(true)"
              alt=""
              @click="
                handleToDetailsTrack(
                  item.categoryFloor,
                  'HomePageCommoditySpecialMoreBtnClick',
                  index,
                  {
                    assembly_id: item.id,
                    assembly_name: item.componentName
                  }
                )
              "
            />
            <div class="special-row-con">
              <div
                :ref="`specialRow${index}`"
                class="content"
                @scroll="scrollEvent(index)"
                @touchstart="onTouch"
                @touchmove="onTouch"
                @touchend="onTouch"
              >
                <div
                  v-for="(itm, idx) in item.categoryFloor.skus"
                  :key="idx"
                  class="content-item"
                  @click="
                    handleToDetailsTrack(itm, 'HomePageCommoditySpecialCommodityCardClick', idx, {
                      assembly_id: item.id,
                      assembly_name: item.componentName,
                      commodity_id: itm.skuNo
                    })
                  "
                >
                  <img class="special-row-img" :src="itm.imageUrl | imageMogr4Operation" alt="" />
                  <div class="special-row-money">
                    <span>￥</span>
                    <span> {{ itm.price }}</span>
                  </div>
                </div>
              </div>
              <div v-if="item.calcWidth && item.categoryFloor.skus.length > 4" class="progress">
                <cr-progress
                  :percentage="item.calcWidth"
                  :show-pivot="false"
                  color="linear-gradient(to right, rgba(255, 75, 0, 1), rgba(255, 119, 5, 1))"
                />
              </div>
            </div>
          </div>
          <!-- 商品专题（竖版） -->
          <div
            v-if="item && +item.elementType === 222"
            :key="index"
            class="main-box-special-column"
          >
            <div v-for="(itm, idx) in item.commodityTopics" :key="idx" class="content">
              <img
                class="special-cover-img"
                :src="itm.coverImg"
                alt=""
                @click="
                  handleToDetailsTrack(
                    item.commodityTopics[idx],
                    'HomePageCommoditySpecialMoreBtnClick',
                    idx,
                    {
                      assembly_id: item.id,
                      assembly_name: item.componentName
                    }
                  )
                "
              />
              <cr-swipe
                class="my-swipe"
                :show-indicators="false"
                @change="
                  e => {
                    onChange(e, idx, index);
                  }
                "
              >
                <cr-swipe-item
                  v-for="(itmImg, idxImg) in itm.disposeSkus"
                  :key="idxImg"
                  class="my-swipe-item"
                >
                  <div v-for="(skuItm, skuIdx) in itmImg" :key="skuIdx" class="my-swipe-item-con">
                    <img
                      :src="skuItm.imageUrl | imageMogr4Operation(true)"
                      @click="
                        handleToDetailsTrack(
                          skuItm,
                          'HomePageCommoditySpecialCommodityCardClick',
                          skuIdx,
                          {
                            assembly_id: item.id,
                            assembly_name: item.componentName,
                            commodity_id: skuItm.skuNo
                          }
                        )
                      "
                    />
                    <div class="my-swipe-item-money">
                      <span>￥</span>
                      <span> {{ skuItm.price }}</span>
                    </div>
                  </div>
                </cr-swipe-item>
                <template v-if="itm.disposeSkus.length > 1" #indicator>
                  <div ref="specialCol" class="custom-indicator">
                    <div
                      class="custom-indicator-in"
                      :style="[
                        { width: `${itm.silderBlockWidth}px` },
                        { transform: `translateX(${itm.scrollSilderBlockWidth}px)` },
                        { 'transition-duration': '300ms' }
                      ]"
                    />
                  </div>
                </template>
              </cr-swipe>
            </div>
          </div>
          <!-- 横向运营区 51 -->
          <div v-if="item && +item.elementType === 51" :key="index" class="main-box-welfare">
            <div v-for="(itm, idx) in item.items" :key="idx" class="main-box-welfare-item">
              <img
                :src="itm.img | imageMogr4Operation(true)"
                @click="handleToDetailsTrack(itm, 'OperationPromotion_across', idx)"
              />
            </div>
          </div>
          <!-- 通栏 10 -->
          <div v-if="item && +item.elementType === 10" :key="index" class="main-box-tonglans">
            <img
              v-for="(itm, idx) in item.items"
              :key="idx"
              :src="itm.img | imageMogr4Operation(true)"
              @click="
                handleToDetailsTrack(itm, 'HomePageExtensionBannerClick', idx, {
                  url: itm.jumpUrl,
                  assembly_id: itm.id,
                  assembly_name: itm.bname
                })
              "
            />
          </div>
          <!-- 竖向运营区 52-->
          <div v-if="item && +item.elementType === 52" :key="index" class="main-box-find">
            <div v-for="(itm, idx) in item.items" :key="idx" class="main-box-find-item">
              <img
                :src="itm.img | imageMogr4Operation"
                @click="handleToDetailsTrack(itm, 'OperationPromotion_vertical', idx)"
              />
            </div>
          </div>
        </template>
      </div>
      <BaseInfo v-if="$config.baidu" />
      <goods-card
        ref="goodsCard"
        class="goods-card"
        :top="scrollTop"
        :loading="loading"
        :goods-list.sync="goodsList"
        :show-header="false"
        no-share
      />
      <load-more v-if="goodsList && goodsList.length > 3" :status="loadingType" />
    </scroll-view>
  </div>
</template>
<script>
// import { watch } from 'vue';
import BaseInfo from '@/components/baseInfo';
import goodsCard from '@/components/goodsCard';
import scrollView from '@/components/scrollView';
import loadMore from '@/components/loadMore';
import { Img2Thumb, imageMogr4Operation } from '@/filters/img2Thumb.filter';
import { getNewArray } from '@/service/utils.service';
import localStorage from '@/service/localStorage.service';
import { getBanner, getGoodsList, getLayout } from '@/api/home.api.js';
import mxBll from '../mixin/mxBll';
import { TRACK_EVENT_MAP } from '../model';
export default {
  components: {
    goodsCard,
    scrollView,
    loadMore,
    BaseInfo
  },
  filters: {
    Img2Thumb,
    imageMogr4Operation
  },
  mixins: [mxBll],
  props: {
    active: {
      type: Number,
      default: 0
    },
    top: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      calcWidth: 0,
      silderBlockWidth: 0,
      scrollSilderBlockWidth: 0,
      bannerList: [],
      loadingType: 'loading',
      loading: true,
      carouselList: [],
      goodsList: [],
      layoutData: [], // 首页组件
      scrollTop: 0,
      pageForm: {
        pageNo: 0,
        pageSize: 10,
        pageType: 2
      },
      hasNew: false,
      specialRow: {},
      scrollIndex: 0
    };
  },
  computed: {
    specialCol() {
      return this.$refs.specialCol;
    },
    // 专题纵向宽度固定宽度
    scrollColWidth() {
      return this.specialCol[0].offsetWidth;
    },
    // 检测数组长度
    onLoadSkeleton() {
      return this.goodsList.length > 0 || this.layoutData.length > 0;
    }
  },
  watch: {
    top(v) {
      if (this.active === 0) {
        this.scrollTop = 0;
        this.$nextTick(() => {
          this.scrollTop = v;
        });
      }
    },
    // 数据加载成功隐藏骨架屏
    onLoadSkeleton(val) {
      if (val) {
        this.$emit('onLoadSkeleton', false);
      }
    }
  },
  mounted() {
    this.onHasNew();
    this.loadData();
    if (this.active === 0) {
      // 新增金刚位千人千面 /切入首页刷新 layout 接口
      this.getLayoutData();
    }
    // 重复调用
    // this.getLayoutData();
    this.$track.registeredEvents('H5_2BSelectionPageExposure');
  },
  // activated() {
  //   // 新增金刚位千人千面 /切入首页刷新 layout 接口
  //   if (this.active === 0) {
  //     this.getLayoutData();
  //   }
  // },
  methods: {
    // 跳转抢购
    goJumpPanicBuying(item) {
      this.$router.push(`/activity/panicBuying?id=${item.rushPurchase.activityId}`);
      return false;
    },
    /**
     *
     * @param {*} start
     * @param {*} end
     */
    dateFormat(start = 0, end = 0) {
      const calcTime = start - end;
      if (calcTime > 24 * 60 * 60 * 1000) {
        return '{d}天{h}时{m}分';
      }
      return '{h}时{m}分{s}秒';
    },
    /**
     *
     * @param {*} params
     * @result resRurchaseType '1' 未开始  '2' 已开始
     */
    purchaseType(params) {
      let resRurchaseType = '';
      if (params && params.rushPurchase && params.rushPurchase.activityTimeInfo) {
        const { startTime, currentTime } = params.rushPurchase.activityTimeInfo;
        if (+startTime - +currentTime > 0) {
          resRurchaseType = '1';
        } else {
          resRurchaseType = '2';
        }
      }
      return resRurchaseType;
    },
    // 导航滚动条
    onNavChange(indicator, i, item) {
      this.$set(this.layoutData[i], 'navScrollWidth', indicator * item.navWidth);
    },
    // 专题纵向平移滑动
    onChange(index, idx, parentIndex) {
      this.scrollSilderBlockWidth = this.silderBlockWidth * index;
      let silderBlockWidth = this.layoutData[parentIndex].commodityTopics[idx].silderBlockWidth;
      this.layoutData[parentIndex].commodityTopics[idx].scrollSilderBlockWidth =
        silderBlockWidth * index;
    },
    scrollEvent(index) {
      this.scrollIndex = index;
    },
    // 阻止滚动触发滑动到频道页
    onTouch(e) {
      e.stopPropagation();
    },
    // 专题横线平移滑动
    handleScroll() {
      let index = this.scrollIndex;
      let scrollLeft = this.$refs[`specialRow${index}`][0].scrollLeft;
      let scrollWidth = this.$refs[`specialRow${index}`][0].scrollWidth;
      let offsetWidth = this.$refs[`specialRow${index}`][0].offsetWidth;
      let calcWidth = ((scrollLeft + offsetWidth) / scrollWidth) * 100;
      if (calcWidth >= 100) {
        calcWidth = 100;
      }
      if (calcWidth <= 0) {
        calcWidth = 0;
      }
      this.layoutData[index].calcWidth = calcWidth;
      this.layoutData = JSON.parse(JSON.stringify(this.layoutData));
      return;
    },
    onHasNew() {
      const getHasNew = Number(localStorage.get('hasNew') || 0);
      const { hasNew } = this.$route.query || {};
      if (!getHasNew && Number(hasNew)) {
        localStorage.set('hasNew', hasNew);
        this.hasNew = true;
      }
    },
    handleToDetailsTrack(item, area, index, buriedPoint = {}) {
      console.log('item, area, index :>> ', item, area, index);
      if (item.needLogin && !localStorage.get('vccToken')) {
        this.$config.signOutFn();
        return;
      }
      const trackInfo = TRACK_EVENT_MAP[area];
      if (trackInfo) {
        this.$track.registeredEvents(
          trackInfo.name,
          {
            position_number: index,
            ...buriedPoint,
            [trackInfo.trackKey]: item[trackInfo.itemKey]
          },
          () => {
            this.mxHandleToDetails({ item, area, index });
          }
        );
      } else {
        this.mxHandleToDetails({ item, area, index });
      }
    },
    //轮播图切换修改背景色
    changeSwiper(indicator, i) {
      this.$set(this.layoutData[i], 'swiperCurrent', indicator);
      this.$track.registeredEvents('H5_HomePageBannerExposure', {
        bname: this.layoutData[i].items[indicator].bname,
        frames_mark: indicator
      });
    },
    onScroll(top) {
      this.scrollTop = top;
      this.$emit('changeTop', top);
    },
    handleToTop() {
      // 超出5000回滚时间太长
      if (this.scrollTop > 5000) {
        this.$refs.scrollView.$refs.scrollContent.scrollTop = 0;
        return;
      }
      this.$nextTick(function() {
        // scrollView > scrollContent
        let top = this.$refs.scrollView.$refs.scrollContent.scrollTop;
        const timeTop = setInterval(() => {
          this.$refs.scrollView.$refs.scrollContent.scrollTop = top -= 50;
          if (top <= 0) {
            clearInterval(timeTop);
          }
        }, 10);
      });
    },
    async getBannerInfo() {
      const [data] = await getBanner();
      const { banner } = data || {};
      this.bannerList = banner.items || [];
    },
    dealLayoutData() {
      // 专题横向平移滑动
      if (this.$refs && this.layoutData.length) {
        this.layoutData.forEach((item, index) => {
          // elementType 1011 专题横向
          if (
            +item.elementType === 1011 ||
            +item.elementType === 221 ||
            +item.elementType === 115
          ) {
            item.scrollLeft = this.$refs[`specialRow${index}`][0].scrollLeft;
            item.scrollWidth = this.$refs[`specialRow${index}`][0].scrollWidth;
            item.offsetWidth = this.$refs[`specialRow${index}`][0].offsetWidth;
            item.calcWidth = (item.offsetWidth / item.scrollWidth) * 100;
            this.$refs[`specialRow${index}`][0].addEventListener('scroll', (e, index) => {
              this.handleScroll(e, index);
            });
          } else if (+item.elementType === 4 && this.$refs && this.$refs.homeNav) {
            const w = this.$refs.homeNav[0].offsetWidth;
            const len = item.rewriteItems?.length || 1;
            item.navWidth = w / len;
            item.navScrollWidth = 0;
          }
        });
      }
      // 专题横向平移滑动
      if (this.specialCol) {
        this.layoutData.forEach(item => {
          // elementType 222 专题纵向
          if (+item.elementType === 222) {
            item.commodityTopics.forEach(itm => {
              itm.silderBlockWidth = this.scrollColWidth / itm.disposeSkus.length;
              itm.scrollSilderBlockWidth = 0;
            });
          }
        });
      }
    },
    async getLayoutData() {
      const [data] = await getLayout();
      if (!data || !data.contents) {
        return;
      }
      let { contents } = data;
      this.layoutData = contents;
      // 处理专题纵向一栏四图的组件
      this.layoutData.forEach((item, index) => {
        if (+item.elementType === 222) {
          item.commodityTopics.forEach(itm => {
            itm.disposeSkus = getNewArray(itm.skus, 4);
            itm.silderBlockWidth = 0;
            itm.scrollSilderBlockWidth = 0;
          });
          // H5_首页商品专纵向
          this.handleToDetailsTrack(
            item,
            'LengthwaysHomePageCommoditySpecialCommodityCardExposure',
            index,
            {
              assembly_id: item.id,
              assembly_name: item.componentName
            }
          );
        } else if (+item.elementType === 4) {
          // 金刚位数据排版
          item.rewriteItems = getNewArray(item.items, 10);
        } else if (+item.elementType === 209) {
          // 首页瓷片区
          this.handleToDetailsTrack(item, 'HomePagePorcelainAreaExposure', index, {
            assembly_id: item.id,
            assembly_name: item.componentName
          });
        } else if (+item.elementType === 11) {
          // 新banner
          item.swiperCurrent = 0;
        } else if (+item.elementType === 10) {
          // 首页通栏曝光
          this.handleToDetailsTrack(item, 'HomePageExtensionBannerExposure', index, {
            assembly_id: item.id,
            assembly_name: item.componentName
          });
        } else if (+item.elementType === 221) {
          // H5_首页商品专题横线
          this.handleToDetailsTrack(
            item,
            'CrosswiseHomePageCommoditySpecialCommodityCardExposure',
            index,
            {
              assembly_id: item.id,
              assembly_name: item.componentName
            }
          );
        }
      });
      this.$nextTick(() => {
        this.dealLayoutData();
      });
    },
    async loadData() {
      if (this.loading) {
        this.loading = false;
        if (this.loadingType === 'noMore' || this.progress === 'loading') return;
        this.loadingType = 'loading';
        this.progress = 'loading';
        this.pageForm.pageNo++;

        const [goodsData] = await getGoodsList(this.pageForm);
        this.progress = 'finished';
        if (!goodsData || !goodsData.hasNext || !goodsData.goodsList) {
          this.loadingType = 'noMore';
        }
        this.goodsList =
          goodsData && goodsData.goodsList && this.goodsList.concat(goodsData.goodsList || []);
        this.loading = true;
      }
    }
  }
};
</script>
<style lang="less" src="../style/main.less" scoped></style>
