<!-- 环境验证页面 -->
<template>
    <div class="verifyEnvironment">
        <div class="labContent">
            <div class="labContent-title">
                <p >XC环境验证系统</p>
            </div>
            <div class="themeContent">
                <div class="themeName"> <i></i> XXX环境 </div>
<!--                <div class="themeOne">-->
<!--                    <p class="themeOne-title"> <i></i> 环境详情 </p>-->
<!--                    <div class="themeOne-context">-->
<!--                        <img src="../assets/img/save.png" alt="">-->
<!--                        <div style="width: 100px;height: 100px;">-->
<!--                            <span id="charts-left" style="width: 100px;height: 100px;"  class="chart-left"></span>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
                <div class="themeTwo">
<!--                    <p class="themeOne-title"> <i></i> 项目体验 </p>-->
                    <div class="themeTwo-context">
                        <div class="threeTitle">xxx项目</div>
                        <div class="">
                            <ul>
                                <li class="reuseLi" v-for="(item,index) in dataLi">
                                    <div class="reuseLi-top">
                                        <i></i>
                                        <span>{{item.name}}</span>
                                        <a @click="experience(item.id)">体验</a>
                                    </div>
                                    <div class="reuseLi-bottom">
                                        <!--<p v-for="(item,index) in dataOne" :key="index">{{item.name}}：<span></span></p>-->
                                        <p>操作系统：<span>{{item.os}}</span></p>
                                        <p>数据库：<span>{{item.database}}</span></p>
                                        <p>中间件：<span>{{item.middle}}</span></p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="resultBtn">
                            <span @click="Jump">量化体检结果>></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
    name: 'verifyEnvironment',
    // import引入的组件需要注入到对象中才能使用
    components: {},
    props: {},
    data () {
        // 这里存放数据
        return {
            dataLi: [
                {name:'龙芯',os: '龙芯',database: '瀚高',middle: '金蝶',id: 1},
                {name:'x86',os: 'x86',database: '瀚高',middle: '金蝶',id: 3},
                {name:'鲲鹏',os: '鲲鹏',database: '瀚高',middle: '金蝶',id: 2}
            ]
        };
    },
    // 方法集合
    methods: {
        // 画最左边的echarts
        // drawLeft() {
        //     // 基于准备好的dom，初始化echarts实例
        //     let LeftChart = this.$echarts.init(document.getElementById("charts-left"));
        //     // 绘制图表
        //     LeftChart.setOption({
        //         tooltip: {
        //             trigger: 'item',
        //             formatter: '{a} <br/>{b}: {c} ({d}%)'
        //         },
        //         legend: {
        //             orient: 'vertical',
        //             left: 10,
        //             data: ['直接访问',]
        //         },
        //         series: [
        //             {
        //                 name: '访问来源',
        //                 type: 'pie',
        //                 radius: ['50%', '70%'],
        //                 avoidLabelOverlap: false,
        //                 label: {
        //                     show: false,
        //                     position: 'center'
        //                 },
        //                 emphasis: {
        //                     label: {
        //                         show: true,
        //                         fontSize: '30',
        //                         fontWeight: 'bold'
        //                     }
        //                 },
        //                 labelLine: {
        //                     show: false
        //                 },
        //                 data: [
        //                     {value: 335, name: '直接访问'},
        //                 ]
        //             }
        //         ]
        //     });
        // },
        // 体检结果
        Jump() {
            const id = 2 // 项目id
            this.$server.getProject(id).then(res => { // 获取项目详情
                console.log(res)
                this.$server.getPerformanceData(res.data.techId).then(res => { // 根据项目techID获取性能表格数据
                    console.log(res)
                    sessionStorage.setItem('tableData', JSON.stringify(res.data)) // 存储表格数据
                    this.$router.push('/qualityResult'); // 跳转表格
                    console.log(JSON.parse(sessionStorage.getItem("tableData")))
                })
            })
        },
        // 体验
        experience(id) {
            let data = {
                id: 2, // 项目id
                techId: id // 操作系统id
            }
            this.$server.postModify(data).then(res => { // 传输每次体验系统id
                console.log(res)
                // window.open('http://192.168.1.244:8081/workbook/#/login', '_blank').location;
            })
            if(id==1){
                window.open('http://192.168.1.244:8081/workbook/#/login', '_blank').location;
            }else if(id ==2) {
                window.open('http://192.168.1.245:8080/workbook/#/login', '_blank').location;
            }else{
                window.open('http://192.168.1.246:8080/workbook/#/login', '_blank').location;
            }

        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
        // this.drawLeft();
    },
    // 生命周期 - 创建之前
    beforeCreate () {},
    // 生命周期 - 挂载之前
    beforeMount () {},
    // 生命周期 - 更新之前
    beforeUpdate () {},
    // 生命周期 - 更新之后
    updated () {},
    // 生命周期 - 销毁之前
    beforeDestroy () {},
    // 生命周期 - 销毁完成
    destroyed () {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
}
</script>

<style scoped>
    .verifyEnvironment {
        background: #ebf0f8;
        padding: 30px 45px ;
        height: 96vh;
        overflow-y: scroll;
    }
    .labContent {
        width: 100%;
        background: #fff;
        height: 163vh;
    }
    .labContent-title p {
        font-size: 24px;
        color: #233b6e;
        padding: 30px;
        text-align: center;
    }
    .themeContent {
        padding: 0 64px;
    }
    .themeName {
        text-align: left;
        position: relative;
        background-color: #ecf1fc;
        height: 40px;
        margin-top: 40px;
        width: 100%;
        line-height: 40px;
        font-weight: bold;
        font-size: 20px
    }
    .themeName i {
        display: block;
        float: left;
        background-color: #4877e6;
        height: 40px;
        width: 4px;
        margin-right: 10px;
    }
    /* 二级标题样式可以重复使用 */
    .themeOne-title {
        position: relative;
        font-size: 20px;
        margin-top: 20px;
        color: #333;
        height: 40px;
        width: 100%;
        text-align: left;
        line-height: 40px;
        text-indent: 10px;
        font-weight: bold;
    }
    .themeOne-title i {
        width: 4px;
        height: 20px;
        float: left;
        display: block;
        background-color: #4877e6;
        margin-top: 10px;
    }
    /*二级标题的内容*/
    .themeOne-context {
        width: 90%;
        height: 115px;
        border: 2px solid #eaf1ff;
        margin-top: 10px;
        margin-bottom: 30px;
        padding: 30px 50px 30px 50px;
    }
    .themeTwo-context {
        width: 90%;
        /*height: 115px;*/
        border: 2px solid #eaf1ff;
        margin-top: 10px;
        margin-bottom: 30px;
        padding: 30px 50px 30px 50px;
    }
    .threeTitle {
        color: #3a8ee6;
        border-bottom: 4px solid #f5f8fd;
        padding-bottom: 16px;
        font-weight: bold;
    }
    .reuseLi-top {
        margin-top: 18px;
    }
    .reuseLi-top i {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgb(72,119,230);
        margin-right: 4px;
    }
    .reuseLi-top a {
        display: inline-block;
        width: 100px;
        height: 34px;
        line-height: 34px;
        background: rgba(72,119,230,.6);
        color: #fff;
        text-align: center;
        border-radius: 5px;
        float: right;
        cursor: pointer;
    }
    .reuseLi-top a:hover {
        background: #4877e6;
    }
    .reuseLi-bottom {
        height: 115px;
        border: 2px solid #eaf1ff;
        margin-top: 18px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .reuseLi-bottom p {
        line-height: 37px;
    }
    .reuseLi-bottom p span {
        display: inline-block;
        width: 170px;
        border: 1px solid #eaf1ff;
        height: 35px;
        margin-bottom: -13px;
        padding-left: 18px;
        background: #f5f8fd;
    }
    .resultBtn span {
        display: inline-block;
        width: 166px;
        height: 34px;
        line-height: 34px;
        background: #4877e6;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        margin: 40px 0 10px 0;
        cursor: pointer;
    }
    .resultBtn span:hover {
        background: #1c45a4;
    }

</style>