<template>
  <div class="oo-page index-page">
    <div class="oo-index">
      <div v-for="(item,index) in tableData" class="oo-index-div" :key="index">
        <div @click="toModule(item)" :class="item.online?'online':'offline'">
          <div :class="`oo-index-bg top-${index}`">
            <div class="oo-index-icon">
              <img
                :src="require('../../../assets/images/app-polling/'+ (item.iconName?item.iconName:item.name) +'.png')"
                alt
              />
            </div>
          </div>
          <p class="oo-index-title">{{item.name}}</p>
          <div class="oo-index-detail">{{item.online?item.value:'功能待上线'}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Index extends Vue {
  tableData: Array<any> = [
    {
      icon: "1",
      name: "服务器管理",
      iconName: "资源管理",
      value: "服务器信息同步，对服务器进行管理权限分配，精细化定义服务器分组",
      router: "/cmdb/server",
      online:true
    },
    {
      icon: "2",
      name: "批量执行",
      value:
        "多服务器批量执行脚本、命令，支持自定义命令收藏，快捷选择命令，支持黑名单命令管控",
      router: "/command/run",
      online:true
    },
    {
      icon: "3",
      name: "软件部署",
      value: "提供软件信息库，多服务器批量安装卸载",
      router: "/software/record",
      online:true
    },
    {
      icon: "6",
      name: "合规审计",
      value: "自定义脚本规则，可复用规则策略，可变基准值，多服务自动化审计",
      router: "/audit/task",
      online:true
    },
    {
      icon: "8",
      name: "裸机装机",
      value: "dhcp或nodhcp部署操作系统，单台或批量装机，实现一键投产",
      router: "/bare/taskRecord",
      online:true
    },
    {
      icon: "4",
      name: "应用配置管理",
      value: "配置文件自动备份 快照 对比 预览 下发 回退",
      online:false
    },
    {
      icon: "5",
      name: "日常巡检",
      value:
        "支持所有系统、中间件、数据库巡检、出具报表、开箱即用巡检脚本、巡检工作流",
      online:false
    },
    {
      icon: "7",
      name: "补丁管理",
      value:
        "微软补丁服务器对接 支持RHN、RHSM wsus方式 yum方法 批量安装指定补丁",
      online:false
    },
    {
      icon: "9",
      name: "告警自愈",
      value:
        "日常运维工作（磁盘空间满、服务停止、数据库表空间满等）故障自动处理",
      online:false
    },
    {
      icon: "10",
      name: "工单联动",
      value: "资源申请类工单自动化处理 标准化变更工单自动化处理",
      online:false
    },
    {
      icon: "11",
      name: "灾备切换",
      value: "一键式容灾切换 日历式演练计划",
      online:false
    },
    {
      icon: "12",
      name: "迁移上云",
      value: "一键完成公有云与私有云之间的切换",
      online:false
    }
  ];

  toModule(item) {
      if(item.online){
        (this.$router as any).push(item.router);
      }else{
          return;
      }
  }
}
</script>
<style scoped>
    .online{
      cursor:pointer
    }
    .offline{
        opacity:0.4;
    }
    .oo-index-detail{
        padding: 0 20px 10px
    }
    .index-page{
      height: 100%;
    }
</style>>
