<template>
  <div class="page-title">
    <div
      class="page-title-container">
      <div class="left-part">
        <el-button
          v-if="back"
          icon="el-icon-back"
          class="page-back-logo"
          type="text"
          size="large"
          @click="handlePageBack"
        />
        <div class="title">
          <slot>{{ titleStr }}</slot>
        </div>
      </div>
      <div class="right-part">
        <slot name="buttons" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageTitle',
  props: {
    back: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      settingsStore: null,
      appStore: null,
      route: null
    }
  },
  computed: {
   
    titleStr() {
      return this.title || String(this.route?.meta?.title || '')
    },

  },
  mounted() {
    // 模拟 Vue 3 的 store 和 route
    this.initStores()
  },
  methods: {
    initStores() {
      // 这里需要根据您的实际 store 结构进行调整
      // 假设您有类似 Vuex store 的结构
      try {
        this.settingsStore = this.$store?.state?.settings || {}
        this.appStore = this.$store?.state?.app || {}
        this.route = this.$route || {}
      } catch (error) {
        console.warn('Store or route not available, using default values')
        this.settingsStore = {}
        this.appStore = {}
        this.route = {}
      }
    },
    handlePageBack() {
      this.$emit('back')
    }
  }
}
</script>

<style lang="scss" scoped>
.page-title {
  margin-bottom: 10px;
  
   .page-title-container {
      height: 48px;
      padding: 0  20px;
      display: flex;
      justify-content: space-between;
      border-radius: 4px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 2px 2px 4px  rgba(30, 92, 235, 0.1);
      align-items: center;
      .left-part { 
        font-size: 16px;
        color: rgb(46, 46, 46);
      }
    }
}
</style>