<template>
    <header class="header_container">
        <div class="bg">
            <img class="left" src="@/assets/img/header_left_bg.png" alt="">
            <img class="center" src="@/assets/img/hrader_center_bg.png" alt="">
            <img class="right" src="@/assets/img/header_right_bg.png" alt="">
        </div>
        <div class="header_main">
            <div class="tabs">
                <div v-for="tab in props.tabs" @click="changeType(tab.type)" class="tab" :class="{ checked: tab.type == props.type }">
                    <span>{{ tab.label }}</span>
                </div>
            </div>
            <div class=""></div>
        </div>
    </header>
</template>

<script setup lang="ts">
import { ref } from "vue"

const props = defineProps(['tabs','type'])
const emit = defineEmits(["update:type"])
function changeType(type:number){
    emit("update:type",type)
}
</script>

<style lang="less" scoped>
.header_container {
    position: relative;
    z-index: 0;
    flex-shrink: 0;
    height: 57px;

    .bg {
        position: absolute;
        z-index: -1;
        display: flex;
        height: 57px;
        background-color: antiquewhite;
        width: 100%;

        img {
            height: 100%;
            min-width: 0;
        }

        .center {
            flex: 1;
        }

    }

    .header_main {
        position: absolute;
        margin-left: 400px;
        bottom: 0;
        height: 36px;
        // background-color: antiquewhite;
        display: flex;

        .tabs {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 3px;

            .tab {
                display: flex;
                position: relative;
                z-index: 0;
                justify-content: center;
                align-items: center;
                height: 100%;
                padding: 0 25px;
                margin-right: 10px;
                color: #fff;
                cursor: pointer;
                &:last-child{
                    margin-right: 0;
                }

                &::before {
                    position: absolute;
                    content: "";
                    z-index: 1;
                    width: 100%;
                    height: 100%;
                    transform: skewX(-25deg);
                }

                &::after {
                    position: absolute;
                    content: "";
                    z-index: -1;
                    width: 100%;
                    height: 100%;
                    transform: skewX(-25deg);
                    box-shadow: 0 0 0 1px #277EFF inset;
                }

                &.checked::after {
                    box-sizing: border-box;
                    background: linear-gradient(0deg, #009BFC, #004DE7);
                    box-shadow: none;
                }

                span {
                    font-size: 18px;
                }
            }
        }
    }


}
</style>