<template>
  <View>
    <BrandScroll class="brand" :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, indexList } = storeRefs
const shop = ref(null)
const selectedList = ref([])

Promise.all([getBrandListByFloor()]).then(([_brandList]) => {
  if (storeRefs.shop.value) shop.value = storeRefs.shop.value
  const recMap = indexList.value.recommendList.reduce((acc, { shopCode }) => ({ ...acc, [shopCode]: true }), {})
  const list = _brandList.data.list
  selectedList.value = list.map(({ name, shopList: _shopList }) => ({ name, shopList: _shopList.filter(({ shopCode, yaxis }) => recMap[shopCode] && yaxis) }))
})

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

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