<script lang="ts" setup>
import { useUserStore } from '@/store/user'

definePage({
  style: {
    navigationBarTitleText: '账号安全',
  },
})

const userStore = useUserStore()

// 菜单列表
const menuList = [
  { 
    icon: 'i-carbon-locked', 
    label: '修改密码',
    value: '',
    action: 'changePassword',
  },
  { 
    icon: 'i-carbon-phone', 
    label: '绑定手机',
    value: userStore.userInfo?.phone ? `已绑定 ${userStore.userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}` : '未绑定',
    action: 'bindPhone',
  },
  { 
    icon: 'i-carbon-email', 
    label: '绑定邮箱',
    value: '未绑定',
    action: 'bindEmail',
  },
]

// 处理菜单点击
function handleMenu(action: string) {
  switch (action) {
    case 'changePassword':
      uni.showToast({ title: '功能开发中', icon: 'none' })
      break
    case 'bindPhone':
      uni.showToast({ title: '功能开发中', icon: 'none' })
      break
    case 'bindEmail':
      uni.showToast({ title: '功能开发中', icon: 'none' })
      break
  }
}

// 注销账号
function handleDeleteAccount() {
  uni.showModal({
    title: '警告',
    content: '注销账号后，所有数据将被清除且无法恢复，确定要注销吗？',
    confirmColor: '#fa4350',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({ title: '功能开发中', icon: 'none' })
      }
    },
  })
}
</script>

<template>
  <view class="account-page">
    <view class="menu-list">
      <view 
        v-for="item in menuList" 
        :key="item.label" 
        class="menu-item"
        @click="handleMenu(item.action)"
      >
        <view class="menu-left">
          <text :class="item.icon" class="menu-icon"></text>
          <text class="menu-label">{{ item.label }}</text>
        </view>
        <view class="menu-right">
          <text class="menu-value">{{ item.value }}</text>
          <text class="i-carbon-chevron-right"></text>
        </view>
      </view>
    </view>
    
    <view class="delete-btn" @click="handleDeleteAccount">
      注销账号
    </view>
    
    <view class="tips">
      <text class="i-carbon-warning"></text>
      <text>注销账号后，您的所有数据将被永久删除且无法恢复，请谨慎操作</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.account-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  box-sizing: border-box;
}

.menu-list {
  background: #fff;
  border-radius: 16rpx;
  
  .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 24rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .menu-left {
      display: flex;
      align-items: center;
      gap: 20rpx;
      
      .menu-icon {
        font-size: 40rpx;
        color: #ff8f0d;
      }
      
      .menu-label {
        font-size: 28rpx;
        color: #333;
      }
    }
    
    .menu-right {
      display: flex;
      align-items: center;
      gap: 12rpx;
      
      .menu-value {
        font-size: 26rpx;
        color: #999;
      }
      
      text:last-child {
        font-size: 28rpx;
        color: #ccc;
      }
    }
  }
}

.delete-btn {
  margin-top: 60rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  text-align: center;
  font-size: 28rpx;
  color: #fa4350;
}

.tips {
  display: flex;
  align-items: flex-start;
  gap: 12rpx;
  margin-top: 20rpx;
  padding: 0 16rpx;
  
  text {
    font-size: 24rpx;
    color: #999;
    line-height: 1.5;
    flex: 1;
    
    &:first-child {
      color: #ff8f0d;
      flex: none;
      margin-top: 2rpx;
    }
  }
}
</style>
