<template>
  <div class="app" id="app" :style="{ paddingTop: systemInfo.statusHeight + 'px' }">
    <MyNavBar
      :offset-top="systemInfo.statusHeight"
      :title="$route.meta.title"
      :show="getIsApp && $route.meta.isTabBarMenu && $route.meta.showNavBar"
      :right-text="rightBtnText"
      @right-callback="othersBtnFun"
    />
    <MyNavBar
      :offset-top="systemInfo.statusHeight"
      :title="$route.meta.title"
      :show="getIsApp && !$route.meta.isTabBarMenu && $route.meta.showNavBar"
      :left-arrow="true"
      :left-arrow-style="{ color: '#f00' }"
      :right-text="rightBtnText"
      left-text="返回"
      @left-callback="backPrePage"
      @right-callback="othersBtnFun"
    />

    <div class="router-page-view" :style="{ marginTop: getAppNavBarShow ? '46px' : '' }" :class="{ 'is-tab-bar-menu-page': $route.meta.isTabBarMenu }">
      <!-- <keep-alive :include="keepAlivePageNameList"> -->
      <router-view />
      <!-- </keep-alive> -->
    </div>

    <template v-if="$route.meta.isTabBarMenu">
      <MyTabBar v-model="currentTabBarName" :tab-bar-list="tabBarList" @change="tabBarChange" />
    </template>
    <MyDialog
      :show-popup="dialogOpen"
      :title="myDialogConfig.title"
      :description="myDialogConfig.description"
      :descriptionType="myDialogConfig.descriptionType"
      :show-cancel-btn="true"
      :cancel-btn-text="myDialogConfig.cancelBtnText"
      :ok-close="true"
      @ok="dialogOk"
      @cancel="dialogCancel"
    />
    <MyToast loading-icon="icon-loading-1" ref="myToast" />
    <!-- <MyConsole ref="MyConsole" theme="dark" /> -->
  </div>
</template>
<script>
import { versionFormatting } from '@/libs/tools'
import { getVersionApi } from '@/apis/commApis'
import MyNavBar from '@/components/MyNavBar/MyNavBar.vue'
import MyTabBar from '@/components/MyTabBar/MyTabBar.vue'
import MyDialog from '@/components/MyDialog/MyDialog.vue'
import MyToast from '@/components/MyToast/MyToast.vue'
import MyConsole from '@/components/MyConsole/MyConsole.vue'

const myDialogConfig = {
  title: '提示',
  description: '',
  descriptionType: 'html',
  cancelBtnText: '取消'
}
export default {
  name: 'myApp',
  components: {
    MyNavBar,
    MyTabBar,
    MyDialog,
    MyToast,
    MyConsole
  },
  data() {
    return {
      currentTabBarName: '',
      dialogOpen: false,
      isOpenToast: false,
      systemInfo: {
        version: '0.0.0',
        statusHeight: 0
      },
      newVersion: '',
      myDialogConfig: myDialogConfig,
      rightBtnText: '',
      loadingToast: null
    }
  },
  computed: {
    keepAlivePageNameList() {
      return this.$router.options.routes
        .filter(item => {
          return item.meta.keepAlive
        })
        .map(item => {
          return item.name
        })
    },
    tabBarList() {
      return this.$router.options.routes
        .filter(item => {
          return item.meta.isTabBarMenu
        })
        .map(item => {
          return {
            name: item.name,
            icon: item.meta.icon,
            label: item.meta.title
          }
        })
    }
  },
  watch: {
    $route(newVal) {
      if (this.getIsApp) {
        this.$store.commit('setAppNavBarShow', newVal.meta.showNavBar)
      }
    }
  },
  created() {
    if (this.getIsApp) {
      this.$store.commit('setAppNavBarShow', this.$route.meta.showNavBar)
      // 监听App端传过来的系统信息
      webf.methodChannel.addMethodCallHandler('postSystemInfo', event => {
        console.log('event:', event)
        this.systemInfo = event
        this.$store.commit('setSystemInfo', event)
      })
      // 监听下载进度
      webf.methodChannel.addMethodCallHandler('updateVersionProgress', event => {
        this.loadingToast.ylTotasHintText = `下载中 ${event.toFixed(2)}%`
        if (event === 100) {
          this.loadingToast.ylTotasOpen = false
          this.dialogOk = this.updateVerOkRestart
          this.myDialogConfig.title = '下载完成'
          this.myDialogConfig.description = '重启App即可更新'
          this.myDialogConfig.cancelBtnText = '稍后重启'
          this.dialogOpen = true
        }
      })
    }
  },
  async mounted() {
    setTimeout(() => {
      this.currentTabBarName = this.$route.name
    }, 60)
    if (this.getIsApp) {
      // 如果是APP,需要检查版本号判断有没有更新
      try {
        let res = await getVersionApi()
        let oldVersion = versionFormatting(this.systemInfo.version)
        let newVersion = versionFormatting(res.currentVersion)
        this.newVersion = res.currentVersion
        if (newVersion - oldVersion > 0) {
          this.myDialogConfig.title = '更新提示'
          this.myDialogConfig.description = res.description
          this.dialogOpen = true
        }
      } catch (error) {
        console.log('error:', error)
      }
    }
  },
  methods: {
    // tabBar切换
    tabBarChange(event) {
      this.$router.replace({
        name: event.name
      })
    },
    backPrePage() {
      console.log('返回：')
      this.$router.go(-1)
    },
    othersBtnFun() {
      console.log('this.getAppNavBarShow:', this.getAppNavBarShow)
    },
    dialogCancel() {
      this.rightBtnText = '立即更新'
    },
    dialogOk() {
      webf.methodChannel.invokeMethod('updateVersionDownloadConfirm', {
        msg: '确定更新',
        newVersion: this.newVersion
      })
      this.dialogOpen = false
      this.loadingToast = this.$refs.myToast.loading({
        hintText: '下载中',
        duration: 0,
        isOpen: true
      })
    },
    // 确定重启更新-触发flutter中webf监听的事件
    updateVerOkRestart() {
      webf.methodChannel.invokeMethod('updateVersionRestart', {
        msg: '确定更新重启'
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/assets/style/iconfont/iconfont.css';
@import '@/assets/style/vant-icon/vant-icon.css';
// @import '@/assets/style/common.scss';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.router-page-view {
  overflow-x: hidden;
  &.is-tab-bar-menu-page {
    padding-bottom: 54px;
  }
}
#app {
  overflow-x: hidden;
  .my-tabbar-view {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    width: 100%;
  }
}
</style>