<template>
  <div class="app-container">
    <a-col v-for="(i, index) in pages" :key="index" :xl="6" :lg="7" :md="8" :sm="24">
      <a-card class="box-card" :style="{background: i.bgc}" @click.native="open(i.url)">
        <div class="text item">
          <div class="left">
            <img :src="resolveIcon(i.icon)" alt="">
          </div>
          <div class="right">
            <span class="dash_header" :style="{color: i.c}">{{ i.name }}</span> <br>
            <span>{{ i.description }}</span>
          </div>
        </div>
      </a-card>
    </a-col>
  </div>
</template>
<script>
import { pages } from '@/utils/dashboard'

export default {
  name: 'MonitorDashboard监控面板',
  data() {
    return {
      pages: [
        {
          icon: 'nacos.svg',
          name: 'Nacos面板',
          url: pages.nacosUrl,
          description: 'Nacos，微服务注册中心&配置中心',
          c: '#1890ff',
          bgc: 'rgba(236,251,252,0.3)'
        },
        {
          icon: 'doc.svg',
          name: 'Document中心',
          url: pages.docUrl,
          description: 'Knife4j，微服务之API接口文档中心',
          c: '#1890ff',
          bgc: 'rgba(236,251,252,0.3)'
        },
        {
          icon: 'admin.svg',
          name: 'Admin面板',
          url: pages.springBootAdminUrl,
          description: 'Admin，基于SBA的微服务监控中心',
          c: '#1890ff',
          bgc: 'rgba(236,251,252,0.3)'
        },
        {
          icon: 'elk.svg',
          name: 'ELK面板',
          url: pages.kibanaUrl,
          description: 'ELK，微服务日志中心统一管理日志',
          c: '#1890ff',
          bgc: 'rgba(236,251,252,0.3)'
        },
        {
          icon: 'skywalking.svg',
          name: 'SkyWalking面板',
          url: pages.skywalkingUrl,
          description: 'SkyWalking，微服务之请求链路追踪',
          c: '#1890ff',
          bgc: 'rgba(236,251,252,0.3)'
        },
        {
          icon: 'grafana.svg',
          name: 'Grafana面板',
          url: pages.grafanaUrl,
          description: 'Grafana，监控Redis,Docker,mysql等',
          c: '#1890ff',
          bgc: 'rgba(236,251,252,0.3)'
        }
      ]
    }
  },
  methods: {
    resolveIcon(icon) {
      return require(`@/assets/icons/${icon}`)
    },
    open(url) {
      window.open(url, '_blank')
    }
  }
}
</script>
<style scoped>
  .item {
    display: flex;
    flex-wrap: wrap;
  }
  .app-container {
    display: inline-block;
    width: 100%;
    background: #fff;
    padding: 10px 12px;
  }
  .box-card {
    margin: 13px;
    cursor: pointer;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border-radius: 4px;
    border: 1px solid #e6ebf5;
  }
  .dash_header {
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    margin-bottom: 8px;
  }
  .left {
    height: 100%;
  }
  img {
    width: 3.4rem;
    display: inline-block;
  }
  .right {
    margin-left: 10px
  }
</style>
