<template>

    <div class="suggestBox">
        <el-row :gutter="10">
<!--            <el-col :span="8">-->
<!--                <el-card shadow="hover">-->
<!--                    <a :href="baseConfigUrl" class="nav-link">-->
<!--                        <img :src="baseConfigImg" alt="" class="nav-pic">-->
<!--                        <div class="nav-title">-->
<!--                            <p class="title">{{ baseConfigTitle }}</p>-->
<!--                            <p class="message">{{ baseConfigMessage }}</p>-->
<!--                        </div>-->
<!--                    </a>-->
<!--                </el-card>-->
<!--            </el-col>-->
<!--            <el-col :span="8">-->
<!--                <el-card shadow="hover">-->
<!--                    <a :href="publishUrl" class="nav-link">-->
<!--                        <img :src="publishImg" alt="" class="nav-pic">-->
<!--                        <div class="nav-title">-->
<!--                            <p class="title">{{ publishTitle }}</p>-->
<!--                            <p class="message">{{ publishMessage }}</p>-->
<!--                        </div>-->
<!--                    </a>-->
<!--                </el-card>-->
<!--            </el-col>-->
<!--            <el-col :span="8">-->
<!--                <el-card shadow="hover">-->
<!--                    <a :href="qualityUrl" class="nav-link">-->
<!--                        <img :src="qualityImg" alt="" class="nav-pic">-->
<!--                        <div class="nav-title">-->
<!--                            <p class="title">{{ qualityTitle }}</p>-->
<!--                            <p class="message">{{ qualityMessage }}</p>-->
<!--                        </div>-->
<!--                    </a>-->
<!--                </el-card>-->
<!--            </el-col>-->
            <el-col :span="8">
                <el-card shadow="hover">
                    <a :href="uiAutoUrl" class="nav-link">
                        <img :src="uiAutoImg" alt="" class="nav-pic">
                        <div class="nav-title">
                            <p class="title">{{ uiAutoTitle }}</p>
                            <p class="message">{{ uiAutoMessage }}</p>
                        </div>
                    </a>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover">
                    <a :href="apiAutoUrl" class="nav-link">
                        <img :src="apiAutoImg" alt="" class="nav-pic">
                        <div class="nav-title">
                            <p class="title">{{ apiAutoTitle }}</p>
                            <p class="message">{{ apiAutoMessage }}</p>
                        </div>
                    </a>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover">
                    <a :href="performanceUrl" class="nav-link">
                        <img :src="performanceImg" alt="" class="nav-pic">
                        <div class="nav-title">
                            <p class="title">{{ performanceTitle }}</p>
                            <p class="message">{{ performanceMessage }}</p>
                        </div>
                    </a>
                </el-card>
            </el-col>
<!--            <el-col :span="8">-->
<!--                <el-card shadow="hover">-->
<!--                    <a :href="coverageUrl" class="nav-link">-->
<!--                        <img :src="coverageImg" alt="" class="nav-pic">-->
<!--                        <div class="nav-title">-->
<!--                            <p class="title">{{ coverageTitle }}</p>-->
<!--                            <p class="message">{{ coverageMessage }}</p>-->
<!--                        </div>-->
<!--                    </a>-->
<!--                </el-card>-->
<!--            </el-col>-->
<!--            <el-col :span="8">-->
<!--                <el-card shadow="hover">-->
<!--                    <a :href="callUrl" class="nav-link">-->
<!--                        <img :src="callImg" alt="" class="nav-pic">-->
<!--                        <div class="nav-title">-->
<!--                            <p class="title">{{ callTitle }}</p>-->
<!--                            <p class="message">{{ callMessage }}</p>-->
<!--                        </div>-->
<!--                    </a>-->
<!--                </el-card>-->
<!--            </el-col>-->
<!--            <el-col :span="8">-->
<!--                <el-card shadow="hover">-->
<!--                    <a href="http://cr.rd.com" target="_blank" class="nav-link">-->
<!--                        <img :src="reviewImg" alt="" class="nav-pic">-->
<!--                        <div class="nav-title">-->
<!--                            <p class="title">{{ reviewTitle }}</p>-->
<!--                            <p class="message">{{ reviewMessage }}</p>-->
<!--                        </div>-->
<!--                    </a>-->
<!--                </el-card>-->
<!--            </el-col>-->
            <el-col :span="8">
                <el-card shadow="hover">
                    <a :href="dataUrl" class="nav-link">
                        <img :src="dataImg" alt="" class="nav-pic">
                        <div class="nav-title">
                            <p class="title">{{ dataTitle }}</p>
                            <p class="message">{{ dataMessage }}</p>
                        </div>
                    </a>
                </el-card>
            </el-col>
        </el-row>

<!--        <a href="https://ones.qike366.com/wiki/#/team/7uHE6wxA/space/9CcDJAaE/page/Q1dYwcAL" target="_blank">-->
<!--            <img :src="suggestImg" alt="意见反馈" class="suggest">-->
<!--        </a>-->
    </div>
</template>
<script>
import data from '../../assets/img/base/data.png'
import base_config from '../../assets/img/base/base_config.png'
import publish from '../../assets/img/base/publish.png'
import quality from '../../assets/img/base/quality.png'
import uiAuto from '../../assets/img/base/ui_auto.png'
import apiAuto from '../../assets/img/base/api-auto.png'
import performance from '../../assets/img/base/performance.png' // 性能测试
import coverage from '../../assets/img/base/coverage.png'
import call from '../../assets/img/base/call.png'
import review from '../../assets/img/base/codereview.png' // 代码review
import suggest from '../../assets/img/base/suggest.png'
import temp1 from '../../assets/img/base/temp1.png'
import temp2 from '../../assets/img/base/temp2.png'

export default {
    name: 'dashboard',
    data() {
        return {
            dataUrl: '#/data/autoTestData',
            dataImg: data,
            dataTitle: '数据图表',
            dataMessage: '基于质量检测及自动化数据汇总的相关图表',

            // baseConfigUrl: '#/project/page',
            // baseConfigImg: base_config,
            // baseConfigTitle: '基础配置',
            // baseConfigMessage: '对git工程配置，为sonar和覆盖率提供原始工程配置',
            //
            // publishUrl: '#/publish/page',
            // publishImg: publish,
            // publishTitle: '测试发布',
            // publishMessage: '管理测试过程，提测单、版本发布单，汇总版本过程数据，方便项目人员查看进度和风险评估',
            //
            // qualityUrl: '#/sonar/result',
            // qualityImg: quality,
            // qualityTitle:'代码质量',
            // qualityMessage: '多语言代码静态检测工具，具有数据自助接入、数据聚类、通知报警等功能',

            uiAutoUrl: '#/uiProjectTask',
            uiAutoImg: uiAuto,
            uiAutoTitle: 'ui自动化',
            uiAutoMessage: '支持web页面元素维护和操作组合，完成场景自动化，报告和告警通知',

            apiAutoUrl: '#/apiTestPlan',
            apiAutoImg: apiAuto,
            apiAutoTitle: 'api自动化',
            apiAutoMessage: '支持web页面元素维护和操作组合，完成场景自动化，报告和告警通知',

            performanceUrl: '#/performanceProject',
            performanceImg: performance,
            performanceTitle: '性能测试',
            performanceMessage: '支持脚本上传和任务执行及结果汇总展示，可查询单个接口历史压测数据',

            // coverageUrl: '#/jacoco/report',
            // coverageImg: coverage,
            // coverageTitle: '代码覆盖率',
            // coverageMessage: '基于jacoco的二次开发，集数据收集、增量分析、全量分析于一体的评估测试用例有效性工具',
            //
            // callUrl: '#/java/call/graph/page',
            // callImg: call,
            // callTitle: '项目调用链',
            // callMessage: '基于ASM字节码解析调用关系，支持查询向上向下的方法调用关系',
            //
            // // reviewUrl: '#',
            // reviewImg: review,
            // reviewTitle: '代码review',
            // reviewMessage: '基于facebook代码review工具phabricator二次开发，用于发起和流转团队code review工具',

            suggestImg: suggest,

            temp1: temp1,
            temp2: temp2,
        }
    }
}
</script>
<style lang="less" scoped>
a {
    text-decoration: none;
    color: #000;
}

.suggestBox {
    .el-card {
        margin: 10px;
    }

    /deep/ .el-card__body {
        padding: 5px !important;
    }

    .el-row {
        margin-bottom: 20px;
        flex-direction: row;
        display: flex;
        flex-wrap: wrap;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }

    .el-card.is-hover-shadow:hover {
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15) !important;
    }

    .nav-link {
        display: flex;
        justify-content: space-evenly;
        flex-direction: row;
        align-items: center;

        .nav-pic {
            Object-fit: contain;
            width: 20%;
            height: 20%;
            padding: 5px 15px 5px 5px;
        }

        .nav-title {
            width: 80%;
            white-space: pre-wrap; // 识别换行
            font-family: 'Helvetica', 'webfont', serif !important;

            .title {
                color: rgb(100, 100, 100);
                margin-bottom: 10px;
                font-size: 16px;
            }
            .message {
                color: #999999;
                font-size: 14px;
            }
        }
    }

    .suggest {
        width: 50px;
        height: 50px;
        position: fixed;
        bottom: 50px;
        right: 50px;
    }
}

</style>
