<template>
  <el-card :class="{ 'box-card': cardStyle, 'evaluation-margin': withMarginBottom }">
    <el-row :gutter="24">
      <el-col :span="navBackButton ? 22 - slotSpan : 24 - slotSpan">
        <div class="evaluation-title-row">
          {{ title }}
          <span class="evaulation-title-subItem">{{ subTitle }}</span>
        </div>
      </el-col>
      <el-col v-if="slotSpan" :span="slotSpan">
        <solt></solt>
      </el-col>
      <el-col v-if="navBackButton" :span="2" style="text-align: right">
        <el-button @click="navAction ? navAction() : $router.go(-1)" size="small" round>返回</el-button>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    subTitle: {
      type: String,
      default: "",
    },
    navBackButton: {
      type: Boolean,
      default: false,
    },
    slotSpan: {
      type: Number,
      default: 0,
    },
    cardStyle: {
      type: Boolean,
      default: true,
    },
    withMarginBottom: {
      type: Boolean,
      default: true,
    },
    navAction: {
      type: Function,
      default: null,
    },
  },
};
</script>
<style scoped>
.evaluation-margin {
  margin-bottom: 15px;
}

.evaluation-title-row {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  display: flex;
  justify-content: flex-start;
  align-items: baseline;
}

.evaulation-title-subItem {
  color: #999;
  font-size: 12px;
  margin-left: 10px;
}

/deep/ .el-card__body {
  padding: 15px;
}
</style>
