<script lang="ts" setup>
import { NButton } from 'naive-ui'
import { useRouter } from 'vue-router'
import { ref, onMounted, onUnmounted } from 'vue'
import { Local } from "@/utils/storage/storage";
const router = useRouter()
const ms = useMessage()
const startX = ref(0)
const startY = ref(0)
const endX = ref(0)
const endY = ref(0)

function goBack() {
  router.go(-1)
}

function handleTouchStart(e) {
  startX.value = e.touches[0].pageX
  startY.value = e.touches[0].pageY
}

function handleTouchMove(e) {
  endX.value = e.touches[0].pageX
  endY.value = e.touches[0].pageY
  if (endX.value - startX.value > 50 && Math.abs(endY.value - startY.value) < 50) {
    goBack()
  }
}
function showTips() {
  ms.warning('请拨打客服电话18051299227进行注销')
}
function logOut() {
  Local.clear()
  router.push('/login')
}
onMounted(() => {
  document.addEventListener('touchstart', handleTouchStart, false)
  document.addEventListener('touchmove', handleTouchMove, false)
})
onUnmounted(() => {
  document.removeEventListener('touchstart', handleTouchStart, false)
  document.removeEventListener('touchmove', handleTouchMove, false)
})
// 跳转服务协议
const goServeInfo = () => {
  router.push('/serveInfo')
};
// 跳转隐私权政策
const goPrivateInfo = () => {
  router.push('/privateInfo')
};
const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')))
</script>

<template>
  <div class="flex h-full">
    <div class="header">
      <n-page-header subtitle="" @back="goBack"></n-page-header>
    </div>
    <div class="w-full bg-white shadow-lg rounded-2xl dark:bg-gray-800 mt-40 ">
      <div class="flex flex-col items-center justify-center p-4 -mt-16">
        <a href="#" class="relative block">
          <img alt="profil" :src="userInfo.Avatar" class="mx-auto object-cover rounded-full h-16 w-16 " />
        </a>
        <p class="mt-2 text-xl font-medium text-gray-800 dark:text-white">
          {{ userInfo.NickName }}
        </p>
        <p class="flex items-center text-xs text-gray-400">
          <svg width="10" height="10" fill="currentColor" class="w-4 h-4 mr-2" viewBox="0 0 1792 1792"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z">
            </path>
          </svg>
          {{ userInfo.JobNum }}
        </p>
        <p class="text-xs text-gray-400">
          {{ userInfo.DepartmentName }}
        </p>
        <div class="flex items-center justify-between w-full gap-4 mt-8">
          <button type="button" style="background-color:#f0a020 ;" @click="logOut"
            class="py-2 px-4  focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg ">
            退出登录
          </button>
        </div>
        <div class="flex items-center justify-between w-full gap-4 mt-8">
          <button type="button" style="background-color: #FF0000;" @click="showTips"
            class="py-2 px-4  focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg ">
            注销账号
          </button>
        </div>
        <div class="txt">
            <text class="col" @click="goServeInfo">《平台服务协议》</text>
            <text class="col" @click="goPrivateInfo">《隐私权政策》</text>

          </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.header {
  width: 100%;
  position: fixed;
  z-index: 999;
  padding: 50px 20px 10px 20px;
  border-bottom: 1px solid #f0f0f0;
}
.check {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
}

.txt {
  font-size: 22rpx;
  margin-left: 5px;
  margin-top: 50px;
}

.col {
  color: #5c9fff;
}
</style>