<template>
     <el-card
     class="warp"
     v-bind="$attrs"
     v-on="$attrs"
     >
     <template #header v-if="props.showHeader">
       <div class="header-title">{{$t(route.meta.title as string) || props.headerTitle}}</div>
     </template>
     <slot></slot>
     </el-card>
</template>

<script lang='ts' setup>
import {ref ,onMounted} from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute();
 const props = defineProps({
  headerTitle:{
    type:String,
    default:''
  },
  showHeader:{
    type:Boolean,
    default:true
  }
}) 
onMounted(()=>{
})
</script>

<style scoped lang="scss">
.warp{
  margin-bottom: 18px;
}
  .header-title{
  &::before{
    content: '';
    display: inline-block;
    width: 3px;
    height: 18px;
    background: var(--header-bg-color);
    vertical-align: middle;
    margin-right: 8px;
  }
}
</style>