<template>
  <view v-if="isReady" class="venue-select-page">
    <view
      v-for="venue in venues"
      :key="venue.key"
      class="venue-half"
      :class="venue.key === 'comprehensive' ? 'dark' : 'light'"
      @tap="selectVenue(venue.key)"
    >
      <text class="venue-name">{{ venue.name }}</text>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useVenueStore } from '@/stores/venue'
import { VENUE_OPTIONS, navigateToVenueHome } from '@/utils/venue'

const venueStore = useVenueStore()
const venues = VENUE_OPTIONS
const isReady = ref(false)
const currentVenue = computed(() => venueStore.currentVenue)

onLoad((options) => {
  const storedVenue = venueStore.init()
  const isSwitchMode = options?.mode === 'switch'

  if (storedVenue && !isSwitchMode) {
    navigateToVenueHome(storedVenue)
    return
  }

  isReady.value = true
})

const selectVenue = (venueKey) => {
  venueStore.enterVenue(venueKey)
}
</script>

<style lang="scss" scoped>
.venue-select-page {
  min-height: 100vh;
  display: flex;
}

.venue-half {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.venue-half:active {
  opacity: 0.9;
}

.venue-half.dark {
  background: #0F172A;
}

.venue-half.dark .venue-name {
  color: #FFFFFF;
}

.venue-half.light {
  background: #F8FAFC;
}

.venue-half.light .venue-name {
  color: #0F172A;
}

.venue-name {
  font-size: 40rpx;
  font-weight: 900;
}
</style>
