<template>
  <t-dialog
    v-model:visible="visible"
    placement="center"
    :footer="false"
    @close="closeLogout"
  >
    <template #body>
      <div class="logout-body">
        <p class="title">{{ $t('user.LogoutSure') }}</p>
        <div class="comfim">
          <t-button @click="DetermineT">{{ $t('user.Confirm') }}</t-button>
          <t-button class="Cancel" @click="closeLogout">{{
            $t('user.Cancel')
          }}</t-button>
        </div>
      </div>
    </template>
  </t-dialog>
</template>

<script lang="ts" setup>
const visible = ref(true);
const Cookie = useCookie('userCookie');
const ChangeRouter = useChangeRouter();
// 退出登录
const DetermineT = () => {
  Cookie.value = '';
  //   通知tab切换路由
  ChangeRouter.value.name = 'personal';
  ChangeRouter.value.path = '/user/personal';
  ChangeRouter.value.id += 1;
  visible.value = false;
  // 清空Cookie
};
// 取消
const closeLogout = () => {
  //   通知tab切换路由
  ChangeRouter.value.name = 'personal';
  ChangeRouter.value.path = '/user/personal';
  ChangeRouter.value.id += 1;
  visible.value = false;
};
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
@import '@/style/flex.less';
:deep(.t-dialog) {
  .t-dialog__body {
    padding-bottom: 16px;
    .logout-body {
      text-align: center;
      .title {
        font-size: @font-size-xl;
        font-weight: bold;
      }
      .comfim {
        margin-top: 30px;
        .t-button {
          width: 100px;
          margin: 0 12px;
        }
        .Cancel {
          background: @td--table-icon-color-1;
          border: none;
          color: black;
        }
      }
    }
  }
}
</style>
