<template>
  <view class="page-shell record-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="record-nav">
        <view class="back-button" @tap="goBack">‹</view>
        <view class="record-nav-main">
          <text class="record-title">预约记录</text>
          <text class="record-subtitle">最近的到店安排与护理时段</text>
        </view>
      </view>

      <view v-for="item in records" :key="item.id" class="record-item glass-card" @tap="goDetail(item)">
        <view class="record-top">
          <text class="status-chip" :class="item.statusClass">{{ item.status }}</text>
          <text class="record-date">{{ item.date }}</text>
        </view>
        <text class="record-store">{{ item.store }}</text>
        <view class="record-meta-panel">
          <view class="record-meta-item">
            <text class="record-meta-label">预约时段</text>
            <text class="record-meta-value">{{ item.displayTime }}</text>
          </view>
          <view class="record-meta-item">
            <text class="record-meta-label">护理顾问</text>
            <text class="record-meta-value">{{ item.therapist }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      records: bookingRecords
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        fail: () => {
          uni.redirectTo({
            url: '/pages/home/home'
          })
        }
      })
    },
    goDetail(item) {
      uni.navigateTo({
        url: `/packageBooking/detail/detail?id=${item.id}`
      })
    }
  }
}
</script>

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

.record-nav {
  display: flex;
  align-items: center;
  margin-bottom: 28rpx;
}

.back-button {
  width: 72rpx;
  height: 72rpx;
  margin-right: 20rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42rpx;
  color: $brand-primary-deep;
  background: rgba(255, 255, 255, 0.82);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
}

.back-button:active {
  transform: scale(0.95);
  box-shadow: 0 12rpx 26rpx rgba(54, 77, 64, 0.08);
}

.record-title {
  display: block;
  font-size: 44rpx;
  font-weight: 700;
}

.record-subtitle {
  display: block;
  margin-top: 10rpx;
  font-size: 24rpx;
  color: $text-secondary;
}

.record-item {
  padding: 32rpx;
  margin-bottom: 22rpx;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease;
  animation: lfRevealUp 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.record-item:nth-of-type(1) { animation-delay: 0.08s; }
.record-item:nth-of-type(2) { animation-delay: 0.16s; }
.record-item:nth-of-type(3) { animation-delay: 0.24s; }
.record-item:nth-of-type(4) { animation-delay: 0.32s; }

.record-item:active {
  transform: translateY(-4rpx);
}

.record-top,
.record-meta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-chip {
  @include chip-status;
  font-weight: 600;
}

.confirmed {
  background: rgba(100, 140, 118, 0.14);
}

.pending {
  background: rgba(210, 191, 156, 0.18);
}

.finished {
  background: rgba(182, 142, 154, 0.16);
}

.record-date,
.record-meta-label {
  font-size: 24rpx;
  color: $text-secondary;
}

.record-store {
  display: block;
  margin: 20rpx 0 22rpx;
  font-size: 34rpx;
  line-height: 1.4;
  font-weight: 700;
}

.record-meta-panel {
  padding: 22rpx 24rpx;
  border-radius: 28rpx;
  background: rgba(210, 191, 156, 0.10);
  box-shadow: $shadow-soft;
  transition: transform 260ms ease, background 260ms ease;
}

.record-item:active .record-meta-panel {
  transform: translateY(-2rpx);
  background: rgba(210, 191, 156, 0.14);
}

.record-meta-item {
  width: 48%;
}

.record-meta-label,
.record-meta-value {
  display: block;
}

.record-meta-value {
  margin-top: 8rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: $brand-primary-deep;
}
</style>
