<template>
  <view class="page-shell booking-detail-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">{{ record.status }}</text>
        <text class="hero-title">{{ record.store }}</text>
        <text class="hero-desc">{{ record.date }} · {{ record.displayTime }}</text>
        <view class="meta-grid">
          <text class="meta-pill">护理顾问 {{ record.therapist }}</text>
          <text class="meta-pill rose">空间 {{ record.room }}</text>
        </view>
      </view>

      <view class="subpage-card">
        <view class="section-head">
          <text class="section-title">确认进度</text>
          <text class="section-link">{{ record.confirmState }}</text>
        </view>
        <view class="flow-tip">
          <text class="flow-title">{{ consume ? '本次护理安排已补充完整' : '电话确认后，会补充本次护理安排' }}</text>
          <text class="flow-desc">
            {{
              consume
                ? '护理内容、房间与健康师已为你安排妥当，如现场状态有变化，门店也会再为你微调。'
                : '预约提交后，门店会先与你电话沟通，再把本次到店安排慢慢补充完整。'
            }}
          </text>
        </view>
      </view>

      <view class="subpage-card">
        <view class="info-list">
          <view class="info-row">
            <text class="info-label">预约编号</text>
            <text class="info-value">LQBK{{ record.id }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">联系电话</text>
            <text class="info-value">{{ record.phone }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">护理备注</text>
            <text class="info-value">{{ record.note }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">到店提醒</text>
            <text class="info-value">建议提前 10 分钟到店，如需调整请尽早联系门店</text>
          </view>
        </view>
      </view>

      <view class="cta-row">
        <view class="secondary-button" @tap="viewConsume">{{ consume ? '查看护理安排' : '查看确认进度' }}</view>
        <view class="primary-button" @tap="callStore">联系门店</view>
      </view>
    </view>
  </view>
</template>

<script>
import { findRecordById, findConsumeByRecordId } from '@/data/mock'

export default {
  data() {
    return {
      record: findRecordById(1001),
      consume: findConsumeByRecordId(1001)
    }
  },
  onLoad(options) {
    this.record = findRecordById(options.id)
    this.consume = findConsumeByRecordId(options.id)
  },
  methods: {
    goBack() {
      uni.navigateBack({
        fail: () => {
          uni.redirectTo({ url: '/packageBooking/record/record' })
        }
      })
    },
    callStore() {
      uni.showToast({ title: `已为您准备 ${this.record.store} 联络方式`, icon: 'none' })
    },
    viewConsume() {
      uni.navigateTo({ url: `/packageBooking/consume/consume?recordId=${this.record.id}` })
    }
  }
}
</script>

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

.flow-tip {
  padding: 6rpx 0;
  transition: transform 280ms ease, opacity 280ms ease;
}

.flow-tip:active {
  transform: translateY(-2rpx);
}

.flow-title,
.flow-desc {
  display: block;
}

.flow-title {
  font-size: 28rpx;
  font-weight: 600;
  color: $text-primary;
  animation: lfRevealUp 760ms cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.flow-desc {
  margin-top: 12rpx;
  font-size: 24rpx;
  line-height: 1.8;
  color: $text-secondary;
  animation: lfRevealUp 760ms cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
</style>
