<template>
  <!-- 创建一个带有 page-header 类名的 div 容器，作为页面头部的外层包裹元素 -->
  <div class="page-header">
    <!-- 创建一个带有 page-header-index-wide 类名的 div 容器，可能用于页面头部的特定布局或样式控制 -->
    <div class="page-header-index-wide">
      <!-- 使用 s-breadcrumb 组件，可能用于展示面包屑导航（具体功能取决于该组件的实现） -->
      <s-breadcrumb />
      <!-- 创建一个名为 detail 的 div 容器，用于放置页面头部更详细的内容 -->
      <div class="detail">
        <!-- 条件判断，如果路由元信息中的 hiddenHeaderContent 为 false，则展示以下内容 -->
        <div class="main" v-if="!$route.meta.hiddenHeaderContent">
          <!-- 创建一个 row 类名的 div 容器，可能用于布局，类似行的概念 -->
          <div class="row">
            <!-- 如果 logo 属性有值，则展示对应的图片，图片的源地址由 logo 属性绑定，并且添加 logo 类名用于样式控制 -->
            <img v-if="logo" :src="logo" class="logo"/>
            <!-- 如果 title 属性有值，则展示对应的标题内容，使用双大括号进行数据绑定，展示 title 属性的值，并添加 title 类名用于样式控制 -->
            <h1 v-if="title" class="title">{{ title }}</h1>
            <!-- 创建一个名为 action 的 div 容器，用于放置具名插槽内容，可能是一些操作按钮之类的元素 -->
            <div class="action">
              <slot name="action"></slot>
            </div>
          </div>
          <!-- 再创建一个 row 类名的 div 容器，继续放置页面头部的其他元素 -->
          <div class="row">
            <!-- 如果 avatar 属性有值，则展示对应的头像元素，使用 a-avatar 组件展示，图片源地址由 avatar 属性绑定 -->
            <div v-if="avatar" class="avatar">
              <a-avatar :src="avatar" />
            </div>
            <!-- 如果有名为 content 的插槽内容，则展示对应的插槽内容，并添加 headerContent 类名用于样式控制 -->
            <div v-if="this.$slots.content" class="headerContent">
              <slot name="content"></slot>
            </div>
            <!-- 如果有名为 extra 的插槽内容，则展示对应的插槽内容，并添加 extra 类名用于样式控制 -->
            <div v-if="this.$slots.extra" class="extra">
              <slot name="extra"></slot>
            </div>
          </div>
          <!-- 放置一个用于名为 pageMenu 的插槽内容的容器，可能用于展示页面相关的菜单选项等 -->
          <div>
            <slot name="pageMenu"></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 从项目相对路径 '../../components/tools/Breadcrumb' 导入 Breadcrumb 组件（可能用于面包屑导航功能）
import Breadcrumb from '../../components/tools/Breadcrumb'

export default {
  name: 'PageHeader',
  components: {
    // 将导入的 Breadcrumb 组件注册为名为 s-breadcrumb 的组件，方便在模板中使用
    's-breadcrumb': Breadcrumb
  },
  props: {
    // 定义 title 属性，类型可以是字符串或者布尔值，默认值为 true，非必需属性
    title: {
      type: [String, Boolean],
      default: true,
      required: false
    },
    // 定义 logo 属性，类型为字符串，默认值为空字符串，非必需属性
    logo: {
      type: String,
      default: '',
      required: false
    },
    // 定义 avatar 属性，类型为字符串，默认值为空字符串，非必需属性
    avatar: {
      type: String,
      default: '',
      required: false
    }
  },
  data () {
    return {}
  }
}
</script>

<style lang="less" scoped>
// 对类名为 page-header 的元素设置样式
.page-header {
  // 设置背景颜色为白色
  background: #fff;
  // 设置内边距，上内边距 16px，左右内边距 32px，下内边距 0
  padding: 16px 32px 0;
  // 设置底部边框，宽度 1px，颜色为浅灰色（#e8e8e8）
  border-bottom: 1px solid #e8e8e8;

  .breadcrumb {
    // 设置面包屑导航组件的底部外边距为 16px
    margin-bottom: 16px;
  }

  .detail {
    // 设置为弹性布局，方便内部元素进行灵活排列
    display: flex;
    /*margin-bottom: 16px;*/

    .avatar {
      // 设置弹性伸缩属性，不自动缩放，初始宽度为 72px
      flex: 0 1 72px;
      // 设置外边距，右边距 24px，底部距 8px
      margin: 0 24px 8px 0;

      & > span {
        // 设置边框圆角为 72px，使其呈现圆形（用于头像等元素）
        border-radius: 72px;
        // 设置为块级元素
        display: block;
        // 设置宽度为 72px
        width: 72px;
        // 设置高度为 72px
        height: 72px;
      }
    }

    .main {
      // 宽度占满父元素
      width: 100%;
      // 设置弹性伸缩属性，不自动缩放，根据内容自动调整宽度
      flex: 0 1 auto;

      .row {
        // 设置为弹性布局，方便内部元素按行排列
        display: flex;
        // 宽度占满父元素
        width: 100%;

        .avatar {
          // 设置头像元素底部外边距为 16px
          margin-bottom: 16px;
        }
      }

      .title {
        // 设置字体大小为 20px
        font-size: 20px;
        // 设置字体粗细为 500
        font-weight: 500;

        font-size: 20px;
        line-height: 28px;
        font-weight: 500;
        // 设置字体颜色，带有一定透明度的黑色（rgba 颜色模式）
        color: rgba(0, 0, 0, 0.85);
        // 设置底部外边距为 16px
        margin-bottom: 16px;
        // 设置元素在弹性布局中自动填充剩余空间
        flex: auto;
      }
      .logo {
        // 设置宽度为 28px
        width: 28px;
        // 设置高度为 28px
        height: 28px;
        // 设置边框圆角为 4px
        border-radius: 4px;
        // 设置右边距为 16px
        margin-right: 16px;
      }
      .content,
      .headerContent {
        // 设置元素在弹性布局中自动填充剩余空间
        flex: auto;
        // 设置字体颜色，带有一定透明度的灰色（rgba 颜色模式）
        color: rgba(0, 0, 0, 0.45);
        // 设置行高为 22px
        line-height: 22px;

        .link {
          // 设置顶部外边距为 16px
          margin-top: 16px;
          // 设置行高为 24px
          line-height: 24px;

          a {
            // 设置字体大小为 14px
            font-size: 14px;
            // 设置右边距为 32px
            margin-right: 32px;
          }
        }
      }
      .extra {
        // 设置弹性伸缩属性，不自动缩放，根据内容自动调整宽度
        flex: 0 1 auto;
        // 设置左边距为 88px
        margin-left: 88px;
        // 设置最小宽度为 242px
        min-width: 242px;
        // 设置文本对齐方式为右对齐
        text-align: right;
      }
      .action {
        // 设置左边距为 56px
        margin-left: 56px;
        // 设置最小宽度为 266px
        min-width: 266px;
        // 设置弹性伸缩属性，不自动缩放，根据内容自动调整宽度
        flex: 0 1 auto;
        // 设置文本对齐方式为右对齐
        text-align: right;
        &:empty {
          // 如果该元素内部为空，则隐藏该元素
          display: none;
        }
      }
    }
  }
}

// 针对类名为 mobile 的父元素下的 page-header 元素设置特定样式（可能用于移动端适配）
.mobile.page-header {
  .main {
    .row {
      // 设置弹性布局换行，当空间不足时内部元素会自动换行
      flex-wrap: wrap;

      .avatar {
        // 调整头像元素在移动端的弹性伸缩属性，初始宽度占比等
        flex: 0 1 25%;
        // 设置外边距，右边距 2%，底部距 8px
        margin: 0 2% 8px 0;
      }

      .content,
      .headerContent {
        // 调整内容区域在移动端的弹性伸缩属性，初始宽度占比等
        flex: 0 1 70%;

        .link {
          // 设置顶部外边距为 16px
          margin-top: 16px;
          // 设置行高为 24px
          line-height: 24px;

          a {
            // 设置字体大小为 14px
            font-size: 14px;
            // 设置右边距为 10px
            margin-right: 10px;
          }
        }
      }

      .extra {
        // 调整额外内容区域在移动端的弹性伸缩属性，使其更灵活自适应等
        flex: 1 1 auto;
        // 清除左边距
        margin-left: 0;
        // 最小宽度设置为 0，更灵活适配移动端屏幕宽度
        min-width: 0;
        // 设置文本对齐方式为右对齐
        text-align: right;
      }

      .action {
        // 清除左边距的自定义设置（恢复默认或按其他规则）
        margin-left: unset;
        // 设置最小宽度为 266px
        min-width: 266px;
        // 设置弹性伸缩属性，不自动缩放，根据内容自动调整宽度
        flex: 0 1 auto;
        // 设置文本对齐方式为左对齐
        text-align: left;
        // 设置底部外边距为 12px
        margin-bottom: 12px;

        &:empty {
          // 如果该元素内部为空，则隐藏该元素
          display: none;
        }
      }
    }
  }
}
</style>