<script setup lang="ts" name="PageTitle">
/**
 * 用法说明
  <PageTitle showBackBtn @handlePageBack="handlePageBack">
    <span>新增拟入职申请</span>
    <template #btnList>
      <el-button type="primary">提 交</el-button>
    </template>
  </PageTitle>
 */

import { computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import useSettingsStore from '@/store/modules/settings'
import useAppStore from '@/store/modules/app'
import pageTitleBack from '@/assets/images/pageTitleBack.png'

const route = useRoute()
const settingsStore = useSettingsStore()
const appStore = useAppStore()

const emit = defineEmits<{
  back: []
}>()


const props = withDefaults(defineProps<{
  back?: boolean
  title?: string
}>(), {
  back: false
})

const layout = computed(() => settingsStore.layout)
const titleStr = computed<string>(() => props.title ?? String(route?.meta?.title ?? ''))
const tagsView = computed(() => settingsStore.tagsView)
// 是否存在 侧边栏展开收起按钮
const showHamburger = computed(() => appStore.sidebar.showHamburger)
// 是否存在 侧边栏展开收起按钮 和 header 和 tagsview
const space = computed(() => showHamburger.value && layout.value !== 'comprehensive' && !tagsView.value)

function handlePageBack():void {
  emit('back')
}
</script>

<template>
  <div
    class="page-title"
    :class="{
      'tags-view': !tagsView && layout !== 'comprehensive'
    }">
    <div
      class="page-title-container"
      :class="{
        'hamburger': space
      }">
      <div class="left-part">
        <!-- <img
          v-if="props.back"
          class="page-back-logo"
          :src="pageTitleBack"
          alt=""
          @click="handlePageBack"> -->
        <el-button
          v-if="props.back"
          icon="Back"
          class="page-back-logo"
          link
          size=large
          @click="handlePageBack"/>
        <div class="title">
          <slot name="title">{{ titleStr }}</slot>
        </div>
      </div>
      <div class="right-part">
        <slot name="buttons"/>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-title {
  margin-bottom: var(--container-pd);
  // padding-top: var(--container-pd);
  /* !tagsView  隐藏标签 */
  &.tags-view {
    position: sticky;
    top: 0;
    // padding-top: 0;
    height: var(--navbar-height);
    z-index: 5;
    .page-title-container {
      margin-left: calc(0px - var(--container-pd));
      margin-right: calc(0px - var(--container-pd));
      padding-left: var(--container-pd-inner);
    }
  }

  &-container {
    height: var(--navbar-height);
    border-radius: 4px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 2px 2px 4px  rgba(30, 92, 235, 0.1);
    padding: 0 13px 0 20px;
    transition: var(--el-transition);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 显示侧边栏收起展开按钮时 */
    &.hamburger {
      padding-left: calc(var(--navbar-height) + 12px) !important;
    }
    .left-part {
      display: flex;
      align-items: center;
      .page-back-logo {
        margin-right: 10px;
        width: 12px;
        height: 10px;
        cursor: pointer;
        color: #000;
      }
      .title {
        font-size: 16px;
        color: rgba(46, 46, 46, 1);
      }
    }
    .right-part {
      display: flex;
      align-items: center;
    }
  }

}

</style>
