<template>
  <view>
    <page-head title="setNavigationBarColor"></page-head>
    <view class="uni-padding-wrap uni-common-mt">
      <button @tap="setNavigationBarColor1" class="uni-btn">
        设置导航条背景绿色，标题白色
      </button>
      <button @tap="setNavigationBarColor2" class="uni-btn">
        设置导航条背景红色，标题黑色
      </button>
      <button @tap="goCustomNavigation" class="uni-btn">
        跳转自定义导航栏页面
      </button>
    </view>
  </view>
</template>

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

export default {
  methods: {
    setNavigationBarColor1() {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#00ff00',
        success: () => {
          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: '#ff0000',
        success: () => {
          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)
    },
    goCustomNavigation(){
      uni.navigateTo({
        url: '/pages/API/set-navigation-bar-color/set-custom-navigation-bar-color'
      })
    }
  },
}
</script>
