<template>
  <view class="page-shell store-list-page">
    <view class="page-blur"></view>
    <view class="page-blur-secondary"></view>
    <view class="page-blur-tertiary"></view>

    <view class="page-content subpage-content">
      <view class="subpage-nav">
        <view class="subpage-back" @tap="goBack">‹</view>
        <view class="subpage-title-wrap">
          <text class="subpage-title">全部门店</text>
          <text class="subpage-subtitle">在更安静的空间里，挑选更适合你的到店地点</text>
        </view>
      </view>

      <view class="subpage-hero glass-card">
        <text class="hero-kicker">STORE COLLECTION</text>
        <text class="hero-title">为每一次到店，预留恰好的距离与氛围</text>
        <text class="hero-desc">不同门店有各自的护理节奏与空间气质，你可以先看看，再决定这次想去哪里。</text>
      </view>

      <view v-for="store in stores" :key="store.id" class="store-card glass-card" @tap="goDetail(store)">
        <image class="store-image" :src="store.cover" mode="aspectFill" />
        <view class="store-body">
          <view class="store-top">
            <text class="store-name">{{ store.name }}</text>
            <text class="store-distance">{{ store.distance }}</text>
          </view>
          <text class="store-address">{{ store.address }}</text>
          <view class="meta-grid store-pills">
            <text class="meta-pill">{{ store.tag }}</text>
            <text class="meta-pill rose">{{ store.hours }}</text>
          </view>
          <view class="store-actions">
            <view class="mini-button" @tap.stop="callStore(store.phone)">电话</view>
            <view class="mini-button" @tap.stop="openMap(store)">导航</view>
            <view class="mini-button primary-mini" @tap.stop="bookStore(store)">预约</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { stores } from '@/data/mock'

export default {
  data() {
    return {
      stores
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        fail: () => {
          uni.redirectTo({ url: '/pages/home/home' })
        }
      })
    },
    goDetail(store) {
      uni.navigateTo({
        url: `/pages/store-detail/store-detail?id=${store.id}`
      })
    },
    callStore(phone) {
      uni.makePhoneCall({ phoneNumber: phone })
    },
    openMap(store) {
      uni.showToast({ title: `已为您准备 ${store.name} 导航`, icon: 'none' })
    },
    bookStore(store) {
      uni.redirectTo({ url: `/pages/booking/booking?storeId=${store.id}` })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';
@import '@/styles/subpage.scss';

.store-card {
  overflow: hidden;
  margin-bottom: 24rpx;
}

.store-image {
  width: 100%;
  height: 248rpx;
  display: block;
}

.store-body {
  padding: 30rpx;
}

.store-top {
  display: flex;
  justify-content: space-between;
  gap: 16rpx;
}

.store-name {
  flex: 1;
  font-size: 34rpx;
  line-height: 1.4;
  font-weight: 700;
}

.store-distance {
  font-size: 24rpx;
  color: $brand-accent;
}

.store-address {
  display: block;
  margin-top: 14rpx;
  font-size: 24rpx;
  color: $text-secondary;
  line-height: 1.7;
}

.store-pills {
  margin-top: 18rpx;
}

.store-actions {
  display: flex;
  gap: 14rpx;
  margin-top: 22rpx;
}

.mini-button {
  @include secondary-button;
  flex: 1;
  min-width: 0;
  height: 72rpx;
  font-size: 24rpx;
}

.primary-mini {
  color: #fff;
  background: $brand-primary-deep;
}
</style>
