<template>
  <view class="page-shell settings-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-card">
        <view v-for="item in settings" :key="item.title" class="setting-row">
          <view>
            <text class="setting-title">{{ item.title }}</text>
            <text class="setting-desc">{{ item.desc }}</text>
          </view>
          <text class="setting-state">{{ item.value }}</text>
        </view>
      </view>

      <view class="subpage-card">
        <view class="setting-row no-border">
          <view>
            <text class="setting-title">账号与安全</text>
            <text class="setting-desc">手机号、登录方式与设备安全管理</text>
          </view>
          <text class="setting-state">已启用</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      settings: [
        { title: '预约提醒', desc: '到店前提醒与确认通知', value: '已开启' },
        { title: '订单通知', desc: '核销与自提提醒', value: '已开启' },
        { title: '隐私管理', desc: '会员信息与授权说明', value: '查看' }
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({ fail: () => uni.redirectTo({ url: '/pages/profile/profile' }) })
    }
  }
}
</script>

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

.setting-row {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  padding: 20rpx 0;
  border-bottom: 1rpx solid rgba(100, 140, 118, 0.08);
  transition: transform 240ms ease, opacity 240ms ease;
}

.setting-row:active {
  transform: translateX(6rpx);
}

.setting-row.no-border,
.setting-row:last-child {
  border-bottom: 0;
}

.setting-title,
.setting-desc,
.setting-state {
  display: block;
}

.setting-title {
  font-size: 28rpx;
  font-weight: 600;
}

.setting-desc {
  margin-top: 10rpx;
  font-size: 23rpx;
  line-height: 1.7;
  color: $text-secondary;
}

.setting-state {
  font-size: 24rpx;
  color: $brand-accent;
  white-space: nowrap;
}
</style>
