<template>
  <div class="titled-card" :style="height ? { height: height * 0.01 + 'rem' } : {}">
    <div class="title" :style="{ fontSize: font + 'px' }" v-if="title">{{ title }}</div>
    <div class="card-content">
      <slot></slot>
    </div>
    <div v-if="bottomLine" class="bottom-line"></div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from "vue";

  export default defineComponent({
    props: {
      title: {
        type: String,
      },
      titleMarginTop: {
        type: Number,
        default: 0,
      },
      bottomLine: {
        type: Boolean,
        default: true,
      },
      height: {
        type: Number,
      },
      contentMarginTop: {
        type: Number,
        default: 0,
      },
    },
    setup() {
      const font = ref(16);

      const resizeHandler = () => {
        const dcHeight = document.documentElement.clientHeight;
        if (dcHeight > 1080) {
          font.value = (dcHeight / 1080) * 16;
        }
      };
      resizeHandler();

      window.addEventListener("resize", resizeHandler);

      return {
        font,
      };
    },
  });
</script>

<style lang="less" scoped>
  .titled-card {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    .title {
      line-height: 0.18rem;
      margin: 0.2rem 0 0.12rem;
      font-weight: bold;
      color: rgba(255, 255, 255, 0.9);
      text-align: left;
    }
    .card-content {
      overflow: hidden;
    }
    .bottom-line {
      width: 100%;
      height: 1px;
      background: rgba(255, 255, 255, 0.15);
      margin-top: 0.16rem;
    }
  }
</style>
