<template>
  <div class="aos-main-title">
    <div class="aos-main-title__header" v-if="titleName">
      <div class="aos-main-title-left" v-if="titleName">
        <div class="aos-main-title__left-container">
          <span class="aos-main-title__title-name-border"></span>
          <span class="aos-main-title-name">{{titleName}}</span>
        </div>
        <span class="aos-main-title-subName">{{subTitleName}}</span>
      </div>
      <div class="aos-main-title-right" v-if="$slots.default">
        <slot></slot>
      </div>
    </div>
    <div class="aos-main-title__body-header" v-if="$slots.header || $slots['header-right']">
      <div class="aos-main-title__body-header-container" v-if="$slots.header">
        <slot name="header"></slot>
      </div>
      <div class="aos-main-title__body-header-right" v-if="$slots['header-right']">
        <slot name="header-right"></slot>
      </div>
    </div>
    <div class="aos-main-title__body" v-if="$slots.body">
      <slot name="body"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "AosMainTitle",
  componentName: "AosMainTitle",
  data() {
    return {
      breadcrumbList: []
    };
  },
  props: {
    name: {
      type: String,
      required: false
    },
    titleName: {
      type: String,
      required: false
    },
    subTitleName: {
      type: String,
      default: ""
    },
    autoHeight: {
      type: Boolean,
      default: false
    }
  }
  // methods:{
  //   init(){
  //     let breadCrumbStack = window.AosApp.appTab.breadCrumbStack;
  //     let currPath =  this.$route.fullPath;
  //     for(var i = 0;i< breadCrumbStack.length;i++){
  //       if(currPath === breadCrumbStack[i]){
  //         breadCrumbStack.splice(i,breadCrumbStack.length - 1);
  //         window.AosApp.appTab.breadCrumbStack = breadCrumbStack;
  //         this.breadcrumbList = window.AosApp.appTab.breadCrumbStack;
  //         break;
  //       }else {
  //         this.breadcrumbList = [{ name: this.name, path: {path:currPath}}];
  //       }
  //     }
  //   }
  // },
  // mounted(){
  //   this.init();
  // },
  // watch:{
  //   name: function(val){
  //     this.init();
  //   }
  // }
};
</script>
