<template>
  <div id="app">
    <header-nav v-if="showTools" :title="serveName">
      <template #right>
        <div @click="showTools=false">隐藏工具栏</div>
        <div @click="handleLogin">点此登录</div>
      </template>
    </header-nav>
    <el-row class="fill mar-t48" type="flex">
      <slider-nav v-if="showTools"/>
      <main-content class="fill"/>
    </el-row>
    <div v-if="dialog" class="sign-box">
      <ai-sign style="margin: auto" :instance="$axios" :action="{login}"
               visible @login="getToken" :showScanLogin="false"/>
    </div>
    <el-button type="info" v-if="!showTools" class="fixedBtn" @click="showTools=true">显示工具栏</el-button>
  </div>
</template>

<script>
import SliderNav from "./components/sliderNav";
import MainContent from "./components/mainContent";
import HeaderNav from "./components/headerNav";

export default {
  name: 'app',
  components: {HeaderNav, MainContent, SliderNav},
  computed: {
    serveName() {
      let names = {
        development: "村微产品库",
        oms: "运营平台产品分库",
      }
      return names[process.env.NODE_ENV]
    },
    login() {
      let url = '/auth/oauth/token';
      /project\/sass/g.test(location.pathname) && (url += "?corpId=ww596787bb70f08288")
      return url
    },
  },
  data() {
    return {
      token: "",
      dialog: false,
      showTools: true,
    }
  },
  methods: {
    setToken() {
      localStorage.setItem('ui-token', this.token)
      this.$message.success("设置token成功!")
    },
    getToken(params) {
      this.token = params.access_token
      this.setToken()
      this.dialog = false
      location.reload()
    },
    getUserInfo() {
      this.$axios.post("/admin/user/detail-phone").then(res => {
        if (res && res.data) {
          this.$store.commit("setUserInfo", res.data)
          if (/^\/project\/xiushan/.test(location.pathname)) {
            this.$store.commit("setFinanceUser")
          }
        }
      })
    },
    handleLogin() {
      this.$axios.delete("/auth/token/logout").then(() => {
        this.dialog = true
      })
    },
  },
  created() {
    this.token = localStorage.getItem("ui-token")
    if (this.token) this.getUserInfo()
    wx = jWeixin
  },
  destroyed() {
    this.token = ""
  },
  mounted() {
    document.title = this.serveName
  }
}
</script>

<style lang="scss">
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.mar-t48 {
  margin-top: 48px;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .fixedBtn {
    position: fixed;
    top: 0;
    right: 60px;
    opacity: 0;

    &:hover {
      opacity: 1;
    }
  }

  li {
    list-style-type: none;
  }

  .sign-box {
    z-index: 99;
    margin: -10px;
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
  }
}

</style>
