<template>
  <view class="setting-container">
    <view class="menu-card">
      <view class="menu-item" @click="handleToPwd">
        <view class="item-left">
          <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
            <uni-icons type="locked" size="20" color="#ffffff"></uni-icons>
          </view>
          <text class="menu-text">修改密码</text>
        </view>
        <uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
      </view>
    </view>
    
    <view class="logout-section">
      <button class="logout-btn" @click="handleLogout">
        <uni-icons type="redo" size="20" color="#f56c6c"></uni-icons>
        <text class="logout-text">退出登录</text>
      </button>
    </view>
  </view>
  
  <view>
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog type="info" cancelText="关闭" confirmText="退出" title="通知" content="确定注销并退出系统吗"
        @confirm="dialogConfirm" @close="dialogClose">
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from "vue";
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()

const popup = ref(null);

function handleToPwd() {
  uni.navigateTo({
    url: '/pages_mine/pages/pwd/index'
  });
};

function handleToUpgrade() {
  uni.showToast({
    title: '模块建设中~',
    mask: false,
    icon: "none",
    duration: 1000
  });
};

function handleCleanTmp() {
  uni.showToast({
    title: '模块建设中~',
    mask: false,
    icon: "none",
    duration: 1000
  });
};
function handleLogout() {
  popup.value.open();
};
function dialogConfirm() {
  //console.log('----------------点击确认------------')
  userStore.logOut().then(() => {
    uni.reLaunch({
      url: '/pages/login'
    });
  })
};
function dialogClose() {
  //console.log('点击关闭')
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f7fa;
}

.setting-container {
  padding: 32rpx;
}

.menu-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 32rpx;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 24rpx;
  transition: background-color 0.3s ease;
  
  &:active {
    background-color: rgba(0, 0, 0, 0.02);
  }
  
  .item-left {
    display: flex;
    align-items: center;
    
    .menu-icon-wrapper {
      width: 64rpx;
      height: 64rpx;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 24rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    }
    
    .menu-text {
      color: #2c3e50;
      font-size: 28rpx;
    }
  }
}

.logout-section {
  padding: 0 8rpx;
}

.logout-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
  border-radius: 44rpx;
  border: 2rpx solid #f56c6c;
  box-shadow: 0 4rpx 16rpx rgba(245, 108, 108, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  transition: all 0.3s ease;
  
  &::after {
    border: none;
  }
  
  &:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
  }
  
  .logout-text {
    color: #f56c6c;
    font-size: 32rpx;
    font-weight: 600;
  }
}
</style>
