<!--
  用于 UI状态栏 高度站位
  说明：加入组件并不会开启站位，还需要开启站位功能
  参数：
    frontColor 状态栏字体颜色
    bgColor 状态栏背景色
    statusBaShow 是否开启站位
  方法：
    statusBaShowEvent 开启站位
    statusBaCloseEvent  关闭站位
 -->

<template>
  <view class="">
    <view v-if="!!bgPattern && setNavigationBarColorShow">
      <view :style="bgPattern" />
      <view class="bg" :style="bgPattern" />
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      // 状态栏字体颜色
      frontColor: {
        type: String,
        default: '#ffffff'
      },
      // 状态栏背景色
      bgColor: {
        type: String,
        default: '#000000'
      },
      // 是否开启站位
      statusBaShow: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        CustomBar: this.CustomBar,
        StatusBar: this.StatusBar,
        setNavigationBarColorShow: false,
        bgPattern: ''
      }
    },
    created() {
      if (this.statusBaShow) {
        this.statusBaShowEvent();
      }
    },
    methods: {
      statusBaCloseEvent() {
        this.setNavigationBarColorShow = false;
      },
      // 调整页眉颜色 并 开启站位
      statusBaShowEvent() {
        let _this = this;
        _this.setNavigationBarColorShow = true;
        uni.setNavigationBarColor({
          frontColor: _this.frontColor, // 前景色值，包括按钮、标题、状态栏的颜色
          backgroundColor: _this.bgColor, // 背景颜色值
          animation: { // 动画效果
            duration: 400,
            timingFunc: 'easeIn'
          },
          success: function(obj) {
            // 固定页面高度和颜色
            _this.bgPattern = 'height:' + (_this.StatusBar) + 'px; ' +
              'background-color: ' + _this.bgColor + ';';
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .bg {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
  }
</style>
