<template>
    <div class="ht-base-page-header">
            <div class="ht-page-header-back">
                <div role='button' tabindex="0" class="ht-page-header-back-button" aria-label="返回" style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;outline: none;" @click="pageHeaderBack">
                    <ht-base-icon :type='backIcon' style="cursor: pointer;width:14px;height: 14px;"></ht-base-icon>
                </div>
                <div class="ht-divider ht-divider-vertical"></div>
            </div>
            <div class="ht-page-header-heading">
                <span class="ht-page-header-heading-title">{{title}}</span>
                <span class="ht-page-header-heading-sub-title">{{subTitle}}</span>
            </div>
    </div>
</template>

<script>
  export default {
    name: 'HtBasePageHeader',
      props:{
        title:{
            type:String,
            default:''
        },
         subTitle:{
             type:String,
             default:''
          },
          backIcon:{
            type:String,
            default:''
          }
      },
      methods:{
          pageHeaderBack(){
              this.$emit('onback')
          }
      }
  }
</script>
<style lang="less">
    .ht-page-header-back-button:hover{
        .ht-base-icon.uedicon.ht-base-LiRa_left{
            color: #4dacff;
        }
    }
    .ht-page-header-back-button:active{
        .ht-base-icon.uedicon.ht-base-LiRa_left{
            color: #136cd1;
        }
    }
</style>

