<template>
  <View>
    <BrandScroll :isFood="true" class="foods" :shop="shop" @click="handleShop" :list="selectedList" :config="config" />
  </View>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'
import { getBrandListByFloor } from '@/http/brand/api'
import View from '@/layouts/View.vue'
import BrandScroll from '@/components/BrandScroll/BrandScroll.vue'

const store = useStore()
const storeRefs = storeToRefs(store)
const { config, shopList, foodIndustryMap } = storeRefs
const shop = ref(null)
const selectedList = ref([])

Promise.all([getBrandListByFloor()]).then(([_brandList]) => {
  if (storeRefs.shop.value) shop.value = storeRefs.shop.value
  const list = _brandList.data.list.map(item => ({
    name: item.name,
    shopList: item.shopList.filter(({ industryFatherCode }) => foodIndustryMap.value[industryFatherCode])
  }))
  selectedList.value = list
})

function handleShop(item) {
  shop.value = shopList.value.find(_shop => _shop.shopCode === item.shopCode)
}
</script>

<style lang="scss" scoped>
.foods {
  position: relative;
  flex: 1;
}
</style>
