<template>
  <view class="logout-button" @click="handleLogout">
    <text class="logout-text">{{ text }}</text>
  </view>
</template>

<script setup>
import { userLogout } from '@/api/auth/auth.js'
import { clearToken } from '@/utils/request.js'

// 定义组件属性
const props = defineProps({
  text: {
    type: String,
    default: '退出登录'
  },
  confirmTitle: {
    type: String,
    default: '确认退出'
  },
  confirmContent: {
    type: String,
    default: '确定要退出登录吗？'
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  successMessage: {
    type: String,
    default: '退出成功'
  },
  redirectUrl: {
    type: String,
    default: '/pages/login/login'
  }
})

// 定义事件
const emit = defineEmits(['logout-success', 'logout-error'])

// 退出登录处理
const handleLogout = async () => {
  try {
    // 显示确认对话框
    const res = await new Promise((resolve, reject) => {
      uni.showModal({
        title: props.confirmTitle,
        content: props.confirmContent,
        confirmText: props.confirmText,
        cancelText: props.cancelText,
        success: resolve,
        fail: reject,
      })
    })

    if (!res.confirm) {
      return
    }

    // 调用退出登录API
    const response = await userLogout()

    if (response.code === 200) {
      // 清除本地token
      clearToken()

      // 清除用户信息
      uni.removeStorageSync('userInfo')

      // 显示成功提示
      uni.showToast({
        title: props.successMessage,
        icon: 'success',
        duration: 1500,
      })

      // 触发成功事件
      emit('logout-success', response)

      // 延迟跳转到指定页面
      setTimeout(() => {
        uni.reLaunch({
          url: props.redirectUrl,
        })
      }, 1500)
    } else {
      throw new Error(response.msg || '退出失败')
    }
  } catch (error) {
    console.error('退出登录失败:', error)
    
    // 触发错误事件
    emit('logout-error', error)
    
    uni.showToast({
      title: error.message || '退出失败',
      icon: 'none',
      duration: 2000,
    })
  }
}
</script>

<style lang="scss" scoped>
.logout-button {
  text-align: center;
  line-height: 98rpx;
  color: #f15a04;
  font-size: 16px;
  font-weight: 500;
  width: 710rpx;
  height: 98rpx;
  background: #ffffff;
  border-radius: 24.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 auto;

  &:active {
    background: #f5f5f5;
    transform: scale(0.98);
  }

  .logout-text {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}
</style> 