<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 class="section-head">
          <text class="section-title">会员资料</text>
          <text class="section-link">编辑资料</text>
        </view>
        <view class="form-item">
          <text class="form-label">昵称</text>
          <input v-model="form.NickName" class="form-input" placeholder="请输入昵称" placeholder-class="form-placeholder" />
        </view>
        <view class="form-item no-border">
          <text class="form-label">手机号</text>
          <input v-model="form.Phone" class="form-input" type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="form-placeholder" />
        </view>
        <view class="primary-button save-button" @tap="saveInfo">保存资料</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>
import { getMyInfo, updateMyInfo } from '@/api/mall'
import { getMember, setMember } from '@/utils/auth'

export default {
  data() {
    const member = getMember() || {}
    return {
      form: {
        NickName: member.nickName || '',
        Avatar: member.avatar || '',
        Phone: member.phone || ''
      },
      settings: [
        { title: '预约提醒', desc: '到店前提醒与确认通知', value: '已开启' },
        { title: '订单通知', desc: '核销与自提提醒', value: '已开启' },
        { title: '隐私管理', desc: '会员信息与授权说明', value: '查看' }
      ]
    }
  },
  onLoad() {
    this.loadInfo()
  },
  methods: {
    loadInfo() {
      getMyInfo()
        .then((data) => {
          if (data) {
            this.form.NickName = data.nickName || ''
            this.form.Avatar = data.avatar || ''
            this.form.Phone = data.phone || ''
            setMember(data)
          }
        })
        .catch(() => {})
    },
    saveInfo() {
      updateMyInfo({
        NickName: this.form.NickName,
        Avatar: this.form.Avatar,
        Phone: this.form.Phone
      })
        .then(() => {
          const member = getMember() || {}
          setMember({ ...member, nickName: this.form.NickName, avatar: this.form.Avatar, phone: this.form.Phone })
          uni.showToast({ title: '资料已保存', icon: 'none' })
        })
        .catch(() => {})
    },
    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;
}

.form-item {
  padding: 18rpx 0;
  border-bottom: 1rpx solid rgba(100, 140, 118, 0.08);
}

.form-item.no-border {
  border-bottom: 0;
}

.form-label {
  display: block;
  font-size: 22rpx;
  color: $text-tertiary;
  letter-spacing: 2rpx;
}

.form-input {
  margin-top: 14rpx;
  height: 60rpx;
  font-size: 30rpx;
  color: $text-primary;
}

.form-placeholder {
  color: $text-tertiary;
}

.save-button {
  width: 100%;
  margin-top: 28rpx;
}
</style>
