<template>
  <header
    class="co-header theme-icon-color theme-background-color"
    :class="{ 'is-fixed': fixed }">
    <div class="co-header-button is-left">
      <slot name="left"></slot>
    </div>
    <slot name="title">
      <h1 class="co-header-title" v-text="title"></h1>
    </slot>
    <div class="co-header-button is-right">
      <slot name="right"></slot>
    </div>
  </header>
</template>

<script>
/**
 * co-header
 * @module components/header
 * @desc 顶部导航
 * @param {boolean} [fixed=false] - 固定顶部
 * @param {string} [title] - 标题
 * @param {slot} [left] - 显示在左侧区域
 * @param {slot} [right] - 显示在右侧区域
 *
 * @example
 * <co-header title="我是标题" fixed>
 *   <co-button slot="left" icon="back" @click="handleBack">返回</co-button>
 *   <co-button slot="right" icon="more"></co-button>
 * </co-header>
 */
export default {
  name: 'co-header',

  props: {
    fixed: Boolean,
    title: String
  }
};
</script>

<style lang="css">
  @import "../../../src/style/var-ios9.css";

  @component-namespace co {
    @component header {
      align-items: center;
      background-color: $color-blue;
      box-sizing: border-box;
      color: $color-header-title;
      display: flex;
      font-size: 0.8rem;
      height: $coui-header-height;
      line-height: 1;
      padding: 0 0.3rem;
      position: relative;
      text-align: center;
      white-space: nowrap;
      box-shadow:0.05rem 0.05rem 0.15rem rgba(0,0,0,0.1);
      .co-button {
        background-color: transparent;
        border: 0;
        box-shadow: none;
        color: $color-header-button;
        display: inline-block;
        padding: 0;
        font-size: inherit;

        &::after {
          content: none;
        }
      }

      @descendent button {
        flex: .5;

        > a {
          color: inherit;
        }

        @when left {
          text-align: left;
        }

        @when right {
          text-align: right;
        }
      }

      @descendent title {
        @utils-ellipsis;
        font-size: inherit;
        font-weight: normal;
        flex: 1;
      }

      @when fixed {
        position: fixed 0 0 * 0;
        z-index: $z-index-normal;
      }
    }
  }
</style>
