<template>
  <view class="container">
    <view class="card block">
      <view class="t">消息提醒</view>
      <view class="muted p">用于接收预约成功、到店提醒、过期提醒等通知。</view>
      <view class="row between line">
        <view>预约成功提醒</view>
        <switch :checked="on1" @change="toggle1" color="#3b82f6" />
      </view>
      <view class="row between line">
        <view>到店提醒</view>
        <switch :checked="on2" @change="toggle2" color="#3b82f6" />
      </view>
      <view class="row between line">
        <view>卡券过期提醒</view>
        <switch :checked="on3" @change="toggle3" color="#3b82f6" />
      </view>
    </view>
    <view class="card block">
      <view class="t">订阅消息</view>
      <view class="muted p">商用版可在此引导用户订阅微信消息模板（本原型仅展示）。</view>
      <view class="btn btn-primary" @tap="mockSub">一键订阅（演示）</view>
    </view>
    <AiFloat />
  </view>
</template>

<script>
import AiFloat from '@/components/AiFloat.vue'

export default {
  components: { AiFloat },
  data() {
    return {
      on1: true,
      on2: true,
      on3: true
    }
  },
  methods: {
    toggle1(e) {
      this.on1 = !!e.detail.value
    },
    toggle2(e) {
      this.on2 = !!e.detail.value
    },
    toggle3(e) {
      this.on3 = !!e.detail.value
    },
    mockSub() {
      uni.showToast({ title: '已订阅（演示）', icon: 'none' })
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  padding: 22rpx;
  margin-bottom: 18rpx;
}
.t {
  font-size: 32rpx;
  font-weight: 950;
}
.p {
  margin-top: 14rpx;
  font-size: 26rpx;
  line-height: 1.7;
}
.line {
  padding: 18rpx 0;
  border-top: 1rpx solid rgba(17, 24, 39, 0.08);
}
.line:first-of-type {
  border-top: 0;
}
</style>

