<!--
/* @name    头部组件
 * @authors pen (you@example.org)
 * @date    2022-02-28
 * @version 1.0.1
 */
 -->
 <template>
  <div class="header_view">
    <title-view :pageTitle="pageTitle">
      <template #titleSlot>
        <slot name="titleSlot"></slot>
      </template>
      <template #titleRightSlot>
        <slot name="titleRightSlot"></slot>
      </template>
    </title-view>
    <div class="hearder_right">
      <div class="setting_button_view">
        <slot name="buttonSlot"></slot>
        <button-view
          v-if="buttons.length"
          :buttons="buttons"
          @button-click="buttonClick"
        >
          <template
            v-for="item in buttons.length
              ? buttons.filter(p => p.customSlot)
              : []"
            v-slot:[item.customSlot]="slotProps"
          >
            <slot
              :name="item.customSlot"
              v-bind:customSlotData="slotProps.customSlotData"
            ></slot>
          </template>
        </button-view>
      </div>
      <span v-if="buttons.length" class="header_middle_line"></span>
      <tools-view v-if="showToolsView" v-bind="$attrs" v-on="$listeners" />
    </div>
  </div>
</template>
<script>
import buttonView from './buttons.vue'
import toolsView from './tools.vue'
import titleView from './baseView/title'
export default {
  name: 'header-view',
  components: {
    buttonView,
    toolsView,
    titleView
  },
  props: {
    pageTitle: String, //页面标题
    showToolsView: {
      type: Boolean,
      default: true
    },
    buttons: {
      type: Array,
      default: () => []
    } //按钮组
  },
  methods: {
    buttonClick(arg) {
      this.$emit('button-click', arg)
    }
  }
}
</script>
<style scoped lang="less">
.header_view {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  .hearder_right {
    display: flex;
    align-items: center;
    .setting_button_view {
      display: flex;
      align-items: center;
    }
    .header_middle_line {
      width: 1px;
      height: 32px;
      background: #d2d2d7;
      margin: 0 10px;
    }
  }
}
</style>
