<template>
  <div class="good-search">
    <div class="search-input">
      <cmp-search-input @on-change="keyWordChange"></cmp-search-input>
    </div>
    <div class="search-list">
      <!-- 指定门店下的商品 -->
      <template v-if="isShowGood">
        <good-cell
          ref="goodCell"
          v-for="(skuName, index) in skuNames"
          :key="index"
          :skuName="skuName"
          :index="index"
          @handleSkuNamePlus="handleSkuNamePlus"
          @handleSkuNameMinus="handleSkuNameMinus"
          @handleSkuNameChange="handleSkuNameChange"
        ></good-cell>
      </template>
     
      <!-- 附近的门店列表 -->
      <div class="storeList" v-if="currentSku.length && !isShowGood">
        <nearlyStoreCom :storeList="currentSku" :isSearch="true"></nearlyStoreCom>	
      </div>
      
      <!-- 没有商品 -->
      <div class="no-goods" v-if="noGoodsShow">
        <no-list msg="这里没有商品，换个关键词试试" img="img-noGoods"></no-list>
      </div>
    </div>

    <!-- #ifndef MP-TOUTIAO || APP-PLUS -->
    <div class="btn-toShopCar" @click="switchToShopCar">
      <badge :count="shopCount">
        <div class="icon-shopcar"></div>
      </badge>
    </div>
    <!-- #endif -->

    <zy-loading></zy-loading>

    <!-- #ifdef MP-TOUTIAO || APP-PLUS -->
    <!-- 购物车图标 -->
    <shopCarIcon v-if="isShowShop"></shopCarIcon>
    <!-- #endif -->
  </div>
</template>

<script>
import CmpSearchInput from '@/components/commonCmp/search-input/search-input'
import goodPage from '@/apis/goodPage';
import ZyLoading from '@/components/Loading/loading'
import {errToast,jumpPage} from '@/utils/uniapi'
import GoodCell from '@/components/goodCmp/good-cell/good-cell.vue'
import {lazyLoad} from '@/utils'
import Badge from '@/components/badge/badge.vue'
import {mapGetters, mapActions} from 'vuex'
import NoList from '@/components/commonCmp/list-none.vue'
// import { msgData } from '@/config'
import {store} from "@/store";
import nearlyStoreCom from '@/components/nearlyStoreCom/index.vue'

// #ifdef MP-TOUTIAO || APP-PLUS
import shopCarIcon from '@/components/shopCarIcon/index'
// #endif
export default {
  components: {
    CmpSearchInput,
    ZyLoading,
    GoodCell,
    Badge,
    NoList,
    nearlyStoreCom,
    // #ifdef MP-TOUTIAO || APP-PLUS
    shopCarIcon
    // #endif
  },
  data () {
    return {
      skuNames: [],
      noGoodsShow: false,
      // checkModalShow: false,
      focusIndex: -1,
      visibleHeight:555,
      currentSku:[],
      isShowGood:false
    }
  },
  onHide () {
    // this.checkModalShow = false
    this.focusIndex = -1
  },
  onLoad(query){
    if(query.type) this.isShowGood = true
  },
  computed: {
    ...mapGetters({
      carList: 'cartPage/cartList',
      shopCount: 'cartPage/carCount',
      confirmCheckShow: 'confirmCheckShow',
      isShowShop:'isShowShop',
      storeID: "indexPage/storeID",
      topGoods:"indexPage/topGoods",
      storeList:"indexPage/storeList"
    })
  },
  methods: {
    ...mapActions({
      changeCar: "cartPage/changeCar"
    }),
    // 查询api
    // 关键字修改
    async keyWordChange (keyword) {
      try {
        this.showLoad()
        this.noGoodsShow = false
        if (!keyword) {
          this.noGoodsShow = false
          return false
        }
        if(!this.isShowGood){
          this.currentSku = []
          this.storeList.forEach(async (item)=> {
            let obj = {
              storeID:item.storeInfo.storeID,
              isFocus:true,
              isBySku:false,
              keyword,
              pageSize:30,
              offset:0 
            }
            let res = await goodPage.getStoresSkus(obj)
            if(res.totalCount) {
              this.currentSku.push({
                ...item,
                searchSku:res.skuNames
              })
            }
          })
        }else{
          this.skuNames = []
          let {totalCount, skuNames} = await goodPage.getStoresSkus({keyword})
          if (totalCount > 0) {
            this.skuNames=[]
            lazyLoad({target: this.skuNames, arr: skuNames, totalCount})
          } else {
            this.noGoodsShow = true
          }
        }
      } catch (e) {
        this.skuNames = []
        this.noGoodsShow = true
        console.error(e)
        errToast(e)
      } finally {
        this.hideLoad()
      }
    },
    // 商品 +
    async handleSkuNamePlus (index) {
      const skuName = this.skuNames[index]
      await this.changeCar({
        skuName,
        count:skuName.count + 1
      })
      this.skuNames[index].count = skuName.count + 1
    },
    // 商品 -
    async handleSkuNameMinus (index) {
      let skuName = this.skuNames[index]
      await this.changeCar({
          skuName,
          count:skuName.count - 1
      })
      this.skuNames[index].count = skuName.count - 1
    },
    async handleSkuNameChange ({index, count}) {
      let skuName = this.skuNames[index]
      await this.changeCar({
          skuName,
          count:count
      })
      this.skuNames[index].count = count
    },
    // 跳转到购物车
    switchToShopCar () {
      // #ifndef MP-TOUTIAO || APP-PLUS
      jumpPage('switchTab','/pages/cart/index')
      // #endif
            
      // #ifdef MP-TOUTIAO || APP-PLUS
      jumpPage('navigateTo','/pages/cart/index')
      // #endif
    },
    // closeModal () {
    //   this.checkModalShow = false
    // },
    // async confirmModal () {
    //   const {skuNames, focusIndex} = this
    //   const skuName = skuNames[focusIndex]
    //   try {
    //     await this.changeCar({
    //       skuName,
    //       count:skuName.count + 1
    //     })
    //     this.$set(this.skuNames, focusIndex, {
    //       ...skuName,
    //       count: skuName.count + 1
    //     })
    //   } catch (e) {
    //     errToast(e)
    //   }
    // }
  }
}
</script>

<style lang="scss">
@import './good-search.scss';
</style>