<template>
  <div>
    <view class="status_bar">
      <div class="item" @click="goBack"><u-icon name="arrow-left" size="18" v-show="showBack" /></div>
      <div class="item">{{ title }}</div>
      <div class="item" @click="chickIcon">
        <u-icon :name="rightIcon" v-if="showRightIcon" size="20"></u-icon>
        <u-text v-else-if="showRightText" type="primary" :text="text"></u-text>
      </div>
    </view>
    <div class="status_bar_placeholder"></div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    showBack: {
      type: Boolean,
      default: true
    },
    isBack: {
      type: Boolean,
      default: true
    },
    goTo: {
      type: String,
      default: ''
    },
    rightIcon: {
      type: String,
      default: 'plus'
    },
    showRightIcon: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: ''
    },
  },
  data() {
    return {}
  },
  methods: {
    goBack() {
      if (this.isBack) {
        uni.navigateBack()
      } else {
        if (this.goTo) {
          uni.redirectTo({
            url: this.goTo
          })
        } else {
          uni.redirectTo({
            url: '/pages/index'
          })
        }
      }
    },
    chickIcon() {
      this.$emit('chickIcon')
    }
  }
}
</script>

<style lang="scss">
.status_bar_placeholder {
  height: 135px;
  width: 100%;
}

.status_bar {
  padding: 0 25px;
  width: 100%;
  height: 136px;
  border: 0;
  background: url('/static/images/imgs/nav.png');
  background-size: 100% 100%;
  position: fixed;
  z-index: 99;
  display: flex;
  justify-content: center;
  flex-direction: space-between;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  color: #0f274b;

  .item {
    width: 20%;
    text-align: center;
  }
  .item:nth-child(2) {
    width: 60%;
  }
  .item:nth-child(3) {
    width: 20%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
