<template>
  <div id="app">
    <vue-progress-bar></vue-progress-bar>

    <app-header v-if="headerOnoff" @user-center="userCenter"></app-header>
    <!-- <modify-pass v-if="modifyOnoff" @close-handle="closeHandle"></modify-pass> -->
    <user-center v-if="modifyOnoff" @close-handle="closeHandle"></user-center>
    <app-home :header-onoff="headerOnoff"></app-home>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
  import appHeader from '@/components/Header.vue'
  // import modifyPass from '@/components/ModifyPass.vue'
  import appHome from './views/Home.vue'
  import userCenter from '@/components/UserCenter.vue'

  export default {
    name: 'App',
    data () { 
      return { 
        headerOnoff: true,
        modifyOnoff: false
      }
    },
    components: {
      appHeader,
      appHome,
      // modifyPass,
      userCenter
    },
    computed: { 
      sideMenu() {
        return this.$store.state.sideMenu
      }
    },
    mounted () {
      this.$Progress.finish()

      if (this.$route.path === '/login' || this.$route.path === '/404' || this.$route.path === '/permission') { 
        this.headerOnoff = false
      } else { 
        this.headerOnoff = true
      }
    },
    created () {
      //  [App.vue specific] When App.vue is first loaded start the progress bar
      this.$Progress.start()
      //  hook the progress bar to start before we move router-view
      this.$router.beforeEach((to, from, next) => {
        //  does the page we want to go to have a meta.progress object
        if (to.meta.progress !== undefined) {
          let meta = to.meta.progress
          // parse meta tags
          this.$Progress.parseMeta(meta)
        }
        //  start the progress bar
        this.$Progress.start()
        //  continue to next page
        next()
      })
      //  hook the progress bar to finish after we've finished moving router-view
      this.$router.afterEach((to, from) => {
        //  finish the progress bar
        this.$Progress.finish()
        
        // let router = Object.assign({}, {'name': to.fullPath})
        let router = new URLSearchParams()
        let userid = null
        if (window.localStorage.gisopUserInfo) {
          const storageUser = JSON.parse(window.localStorage.gisopUserInfo)
          userid = storageUser.info.userguid
        }
        
        router.append('pageurl', to.fullPath)
        router.append('userguid', userid)
        for (let i = 0; i < this.sideMenu.length; i++) {
          if (to.fullPath === this.sideMenu[i].pageurl) {
            router.append('moduleName', this.sideMenu[i].modulename)
          }
        }
      })
    },
    watch: {
      $route (val) {
        if (val.path === '/login' || this.$route.path === '/404' || this.$route.path === '/permission') { 
          this.headerOnoff = false
        } else { 
          this.headerOnoff = true
        }
      }
    },
    methods: {
      // 打开设置密码
      userCenter () {
        this.modifyOnoff = true
      },
      // 关闭设置密码
      closeHandle () {
        this.modifyOnoff = false
      }
    }
  }
</script>

<style lang="scss">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: #1f2d3d;
    
    /* .sidebar {
      display: flex;
      width: 200px;
      height: 100%;
      overflow: auto;
    } */


    .container {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
    }

    .containerIn {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .el-dialog__header {
      position: relative;
      
      .close {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 20px;
        top: 10px;
        cursor: pointer;
        color: #666;
      }
    }
  }
</style>
