<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view
    class="Mall4j page-logout"
    :style="{ height:pageHeight +'rpx'}"
  >
    <view class="top">
      <view class="img-text">
        <view class="circle">
          <image
            :src="util.addDomain(userInfo.pic)"
            mode="heightFix"
            @error="onImgError"
          />
        </view>
        <view class="text">
          {{ $t('logout.logged') }}
        </view>
      </view>
      <view class="text">
        {{ userInfo.nickName }}
      </view>
    </view>
    <view class="card">
      <view class="card-title">
        {{ $t('logout.logoutNotice') }}
      </view>
      <view class="cart-item-con">
        <view
          v-if="appType <= 2"
          class="item"
        >
          <image
            src="@/package-user/static/images/weixin.png"
            mode="heightFix"
          />
          <text class="text">
            {{ $t('logout.logoutNotice1') }}
          </text>
        </view>
        <view class="item">
          <image
            src="@/package-user/static/images/icon-acount.png"
            mode="heightFix"
          />
          <text class="text">
            {{ $t('logout.logoutNotice2') }}
          </text>
        </view>
        <view class="item">
          <image
            src="@/package-user/static/images/icon-order.png"
            mode="heightFix"
          />
          <text class="text">
            {{ $t('logout.logoutNotice3') }}
          </text>
        </view>
        <view class="item">
          <image
            src="@/package-user/static/images/icon-preferential.png"
            mode="heightFix"
          />
          <text class="text">
            {{ $t('logout.logoutNotice4') }}
          </text>
        </view>
      </view>
    </view>
    <!-- 其他登录方式 -->
    <view class="footer">
      <view class="logout-text">
        {{ $t('logout.logoutConfirm') }}
      </view>
      <view class="logout-btn">
        <button
          class="btn-left"
          @tap="onLogout"
        >
          {{ $t('logout.logoutBtn') }}
        </button>
        <button
          class="btn-right"
          @tap="onBack"
        >
          {{ $t('logout.keepLogin') }}
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import util from '@/utils/util.js'

const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
const userInfo = ref('')
const appType = uni.getStorageSync('cloudAppType')
const pageHeight = ref(0)

/**
   * 生命周期函数--监听页面加载
   */
onLoad(() => {
  // 头部导航标题
  uni.setNavigationBarTitle({
    title: $t('logout.logoutBtn')
  })
  const sysInfo = uni.getSystemInfoSync()
  const pxToRpxScale = 750 / sysInfo.windowWidth
  pageHeight.value = sysInfo.windowHeight * pxToRpxScale
})

/**
   * 生命周期函数--监听页面初次渲染完成
   */

/**
 * 生命周期函数--监听页面显示
 */
onShow(() => {
  // 头部导航标题
  uni.setNavigationBarTitle({
    title: $t('logout.logoutBtn')
  })
  // 查询用户信息
  userInfo.value = uni.getStorageSync('cloudUserDetails')
  if (userInfo.value.pic && userInfo.value.pic.indexOf('http') === -1) {
    userInfo.value.pic = resourcesUrl + userInfo.value.pic
  }
  if (!userInfo.value.pic) {
    userInfo.value.pic = '/static/images/head-sculpture.png'
  }
})

const onBack = () => {
  uni.switchTab({
    url: '/pages/my/my'
  })
}
/**
 * 退出登录
 */
const onLogout = () => {
  const params = {
    url: '/mall4cloud_auth/ma/login_out',
    method: 'POST'
  }
  http.request(params).then(() => {
    uni.removeStorageSync('cloudToken')
    uni.removeStorageSync('cloudLoginResult')
    uni.removeStorageSync('cloudUserDetails')
    uni.removeStorageSync('cloudExpiresTimeStamp')
    uni.removeStorageSync('cloudDeliveryAddrInfo')
    // 变更uuid (数据分析)
    uni.removeStorageSync('cloudOid')
    http.getOid()
    uni.switchTab({
      url: '/pages/index/index'
    })
  })
}
const onImgError = () => {
  userInfo.value.pic = '/static/images/head-sculpture.png'
}

</script>
<style lang="scss" scoped>
@use "./logout.scss";
</style>
