<template>
  <view>
    <view class="custom-navigation">
      <text
        class="back-icon"
        @click="back"
        :style="`color:${navigationBarTextColor}`"
        >{{ backIcon }}</text
      >
      <text class="title" :style="`color:${navigationBarTextColor}`"
        >自定义导航栏</text
      >
    </view>
    <page-head title="setCustomNavigationBarColor"></page-head>
    <view class="uni-padding-wrap uni-common-mt">
      <button @tap="setNavigationBarColor1" class="uni-btn">
        设置自定义导航栏前景色白色
      </button>
      <button @tap="setNavigationBarColor2" class="uni-btn">
        设置自定义导航栏前景色黑色
      </button>
    </view>
  </view>
</template>

<script lang="uts">
import { state, setLifeCycleNum } from '@/store/index.uts'

export default {
  data() {
    return {
      backIcon: '\ue582',
      navigationBarTextColor: '#fff'
    }
  },
  onShow(){
    uni.loadFontFace({
      family: 'UniFontFamily',
      source: 'static/font/uni.ttf'
    })
  },
  methods: {
    back(){
      uni.navigateBack()
    },
    setNavigationBarColor1() {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#0000',
        success: () => {
          this.navigationBarTextColor = '#fff'
          console.log('setNavigationBarColor success')
          this.setLifeCycleNum(state.lifeCycleNum + 1)
        },
        fail: () => {
          console.log('setNavigationBarColor fail')
          this.setLifeCycleNum(state.lifeCycleNum - 1)
        },
        complete: () => {
          console.log('setNavigationBarColor complete')
          this.setLifeCycleNum(state.lifeCycleNum + 1)
        }
      })
    },
    setNavigationBarColor2() {
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#0000',
        success: () => {
          this.navigationBarTextColor = '#000'
          console.log('setNavigationBarColor success')
          this.setLifeCycleNum(state.lifeCycleNum + 1)
        },
        fail: () => {
          console.log('setNavigationBarColor fail')
          this.setLifeCycleNum(state.lifeCycleNum - 1)
        },
        complete: () => {
          console.log('setNavigationBarColor complete')
          this.setLifeCycleNum(state.lifeCycleNum + 1)
        }
      })
    },
    // 自动化测试
    getLifeCycleNum(): number {
      return state.lifeCycleNum
    },
    // 自动化测试
    setLifeCycleNum(num: number) {
      setLifeCycleNum(num)
    },
  },
}
</script>

<style>
.custom-navigation {
  padding-top: 40px;
  padding-bottom: 10px;
  background-color: #007aff;
}
.custom-navigation > .title {
  margin: 0 auto;
}
.custom-navigation > .back-icon {
  position: absolute;
  font-family: UniFontFamily;
  font-size: 20px;
  left: 10px;
}
</style>
