<script setup lang="ts">
import { ElCard, ElTooltip } from 'element-plus'
import { propTypes } from '../../../utils/propTypes'
import { useDesign } from '../../../hooks/web/useDesign'
import { useRouter } from 'vue-router'

const { go } = useRouter()

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('content-wrap')

defineProps({
  title: propTypes.string.def(''),
  message: propTypes.string.def(''),
  showBack: propTypes.bool.def(false)
})
</script>

<template>
  <ElCard :class="[prefixCls]" shadow="never">
    <template v-if="title" #header>
      <div class="flex items-center">
        <div class="flex mr-20px back-button" v-if="showBack !== false">
          <BaseButton icon="ArrowLeft" @click="go(-1)">返回</BaseButton>
        </div>
        <span class="text-16px font-700">{{ title }}</span>
        <ElTooltip v-if="message" effect="dark" placement="right">
          <template #content>
            <div class="max-w-200px">{{ message }}</div>
          </template>
          <Icon class="ml-5px" icon="vi-bi:question-circle-fill" :size="14" />
        </ElTooltip>
        <div class="flex pl-20px flex-grow">
          <slot name="header"></slot>
        </div>
        <!-- 右侧部分-->
        <div class="ml-20px">
          <slot name="right"></slot>
        </div>
      </div>
    </template>
    <div>
      <slot></slot>
    </div>
  </ElCard>
</template>

<style scoped lang="less">
// 弹窗里 不显示返回按钮
.el-dialog {
  .back-button {
    display: none;
  }
}
</style>
