<template>
  <div class="function_list">
    <x-header title="功能列表" :left-options="{showBack: false}"></x-header>
    <ul class="list">
      <li v-for="(item, index) in fun_list" :key="index" @click="goHandler(index)">
        <span>{{item.name}}</span>
      </li>
    </ul>
    <bottomBtn :btnText="'返回登录'" @btnClick="btnClick"></bottomBtn>
  </div>
</template>

<script>
import { XHeader } from 'vux'
import bottomBtn from 'components/bottomBtn/index'
export default {
  components: { XHeader, bottomBtn },
  beforeRouteEnter (to, from, next) {
    function getFunctionList () {
      return axios.get('b/auth/getFunctions')
    }
    axios.all([getFunctionList()])
      .then(axios.spread(fun => {
        to.params.fun = fun.data.content
        console.warn(fun.data.content);
        next();
      }))
  },
  data () {
    return {
      fun_list: this.$route.params.fun
    }
  },
  mounted () {
    let lis = document.getElementsByTagName('li');
    for (let i = 0; i < lis.length; i++) {
      lis[i].style.height = lis[i].offsetWidth + 'px';
    }
  },
  methods: {
    goHandler (i) {
      let url = this.$route.params.fun[i].boh_url.split('boh');
      let loc = window.location;
      console.warn(loc);
      if (loc.hostname === 'localhost') {
        let res = url[1] ? loc.origin + url[1] : url[0];
        window.location.href = res;
      } else {
        let host = loc.hostname;
        if (!isNaN(Number(host.split('.')[0]))) {
          let res = url[1] ? loc.origin + url[1] : url[0];
          window.location.href = res;
        } else {
          window.location.href = this.$route.params.fun[i].boh_url;
        }
      }
    },
    btnClick () {
      this.$router.push('/');
    }
  }
}
</script>

<style lang="less" scoped>
.function_list {
  .list {
    margin: 0;
    margin-top: 3rem;
    list-style: none;
    li {
      float: left;
      text-align: center;
      border: 1px solid #ccc;
      width: 32.5%;
      background: #fff;
      position: relative;
      span {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    &:after {
      display: block;
      content: '';
      clear: both;
    }
  }
}
</style>