<template>
  <el-card class="el-content-wrap mb-3px" shadow="never">
    <!-- 标题头部 -->
    <template v-if="title" slot="header">
      <div class="flex items-center">
        <span class="text-16px font-700">{{ title }}</span>

        <el-tooltip v-if="message" effect="dark" placement="right">
          <template slot="content">
            <div class="max-w-200px">{{ message }}</div>
          </template>
          <icon :size="14" class="ml-5px" icon="ep:question-filled" />
        </el-tooltip>
      </div>
    </template>

    <!-- 默认插槽 -->
    <div>
      <slot />
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'ContentWrap',
  props: {
    title: { type: String, default: '' },
    message: { type: String, default: '' }
  }
}
</script>

<style scoped lang="scss">
/* 直接写死前缀，无需任何变量 */
.el-content-wrap {
  /* 需要自定义样式就写这里 */
}
.text-16px   { font-size: 16px; }
.font-700    { font-weight: 700; }
.ml-5px      { margin-left: 5px; }
.max-w-200px { max-width: 200px; }
.mb-3px      { margin-bottom: 3px; }
</style>