<template>
  <el-container class="jump-page">
    <el-header class="jump-page-header">
      <span class="jump-page-header-logo">博云</span>
      <span class="jump-page-header-title">一体化云管理平台</span>
      <div class="jump-page-header-right">
        <el-avatar :size="30" :src="userData.portrait"></el-avatar>
        <span class="login-user">{{ userData.name }}</span>
      </div>
    </el-header>
    <el-main class="jump-page-container" :style="style">
      <div class="platform-card" v-for="item in platformList" :key="item.title" @click="goPage(item.logo)">
        <img class="platform-card-logo" :src="`/static/img/jump/${item.logo}.png`" alt="" />
        <div class="platform-card-title">{{ item.title }}</div>
        <div>
          <div class="platform-card-count" v-for="cell in item.counts" :key="cell.name">
            <div class="platform-card-count-name">{{ cell.name }}：</div>
            <div class="platform-card-count-value">{{ cell.value }}</div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import JumpBg from '@/assets/jump_bg.png'
import { useStore } from 'vuex'
import { getSystemConfigs, getWinhongToken } from 'services'
import { useRouter } from 'vue-router'
import axios from 'axios'

const style = {
  'background-image': `url(${JumpBg})`
}
const store = useStore()
// const pageConfigs = computed(() => store.getters.pageConfig)
const userData = computed(() => store.getters.userData || {})
type IPlatform = {
  title: string
  logo: string
  counts: any[]
}
const platformList = ref<IPlatform[]>([])
// 获取数据
;(async function () {
  const { data } = await axios.get('/cof-web/platform.json')
  platformList.value = data
})()
// 获取配置信息
let paasUrl = '',
  hongUrl = ''
;(async function () {
  const data = await getSystemConfigs({ codes: 'passUrl,passUserName,passPwd,winhongUrl' })
  if (data.success) {
    const { passUrl, passUserName, passPwd, winhongUrl } = data.data
    hongUrl = winhongUrl
    paasUrl = `${passUrl}/#/?userName=${passUserName}&passWord=${btoa(passPwd)}`
  }
})()
const router = useRouter()
function goPage(logo: string) {
  switch (logo) {
    case 'cmp':
      router.push('/sms-web/resource_dashboard')
      break
    case 'paas':
      window.open(paasUrl)
      break
    case 'winhong':
      goWinhong()
      break
  }
}
async function goWinhong() {
  const res = await getWinhongToken()
  if (res.success) {
    window.open(`${hongUrl}/api/user/loginBySessionId?sessionId=${res.data}`)
  }
}
</script>
<style lang="scss" scoped>
.jump-page {
  &-header {
    height: 48px;
    background: #06102a;
    display: flex;
    align-items: center;
    color: #fff;
    &-logo {
      // height: 80%;
      font-size: 18px;
      font-weight: bold;
      letter-spacing: 2px;
    }
    &-title {
      font-size: 16px;
      font-weight: bold;
      color: #ffffff;
      margin-left: 40px;
    }
    &-right {
      flex: 1;
      padding-right: 40px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      & > .login-user {
        margin-left: 12px;
      }
    }
  }
  &-container {
    height: calc(100vh - 48px);
    background-size: 100% 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 80px;
  }
  .platform-card {
    width: 360px;
    height: 597px;
    padding: 82px 0 103px 0;
    box-sizing: border-box;
    background: url('/static/img/jump/card_bg.png') #deedff;
    background-size: 100% 100%;
    // box-shadow: 0px 0px 4px 0px #9ac3f8;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    opacity: 0.8;
    &:hover {
      background: url('/static/img/jump/card_bg_select.png');
      .platform-card-title {
        color: #0083ff;
      }
    }
    &-logo {
      width: 154px;
      height: 173px;
    }
    &-title {
      font-size: 24px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #6eb7e7;
      line-height: 21px;
      margin: 50px 0;
    }
    &-count {
      display: flex;
      margin-bottom: 14px;
      font-size: 14px;
      font-weight: 500;
      color: #333333;
      line-height: 19px;
      &-name {
        width: 165px;
      }
      &-value {
        flex: 1;
        text-align: right;
      }
    }
  }
}
</style>
