<template>
  <div class="card-box-bg" :style="cardBoxStyle">
    <div v-if="showTitle" class="card-box-title-box" :style="titleStyle">
      <div class="card-box-title">
        <div
          v-if="showBackBtn"
          style="display: inline-block; cursor: pointer"
          @click="handleBack"
        >
          <i class="el-icon-back"></i>
        </div>
        {{ title }}
      </div>

      <div class="title-btns-slot">
        <slot name="title-btns"></slot>
      </div>
    </div>

    <div class="content" :class="{ 'content-border': !bgImgURL }">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: "CardBox",
  props: {
    // 背景图
    bgImgURL: {
      type: String,
      default: "",
    },
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 不设置bgImgURL时使用
    titleImgURL: {
      type: String,
      default: "",
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
    showBackBtn: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {};
  },

  computed: {
    cardBoxStyle() {
      if (this.bgImgURL) {
        return {
          backgroundImage: "url(" + this.bgImgURL + ")",
          backgroundSize: "cover",
        };
      } else {
        return {};
      }
    },
    titleStyle() {
      if (this.titleImgURL) {
        return {
          backgroundImage: "url(" + this.titleImgURL + ")",
          backgroundSize: "cover",
        };
      } else {
        return {};
      }
    },
  },

  created() {},

  beforeDestroy() {},

  methods: {
    handleBack() {
      this.$emit("onBack");
    },
  },
};
</script>

<style scoped>
.card-box-bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
}

.card-box-title-box {
  display: flex;
  flex-direction: row;
}

.card-box-title {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
  margin-left: 60px;
  flex: 2;
  z-index: 1;
}

.title-btns-slot {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 2px;
  padding-right: 5px;
}

.content-border {
  /* 分割线 */
  border: 1px solid #40486a;
}

.content {
  flex: 1;
  height: 0;
  padding: 15px;
}
</style>
