<template>
  <div class="not-found">
    <div class="text"> 页面不存在</div>
    <img alt="404" src="@/assets/images/404.png">
    <IxButton class="rollback-btn" icon="rollback" mode="primary" @click="backHandler">返回</IxButton>
  </div>
</template>

<script lang="ts" setup>

const route = useRoute()

const router = useRouter()

const props = defineProps<{
  targetPath: string
  targetHash: string
  targetQuery: Record<string, string>
}>()
console.log('错误路由', props.targetPath, props.targetHash, props.targetQuery)
console.log('route ', route)
console.log('path ', route.path)
console.log('params ', route.params)
console.log('hash', route.hash)
console.log('query', route.query)
console.log('router', router.getRoutes())

function backHandler() {
  router.back()
}
</script>

<style lang="stylus" scoped>
.not-found {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .text {
    text-align: center;
    font-size: 2rem;

    i {
      font-size: 2rem;
      position: relative
      color: red;
    }

    i::after {
      content: '';
      position: absolute;
      top: -30%;
      left: -30%;
      width: 160%;
      height: 160%;
      border: 2px solid red;
      border-radius: 9999px;
      box-sizing: border-box;
    }
  }

  img {
    width: 40%;
  }
}

.rollback-btn {
  width: 20rem;
}
</style>
