<!--
 * @Author: RenXiaoDong
 * @Date: 2025-06-26 17:23:52
-->
<template>
  <a-modal
    v-model:visible="visible"
    width="400px"
    modal-class="exit-account-modal"
    show-close="false"
    :footer="false"
    @close="onClose"
  >
    <div class="flex items-center mb-16px">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span class="s1">确认退出登录吗？</span>
    </div>
    <p class="m-0 p-0 mb-24px s2 ml-32px">退出登录后，你将无法收到该账号的通知</p>
    <div class="flex items-center justify-end">
      <a-button class="cancel-btn" size="medium" @click="onClose">返回</a-button>
      <a-button type="primary" class="ml-16px danger-btn" status="danger" size="medium" @click="onLogout"
        >退出登录</a-button
      >
    </div>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue';
import { fetchLogOut } from '@/api/all/login';
import { handleUserLogout } from '@/utils/user';

import icon1 from './img/icon1.png';

const visible = ref(false);

function onClose() {
  visible.value = false;
}

const open = (record) => {
  visible.value = true;
};

async function onLogout() {
  const { code } = await fetchLogOut();
  if (code === 200) {
    handleUserLogout();
    AMessage.success('退出登录成功');
    onClose();
  }
}

defineExpose({ open });
</script>

<style lang="scss">
.exit-account-modal {
  border-radius: 8px;
  border: 1px solid var(--BG-300, #e6e6e8) !important;
  background-color: var(--BG-white, #fff) !important;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
  .arco-modal-header {
    display: none;
  }
  .arco-modal-body {
    padding: 24px;
    .s1 {
      color: var(--Text-1, #211f24);
      font-family: 'PuHuiTi-Medium';
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px; /* 157.143% */
    }
    .s2 {
      color: var(--Text-2, #3c4043);
      font-family: 'PuHuiTi-Regular';
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px; /* 166.667% */
    }
    .cancel-btn {
      border-radius: 4px;
      border: 1px solid var(--BG-500, #b1b2b5);
      &:hover {
        border: 1px solid var(--BG-500, #b1b2b5);
      }
    }
    .danger-btn {
      border-radius: 4px;
      background: var(--Functional-Danger-6, #f64b31) !important;
      border: none !important;
    }
  }
}
</style>
