<template>
  <div
    class="common-card"
    :style="{ '--cardWidth': cardWidth, '--cardLabout': cardLabout, '--cardHeight': cardHeight }"
  >
    <div class="common-card-head">
      <span class="common-card-head-tit">{{ hearderTitle }}</span>
      <t-tooltip v-if="tipsVisable" :content="tipsContent" placement="top" show-arrow>
        <icon name="info-circle" size="medium" style="color: #9b9b9b" />
      </t-tooltip>
    </div>
    <slot></slot>
  </div>
</template>

<script>
import { Icon } from 'tdesign-icons-vue';

export default {
  name: 'common-card',
  components: { Icon },
  props: {
    /**
     * 卡片标题
     */
    hearderTitle: {
      type: String,
      default: '',
      require: true,
    },
    /**
     * 提示语图标显示控制
     */
    tipsVisable: {
      type: Boolean,
      default: false,
    },
    /**
     * 标题旁的悬浮提示语
     */
    tipsContent: {
      type: String,
      default: '',
    },
    /**
     * 卡片宽度
     */
    cardWidth: {
      type: String,
      default: '100%',
    },
    /**
     * 卡片高度
     */
    cardHeight: {
      type: String,
      default: '',
    },
    /**
     * 卡片布局方式
     */
    cardLabout: {
      type: String,
      default: 'block',
    },
  },
};
</script>

<style lang="less" scoped>
.common-card {
  display: var(--cardLabout);
  width: var(--cardWidth);
  height: var(--cardHeight);
  padding: 16px;
  margin-bottom: 24px;
  vertical-align: top;
  background: #f8fbfc;
  border-radius: 4px;
  &-head {
    padding-bottom: 12px;
    margin-bottom: 24px;
    border-bottom: 2px solid #eef1f2;
  }
  &-head-tit {
    display: inline-block;
    height: 16px;
    padding: 0 8px;
    font-weight: bold;
    line-height: 16px;
    border-left: 4px solid #0084f3;
  }
}
</style>
