<!--
 * @Author: 曹捷
 * @Date: 2021-03-20 16:05:21
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-08-30 10:09:52
 * @Description: fileContent
-->
<template>
  <div class="app-home full">
    <img class="app-back" src="./assets/app-home.png" alt="">
    <div class="home-center">
      <div class="t-c">
        <img src="./assets/logoMenu.png" alt="">
      </div>
      <div class="container">
        <div class="app-item" :title="item.appName" v-for="item in appList" @click="toHome(item)">
          <div class="tile-icon">
            <img src="./assets/logoTop.png" alt="">
          </div>
          <div class="tile-title obit-oneline">
            {{item.appName}}
          </div>
        </div>
        <div class="app-item-bak " v-for="i in 5" :key="i"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { inject, onMounted, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { toHome } from '../utils/auth'
export default {
  setup (props, context) {
    let http = inject('http')
    let router = useRouter()
    let store = useStore()
    let _data = reactive({
      appList: []
    })
    let _methods = {
      initAppInfo () {
        http.getUserAppList().then(res => {
          _data.appList = res
        })
      },
      toHome (item) {
        store.commit('user/setApp', item)
        // 业务系统直接获取菜单和权限
        toHome(item.linkUrl)

      }
    }
    onMounted(() => {
      // _methods.initAppInfo()
    })
    return {
      ...toRefs(_data),
      ..._methods
    }

  }
}
</script>

<style lang="less">
.app-home {
  color: #fff;
  .home-center {
    width: 40%;
    height: 60%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    .app-item-bak {
      width: 133px;
      height: 0px;
    }
    .app-item {
      width: 123px;
      height: 123px;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: all 0.4s;
      .tile-icon {
        width: 66px;
        height: 66px;
        margin-top: 10px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 45px;
          height: 45px;
        }
      }
      .tile-title {
        border-radius: 12px;
        background: #fff;
        color: #000;
        margin-top: 12px;
        padding: 6px 8px;
        text-align: center;
        width: 92%;
        font-size: 13px;
      }
    }
    .app-item:hover {
      cursor: pointer;
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
  .app-back {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
}
</style>