<template>
  <div class="chart-card">
    <div v-if="title || $slots.headerExtra" class="card-header">
      <div class="card-title-bar">
        <img
          class="card-title-bg"
          src="/images/小标题背景.png"
          alt=""
        />
        <h3 v-if="title" class="card-title">{{ title }}</h3>
        <div v-if="$slots.headerExtra" class="card-title-extra">
          <slot name="headerExtra"></slot>
        </div>
      </div>
    </div>

    <div class="card-content" :class="{ 'no-header': !title && !$slots.headerExtra }">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: ''
  }
})
</script>

<style scoped>
.chart-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: visible;
  box-sizing: border-box;
}

.card-header {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  padding: 4px 8px 8px 0;
  overflow: visible;
}

.card-title-bar {
  position: relative;
  width: 100%;
  height: 30px;
  overflow: visible;
}

.card-title-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 30px;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.card-title {
  position: absolute;
  left: 0;
  top: -11px;
  z-index: 1;
  display: block;
  width: auto;
  max-width: calc(100% - 250px);
  margin: 0;
  padding: 0 0 0 47px;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
  height: 32px;
  line-height: 32px;
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-title-extra {
  position: absolute;
  right: 6px;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  overflow: visible;
}

.card-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 2px 8px 8px;
  position: relative;
  z-index: 2;
}

.card-content.no-header {
  padding-top: 12px;
}
</style>
