<template>
  <div class="sv-bar" :class="[typeClass, {'is-fixed': fixed}, colorClass]" :style="style">
    <div class="sv-bar-left">
      <div class="sv-bar-nav" v-if="type === 'nav'" @click="back">
        <sv-icon icon="arrow-left" size="large"></sv-icon>
        <span v-if="text">{{text}}</span>
      </div>
      <template v-else>
        <slot name="left"></slot>
      </template>
    </div>
    <div class="sv-bar-title">
      <slot>{{title}}</slot>
    </div>
    <div class="sv-bar-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
  import contants from '../../scripts/var'
  export default {
    name: 'svBar',
    data () {
      return {
        htmlFontSize: contants.getDesignDraftHtmlFontSize()
      }
    },
    props: {
      type: {
        type: String,
        default: 'bar',
        optional: 'header, subheader, footer，nav'
      },
      title: {
        type: String
      },
      fixed: {
        type: Boolean,
        default: true
      },
      hasBack: {
        type: Boolean,
        default: false
      },
      color: {
        type: String,
        default: 'light'
      },
      text: String,
      height: [String, Number],
      top: [String, Number],
      right: [String, Number],
      bottom: [String, Number],
      left: [String, Number]
    },
    computed: {
      style () {
        let style = {}
        if (this.height) {
          style.height = `${this.height / this.htmlFontSize}rem`
        }
        if (this.bottom) {
          style.bottom = `${this.bottom / this.htmlFontSize}rem`
        }
        if (this.left) {
          style.left = `${this.left / this.htmlFontSize}rem`
        }
        if (this.right) {
          style.right = `${this.right / this.htmlFontSize}rem`
        }
        if (this.top) {
          style.top = `${this.top / this.htmlFontSize}rem`
        }

        return style
      },
      typeClass () {
        let types = ['header', 'subheader', 'footer', 'nav']
        if (types.indexOf(this.type) !== -1) {
          return `sv-${this.type}`
        }
        return null
      },
      colorClass () {
        if (!this.color) {
          return
        }
        return `sv-bar-${this.color}`
      }
    },
    methods: {
      back () {
        this.$router.back()
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
  @mixin bar-content-color-light{
    .sv-bar-title, .sv-bar-left, .sv-bar-right{
      color: $color-light;
    }
  }
  .sv-bar{
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: pxToRem(0 20);
    height: pxToRem(100);
    line-height: 1;
    text-align: center;
    background: #fff;
    font-size: pxToRem(30);
    &.is-fixed{
      position: fixed;
      left:0;
      right:0;
      z-index:1;
      border-bottom: 1px solid $bar-border-color;
      &.sv-header, .sv-nav{
        top: 0;
      }
      &.sv-subheader{
        top: pxToRem(100);
      }
      &.sv-footer{
        bottom: 0;
      }
    }
    .sv-bar-left{
      flex: .5;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .sv-bar-nav{
        display: flex;
        align-items: center;
      }
    }
    .sv-bar-title{
      flex: 1;
      color: #333;
      .sv-input-wrapper{
        height: pxToRem(60);
        /*border: 1px solid #999;*/
        border: pxToRem(1) solid $input-border-color;
        border-radius: pxToRem(30);
        font-size: pxToRem(26);
        .sv-input-icon{
          width: auto;
          line-height: pxToRem(60);
          background: none;
          border-left:none;
          color:#aaa;
          font-size: pxToRem(32);
        }
        .sv-input{
          height: 100%;
          padding-right: pxToRem(20);
          background: transparent;
          outline: none;
          border:none;
          font-size: pxToRem(26);
        }
      }
    }
    .sv-bar-right{
      flex: .5;
      display: flex;
      justify-content: flex-end;
      .sv-button{
        padding: 0;
      }
    }
    &.sv-bar-light{
      background: $color-light;
      .sv-bar-left{
        .back-icon{
          color:#999;
        }
      }
      .sv-bar-title{
        color:#333;
      }
    }
    &.sv-bar-primary{
      background: $color-primary;
      @include bar-content-color-light;
    }
    &.sv-bar-success{
      background: $color-success;
      @include bar-content-color-light;
    }
    &.sv-bar-danger{
      background: $color-danger;
      @include bar-content-color-light;
    }
    &.sv-bar-warning{
      background: $color-warning;
      @include bar-content-color-light;
    }
    &.sv-bar-info{
      background: $color-info;
      @include bar-content-color-light;
    }
    &.sv-bar-lively{
      background: $color-lively;
      @include bar-content-color-light;
    }
    &.sv-bar-royal{
      background: $color-royal;
      @include bar-content-color-light;
    }
    &.sv-bar-stable{
      background: $color-stable;
      @include bar-content-color-light;
    }
  }
</style>
