<template>
  <!--标题-->
  <div class="title title_border p0-16">
    <!-- 返回icon -->
    <i v-if="isBack" class="iconfont icon-fanhui pointer" @click="handleBack" />
    <!-- 主页icon -->
    <i v-else class="el-icon-s-home" />
    <slot name="header" />
  </div>
</template>

<script>
export default {
  name: 'TableHeaderTitleVue',
  props: {
    /* 返回按钮*/
    onBackBtn: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      isBack: typeof this.onBackBtn === 'function' // 当状态是否为可返回按钮展示 false 否 true 是
    }
  },
  methods: {
    handleBack() {
      this.onBackBtn()
    }
  }
}
</script>

<style scoped lang="less">
  //项目列表模块标题
  .title {
    height: 40px;
    line-height: 39px;
    font-weight: bold;

    // .iconfont {
    //   color: #007CCC;
    //   margin-right: 19px;
    // }
  }

  // 项目模块标题边框
  .title_border {
    box-shadow: 0px 1px 0px 0px rgba(238, 238, 238, 1), 0px 1px 0px 0px rgba(238, 238, 238, 1);
  }
</style>
