<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 { config, shopList } = storeToRefs(store)
const shop = ref(null)
const selectedList = ref([])

Promise.all([getBrandListByFloor()]).then(([_brandList]) => {
  const list = _brandList.data.list

  selectedList.value = list
})

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

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