/**
* @Author Think
* @Date 2018/11/24
*/

<template>
  <header :class="[borderCss,cusClass]" class="h-header">
    <!--左侧按钮-->
    <section :style="{'flex':proportion[0] }" class="h-header-left">
      <slot name="left"/>
    </section>
    <!--中间Title-->
    <h1 :style="{'flex':proportion[1] }" class="h-header-center">
      <slot name="center"/>
    </h1>
    <!--右侧区域-->
    <section :style="{'flex':proportion[2] }" class="h-header-right">
      <slot name="right"/>
    </section>
  </header>
</template>

<script>
export default {
  name: 'HHeader',
  props: {
    proportion: {
      //  slot left/center/right 横向面积比例
      type: Array,
      default: () => [1, 2, 1],
    },
    hasBorder: {
      type: Boolean,
      default: true,
    },
    cusClass: {
      type: String,
      default: '',
    },
  },
  computed: {
    borderCss () {
      return this.hasBorder === true ? 'vue-1px-b' : ''
    },
  },
}
</script>

<style lang="less">

  .h-header {
    flex-shrink: 0;
    height: 44px;
    background: #fff;
    display: flex;
    align-items: center;
    color: #4A4A4A;
    box-sizing: content-box;
    overflow: hidden;
    position: relative;
    z-index: 5;
    width: 100%;

    .h-header-center {
      flex: 1;
      font-size: 17px;
      font-weight: 500;
      line-height: 44px;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      padding: 0;
      margin: 0;

      > * {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .h-header-left, .h-header-right {
      flex: 0.5;
      height: 100%;
      white-space: nowrap;
      overflow: hidden;
    }

    .h-header-left {
      text-align: left;

      .h-header-btn {
        &:first-of-type {
          padding-left: 15px;
        }
      }
    }

    .h-header-right {
      text-align: right;

      .h-header-btn {
        justify-content: flex-end;

        &:last-of-type {
          padding-right: 15px;
        }
      }
    }

    // 头部按钮的推荐样式
    .h-header-btn {
      display: inline-flex;
      align-items: center;
      font-size: 16px;
      min-width: 60px;
      height: 100%;
      overflow: hidden;
      vertical-align: middle;
      box-sizing: border-box;
      width: 80%;
      color:@headerColor;
    }

    .ion-ios-arrow-back {
      font-size: 32px;
      //color: @headerColor;
    }

  }

  .h-header-border {
    border-bottom: 1px solid rgba(0, 0, 0, .1); /*no*/
  }
  .bar-custom {
    background-color: @headerColor;
    border-bottom: none;
    .buttons {
      .button {
        color: #fff;
      }
    }
    .title {
      color: #fff;
    }
    .h-header-left, .h-header-right{
      .h-header-btn{
        color: #fff;
      }
    }
    .h-header-center{
      color: #fff;
    }
  }

  // ios平台
  .platform-ios .h-header {
    padding-top: 20px;
  }

  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      .h-header {
        padding-top: 40px;
      }
    }
  }

  // iPhoneX Max适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      .h-header {
        padding-top: 40px;
      }
    }
  }
</style>
