<!--
* @FileDescription: 导航容器
* @Author: 黄琪勇
* @Date:2024-03-21 13:41:13
-->
<template>
   <div class="navContainer">
      <div class="container">
         <div class="navCon">
            <div class="navImg" :class="{ cursor: props.headImg.url }">
               <img :src="props.headImg.img" @click="handleRouter(props.headImg.url)" />
            </div>
            <img class="horn" src="@/img/layout/jiao.png" />
            <div class="nav" v-for="(nav, index) in navs" :key="nav.name">
               <div class="name" :class="{ cursor: nav.url }" @click="handleRouter(nav.url)">{{ nav.name }}</div>
               <div class="arrow" v-if="navs.length > index + 1">></div>
            </div>
         </div>
         <slot></slot>
      </div>
   </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"

const router = useRouter()

/*
 * headImg  头部图片与跳转
 * navs    导航栏
 */
const props = withDefaults(
   defineProps<{
      headImg?: {
         img: string
         url?: string
      }
      navs: {
         name: string
         url?: string
      }[]
   }>(),
   {
      headImg: () => {
         return {
            img: require("@/img/layout/back.png"),
            url: "back"
         }
      }
   }
)

function handleRouter(url?: string) {
   url && (url === "back" ? router.back() : router.push(url))
}
</script>

<style lang="scss" scoped>
.navContainer {
   width: 100%;
   height: calc(100% - 72px);
   padding: 28px;
   .navCon {
      position: absolute;
      height: 57px;
      background: #fcf2e2;
      left: 0;
      top: -57px;
      border-radius: 20px 0 0 0;
      display: flex;
      align-items: center;
      padding-top: 6px;
      .cursor {
         cursor: pointer;
         &:hover {
            opacity: $opacity-hover;
         }
      }
      .navImg {
         margin-left: 24px;
         margin-right: 18px;
         width: 42px;
         height: 42px;
         position: relative;
         & > img {
            width: 42px;
            height: 42px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
         }
      }
      .nav {
         display: flex;
         align-items: center;
         font-weight: 600;
         font-size: 20px;
         color: #994d1c;
         &:last-child {
            margin-right: 10px;
         }
         .arrow {
            margin: 0 6px;
         }
      }
      .horn {
         position: absolute;
         top: -3px;
         right: -49px;
         width: 49px;
         height: 60px;
      }
   }
   .container {
      position: relative;
      width: 100%;
      height: 100%;
      background: #fcf2e2;
      border-radius: 0 20px 20px 20px;
   }
}
</style>
