<template>
  <el-row class="page-header">
    <slot name="title"><span class="header-title">{{ title }}</span></slot>
    <slot name="subTitle"><span class="header-subtitle">{{ subTitle }}</span></slot>
    <div class="right">
      <slot name="right">
        <el-button size="medium" type="text" @click="$router.go(-1)" v-if="showBack">
          <!--<svg-icon icon-class="back"/>-->
          返回
        </el-button>
      </slot>
    </div>
    <slot></slot>
    <div class="page-header-footer">
      <slot name="footer"></slot>
    </div>
  </el-row>
</template>

<script>
export default {
  name: 'PageHeader',
  props: {
    title: {
      type: String,
      default: ''
    },
    subTitle: {
      type: String,
      default: ''
    },
    showBack: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .page-header {
    padding: 10px 15px 0 15px;
    background: #fff;
    /*margin-bottom: 10px;*/
    .header-title{
      display: inline-block;
      padding-right: 12px;
      color: rgba(0,0,0,0.85);
      font-weight: bold;
      font-size: 20px;
      line-height: 40px;
    }
    .header-subtitle{
      display: inline-block;
      padding-right: 12px;
      color: rgba(0,0,0,0.45);
      font-size: 14px;
    }
    .right{
      float: right;
      line-height: 40px;
    }
    .page-header-footer{
      margin-top: 0.3rem;
      .el-tabs__header{
        margin-bottom: 0;
      }
      .el-tabs__nav-wrap::after{
        height: 0;
      }
    }
  }
</style>
