<template>
    <div class="custom-header" :style="{background:bgColor}">
        <div class="back" @click="goback">
            <Icon icon="eva:arrow-ios-back-fill" class="icon" />
        </div>
        <div class="title">{{name}}</div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { Icon } from '@iconify/vue'
const router = useRouter();
const props = defineProps({
    name:{
        type:String,
        defalut:''
    },
    bgColor:{
        type:String,
        defalut:'#fff'
    },
    isGoBack:{
        type:Boolean,
        defalut:false
    },
})

const emit = defineEmits(["goback"])


const goback = () => {
  if(!props.isGoBack){
    router.go(-1);
  }else{
    emit('goback')
  }
};

</script>

<style lang="less" scoped>
.custom-header {
    background: #fff;
    width: 100%;
    height: 40px;
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 12;

    .back,
    .close {
        display: flex;
        align-items: center;
        color: #656565;
        position: absolute;
        left: 12px;
        z-index: 10;

        .icon {
            font-size: 22px;
            color: rgba(0, 0, 0, 0.9);
        }
    }

    .title {
        font-weight: bold;
    }
}
</style>