<!-- <!-- XC 环境认证系统页面 --> -->
<template>
    <div class="verifyEnvironment">
        <div class="labContent">
            <div class="labContent-title">
                <img src="../assets/image/logo.png" alt="">
                <p >XC环境认证系统</p>
            </div>
            <div class="theme">
                <div class="themeContent">
                    <div class="themeName"> <i></i> XXX环境 </div>
                    <div class="themeOne">
                        <div class="threeTitle">xxx项目</div>
                        <div>
                            <ul>
                                <li class="reuseLi" v-for="(item,index) in dataLi">
                                    <div class="reuseLi-top">
                                        <img src="../assets/image/testEn.png" alt="">
                                        <span>{{item.name}}</span>

                                    </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>
                                    <p class="reuseLi-btn"><a @click="experience(item.id)">体验</a></p>

                                </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: 'verify-environment1',
    // 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: {
        // 体检结果
        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('/qualityResult1'); // 跳转表格
                    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;
                //  test -test -test
            })
            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 () {},
    // 生命周期 - 创建之前
    beforeCreate () {},
    // 生命周期 - 挂载之前
    beforeMount () {},
    // 生命周期 - 更新之前
    beforeUpdate () {},
    // 生命周期 - 更新之后
    updated () {},
    // 生命周期 - 销毁之前
    beforeDestroy () {},
    // 生命周期 - 销毁完成
    destroyed () {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
}
</script>

<style scoped>
    .verifyEnvironment {
        height: 96vh;
        overflow-y: scroll;
    }
    .labContent-title {
        height: 138px;
        line-height: 138px;
        text-align: center;
        font-size: 60px;
        font-weight: bold;
        color: #151033;
    }
    .labContent-title p {
        display: inline-block;
    }
    .labContent-title img {
        margin-right: 20px;
        margin-bottom: 17px;
    }
    .theme {
        padding: 22px 50px;
        background: #f5f7ff;
    }
    .themeContent {
        height: 122vh;
        background: #fff;
        padding: 20px 30px;
    }
    .themeName {
        text-align: left;
        position: relative;
        background-color: #f5f7ff;
        height: 38px;
        width: 100%;
        line-height: 38px;
        font-weight: bold;
        font-size: 20px
    }
    .themeName i {
        display: block;
        float: left;
        background-color: #151033;
        height: 38px;
        width: 14px;
        margin-right: 10px;
    }
    .themeOne {
        padding: 30px 50px;
    }
    .threeTitle {
        color: #151033;
        padding-bottom: 18px;
        font-weight: bold;
    }
    .reuseLi {
        width: 100%;
        height: 234px;
        background: #f5f7ff;
        margin-bottom: 20px;
    }
    .reuseLi-top,.reuseLi-bottom {
        padding-left: 20px;
    }
    .reuseLi-top {
        padding-top: 18px;
    }
    .reuseLi-top img {
        padding-right: 12px;
    }
    .reuseLi-top span {
        font-size: 16px;
        color: #151033;
        font-weight: bold;
    }
    .reuseLi-bottom {
        height: 115px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-top: 1px solid #e1e6f4;
        border-bottom: 1px solid #e1e6f4;
        width: 90%;
        margin: 0 auto;
    }
    .reuseLi-bottom p {
        line-height: 37px;
    }
    .reuseLi-bottom p span {
        display: inline-block;
        width: 170px;
        border: 1px solid #a8d5f4;
        height: 35px;
        margin-bottom: -13px;
        padding-left: 18px;
        background: #f5f8fd;
    }
    .reuseLi-btn {
        text-align: right;
        width: 90%;
        margin: 0 auto;
        padding-top: 12px;
    }
    .reuseLi-btn a {
        display: inline-block;
        width: 68px;
        height: 32px;
        line-height: 32px;
        background: #151033;
        text-align: center;
        color: #fff;
        cursor: pointer;
    }
    .reuseLi-btn a:hover {
        background: #3b3b56;
    }
    .resultBtn {
        text-align: right;
    }
    .resultBtn span {
        display: inline-block;
        width: 166px;
        height: 34px;
        line-height: 34px;
        background: #151033;
        color: #fff;
        text-align: center;
        cursor: pointer;
    }
</style>