王明 / Food-Labeling-Management-Platform

<template>
  <view class="loc-root">
    <view class="loc-trigger" @click.stop="openPicker">
      <text class="loc-text">{{ displayLocationName || '—' }}</text>
      <AppIcon name="chevronDown" size="sm" color="white" />
    </view>

    <view v-if="showPicker" class="picker-mask" @click="showPicker = false">
      <view class="picker-body" @click.stop>
        <view class="picker-header">
          <text class="picker-title">Switch Location</text>
          <view class="picker-close" @click="showPicker = false">
            <AppIcon name="plus" size="sm" color="gray" />
          </view>
        </view>
        <view class="picker-list">
          <view
            v-for="s in stores"
            :key="s.id"
            class="picker-item"
            :class="{ active: currentId === s.id }"
            @click="handleSelect(s)"
          >
            <view class="picker-icon" :class="{ active: currentId === s.id }">
              <AppIcon name="mapPin" size="sm" :color="currentId === s.id ? 'white' : 'gray'" />
            </view>
            <view class="picker-info">
              <text class="picker-name">{{ s.locationName }}</text>
              <text class="picker-addr">{{ s.fullAddress }}</text>
            </view>
            <view v-if="currentId === s.id" class="picker-check">
              <AppIcon name="check" size="sm" color="white" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import AppIcon from './AppIcon.vue'
import {
  getCurrentStoreId,
  switchStore,
  getBoundLocations,
  getCurrentLocationCode,
} from '../utils/stores'
import type { UsAppBoundLocationDto } from '../types/usAppBound'

const { t } = useI18n()
const stores = ref<UsAppBoundLocationDto[]>([])
const currentId = ref(getCurrentStoreId())
const showPicker = ref(false)

function refreshList() {
  stores.value = getBoundLocations().filter((s) => s.state !== false)
}

/** 药丸展示门店名称（与弹窗内选中项一致）；无名称时再退回编码 */
const displayLocationName = computed(() => {
  const fromStorage = uni.getStorageSync('storeName')
  if (typeof fromStorage === 'string' && fromStorage.trim()) return fromStorage.trim()
  if (currentId.value) {
    const row = stores.value.find((x) => x.id === currentId.value)
    if (row?.locationName?.trim()) return row.locationName.trim()
  }
  const id = getCurrentStoreId()
  if (id) {
    const row = getBoundLocations().find((x) => x.id === id)
    if (row?.locationName?.trim()) return row.locationName.trim()
  }
  const code = getCurrentLocationCode()
  return code || ''
})

function openPicker() {
  refreshList()
  currentId.value = getCurrentStoreId()
  showPicker.value = true
}

watch(showPicker, (v) => {
  if (v) refreshList()
})

const handleSelect = (s: UsAppBoundLocationDto) => {
  if (s.id === currentId.value) {
    showPicker.value = false
    return
  }
  switchStore(s.id, s.locationName, s.locationCode)
  currentId.value = s.id
  showPicker.value = false
  uni.showToast({ title: t('location.storeSwitched'), icon: 'success' })
  setTimeout(() => {
    const pages = getCurrentPages()
    const cur = pages[pages.length - 1] as { route?: string }
    if (cur?.route) {
      uni.redirectTo({ url: '/' + cur.route })
    }
  }, 800)
}
</script>

<style scoped>
.loc-trigger {
  display: flex;
  align-items: center;
  gap: 4rpx;
  padding: 4rpx 16rpx 4rpx 20rpx;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999rpx;
  margin-top: 6rpx;
}

.loc-text {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  max-width: 320rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loc-trigger .icon-wrap {
  opacity: 0.7;
}

/* Picker modal */
.picker-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.picker-body {
  width: 100%;
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
  padding: 32rpx;
  max-height: 70vh;
  overflow-y: auto;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.picker-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #111827;
}

.picker-close {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
}

.picker-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.picker-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 28rpx 24rpx;
  border-radius: 16rpx;
  border: 2rpx solid #e5e7eb;
  background: #fff;
}

.picker-item.active {
  border-color: var(--theme-primary);
  background: var(--theme-primary-light);
}

.picker-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 14rpx;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.picker-icon.active {
  background: var(--theme-primary);
}

.picker-info {
  flex: 1;
  min-width: 0;
}

.picker-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #111827;
  display: block;
  margin-bottom: 4rpx;
}

.picker-addr {
  font-size: 24rpx;
  color: #6b7280;
  display: block;
}

.picker-check {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  background: var(--theme-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
</style>