<!-- XC lab系统页面 -->
<template>
    <div class="labSystem">
        <div class="labContent">
            <div class="labContent-title">
                <img src="../assets/image/logo.png" alt="">
                <p >XC lab系统</p>
            </div>
            <div class="theme">
                <div class="themeContent">
                    <div class="themeName"> <i></i> {{name}} </div>
                    <div class="themeOne">
                        <div class="themeOneLeft">
                            <div>
                                <img src="../assets/image/adress.png" alt="">
                                <p>地址详情</p>
                            </div>

                        </div>
                        <div class="themeOneRight">
                            <p class="themeOne-title"> <!--<span class="edit"><img src="../assets/image/edit.png" alt="">编辑</span>--> </p>
                            <div class="themeOneRight-div">项目路径： <span class="themeOne-pint themeOneRight-span" @click="openAnother(path)"> <i>{{path}}</i> </span></div>
                            <div class="themeOneRight-div">gitlab地址： <span class="themeOneRight-span">{{gitPath}}</span> </div>
                        </div>
                    </div>
                    <div class="themeOne">
                        <div class="themeOneLeft">
                            <div>
                                <img src="../assets/image/configure.png" alt="">
                                <p>配置详情</p>
                            </div>

                        </div>
                        <div class="themeOneRight">
                            <p class="themeOne-title">  <span class="edit"><img src="../assets/image/save.png" alt="">保存</span> </p>
                            <div style="padding-left: 25px">
                                <el-row>
                                    <el-col :span="8">
                                        <div>
                                            <span class="">打包方式：</span>
                                            <el-select v-model="pack" placeholder="请选择">
                                                <el-option label="maven" :value="0"></el-option>
                                                <el-option label="cnpm" :value="1"></el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="8">
                                        <div>
                                            <span class="">代码类型：</span>
                                            <el-select v-model="codeType" placeholder="请选择">
                                                <el-option label="js/html/css" :value="0"></el-option>
                                                <el-option label="java" :value="1"></el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="8">
                                        <div>
                                            <span class="">日志保存时间：</span>
                                            <el-input style="width:117px;" v-model="rate" placeholder="请输入"></el-input>
                                            天
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row style="margin-top:32px;">
                                    <el-col :span="8">
                                        <div>
                                            <span class="">编译版本：</span>
                                            <el-select v-model="compile" placeholder="请选择">
                                                <el-option label="jdk1.8" :value="0"></el-option>
                                                <el-option label="nodejs10.16" :value="1"></el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </div>
                    <div class="themeOne">
                        <div class="themeOneLeft themeElseH">
                            <div>
                                <img src="../assets/image/proenv.png" alt="">
                                <p>项目环境</p>
                            </div>

                        </div>
                        <div class="themeOneRight themeElseH">
                            <p class="themeOne-title">
                                <span class="edit" @click="apply"><img src="../assets/image/apply.png" alt="">重新申请</span>
                            </p>
                            <!--<p class="themeOne-second"><span class="deploy" @click="deploy">部署</span></p>-->
                            <div class="themeThree">
                                <span class="deploy" @click="deploy">部署</span>
                                <p style="line-height: 50px">
                                    访问路径：
                                    <span>
                                <a v-if="editLink === false"  @click="openLink(pathSuffix)" class="aLinkClick">{{pathSuffix}}</a>
                                <el-input
                                        v-if="editLink === true"
                                        type="textarea"
                                        rows="1"
                                        resize="none"
                                        placeholder="请输入demo链接"
                                        v-model="pathSuffix">
                                </el-input>
                            </span>
                                    <i class="edit editPlus" v-if="editLink === false" @click="editLinkClick"><img src="../assets/image/edit.png" alt=""> 编辑</i>
                                    <i class="edit editPlus" v-if="editLink === true" @click="saveLinkClick"><img src="../assets/image/save.png" alt=""> 保存</i>

                                </p>

                                <div>
                                    <i></i>
                                    服务器：
                                    <span>型号/版本: <a>{{os.version}}</a> </span>
                                    <span>ip: <a>{{os.ip}}</a></span>
                                </div>
                                <div>
                                    <i></i>
                                    中间件：
                                    <span>型号/版本: <a>{{mid.version}}</a> </span>
                                    <span>ip: <a>{{mid.ip}}</a></span>
                                    <span>端口号：<a>{{mid.port}}</a> </span>
                                </div>
                                <div>
                                    <i></i>
                                    数据库：
                                    <span>型号/版本: <a>{{db.version}}</a> </span>
                                    <span>ip: <a>{{db.ip}}</a></span>
                                    <span>端口号：<a>{{db.port}}</a> </span>
                                    <span>用户名：<a>{{db.userName}}</a></span>
                                    <span>密码：<a>{{db.password}}</a></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="themeLog">
                <div class="themeLog-box">
                    <div class="themeFour">
                        <div class="themeOneLeft themeLogH">
                            <div>
                                <img src="../assets/image/log.png" alt="">
                                <p>运行日志</p>
                            </div>

                        </div>
                        <div class="themeOneRight themeLogH">
                            <p class="themeOne-title">  <span class="edit"><img src="../assets/image/refresh.png" alt="">刷新</span> </p>
                            <div class="themeFour-Context">
                                <div class="logData">
                                    <!--<el-scrollbar ref="myScrollbar" class="myScrollbar"  style="height: 38vh">-->
                                    <textarea  ref="myScrollbar"  class="logTextarea">
                                    {{logData}}
                                </textarea>
                                    <!--</el-scrollbar>-->

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <!--重新申请弹窗-->
        <el-dialog :visible.sync="applyModal" width="0%" >
            <reapply :val="applyMessage" :applyId="applyId" :osId="osId" @on-closeWeb="websocketCosle" @on-websocket="newWebsocket()" @on-project="newProject()" @on-close="reset()"></reapply>
            <img src="../assets/img/close.png" class="closeModel" @click="reset()">
        </el-dialog>

        <!--重新申请弹窗-->
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import reapply from '../components/dial/reapply';
import baseUrl from '../../config';
export default {
    name: 'lab-system1',
    // import引入的组件需要注入到对象中才能使用
    components: { reapply },
    props: {},
    data () {
        // 这里存放数据
        return {
            id: 1, //
            name:'XC lab', // 项目名字
            path:'12121212', // 项目路径
            gitPath: '1212121', // git路径
            pack: '', // 打包方式
            codeType: '', // 代码类型
            rate: '', // 编译频率
            compile: '', // 编译版本
            os: '', // 服务器
            mid: '', // 中间件
            db: '', // 数据库
            applyModal: false, // 重新申请弹窗
            applyMessage: '', // 弹窗数据
            applyId:'', // 传给弹窗的项目id
            editLink: false, // 编辑链接
            pathSuffix: '', // 链接
            jenkinsName: '', // webstock
            logData:'', // 日志
            techId: '', // techID技术路线
            osId: '', //  传给子组件 用于选中对比的id
        };
    },
    // 方法集合
    methods: {
        getProject() {
            console.log(3333)
            this.$server.getProject(this.id).then(res => {
                console.log(res.data);
                this.path = res.data.path
                this.gitPath = res.data.gitPath
                this.name = res.data.name
                this.pack = res.data.pack
                this.codeType = res.data.codeType
                this.rate = res.data.rate
                this.compile = res.data.compile
                this.os = res.data.os;
                // console.log('服务器',this.os)
                this.mid = res.data.mid;
                // console.log('中间件',this.mid)
                this.db = res.data.db;
                // console.log('数据库',this.db)
                this.pathSuffix = res.data.pathSuffix
                this.jenkinsName = res.data.jenkinsName
                this.copyWebsocket(res.data.jenkinsName)
                this.techId = res.data.techId;
            }).catch(err => {
                // console.log(err);
                this.$message.error('数据请求失败');
            })
        },
        // 重新申请
        apply() {
            // console.log(1)
            this.applyModal = true
            this.$server.findAll().then(res => {
                console.log(res.data);
                this.applyMessage = res.data
                this.applyId = this.id
                this.osId = this.techId
                // console.log('909090',this.osId)
                // console.log('77777',this.applyId)
            }).catch(err => {
                // console.log(err)
                this.$message.error('请求失败')
            })
        },
        reset(){
            this.applyModal = false;
        },
        openLink(val) {
            console.log(val)
        },
        // 编辑
        editLinkClick() {
            this.editLink = !this.editLink;
        },
        // 保存
        saveLinkClick() {
            console.log(this.pathSuffix)
            let obj = {
                "pathSuffix": this.pathSuffix,
                "id": this.id,
            }
            console.log(obj)
            this.$server.setPath(obj).then(res => {
                console.log(res.data);
                console.log('77777')
                this.editLink = false
                this.getProject();
            }).catch(err => {
                console.log(err)
                this.$message.error('请求失败')
            })
        },
        // 打开项目路径链接新页面
        openAnother(val) {
            // console.log(val)
            window.open(val, '_blank').location;
        },
        // 部署
        deploy() {
            this.$server.getDeploy(this.id).then(res => {
                console.log(res.data);
                console.log('77777');
            }).catch(err => {
                console.log(err)
                this.$message.error('请求失败')
            })
        },
        // websocket
        copyWebsocket(val) {
            // console.log(this.val,this.close)
            var that = this;
            // Create WebSocket connection.
            // console.log('this.jenkinsName2121',this.jenkinsName)
            // const socket = new WebSocket('ws://' + baseUrl.WS_CONT + '/webServer/${this.jenkinsName}');
            const socket = new WebSocket(`ws://${baseUrl.WS_CONT}/webServer/${val}`);
            this.WS = socket;

            // Connection opened
            socket.addEventListener('open', function (event) {
                socket.send('Hello Server!');
            });
            // Listen for messages
            socket.addEventListener('message', function (event) {
                // console.log('Message from server ', event.data);
                that.logData += event.data
                // console.log('this.logData777', that.logData)
            });
        },
        scrollDown() {  // 滚动条置低
            // this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
            let t = document.getElementsByTagName("textarea")[0];
            t.scrollTop = t.scrollHeight;
        },
        newProject(){
            console.log(1)
            this.getProject();
        },
        websocketCosle(e){
            this.WS.close()
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
        this.getProject();
    },
    // 生命周期 - 创建之前
    beforeCreate () {},
    // 生命周期 - 挂载之前
    beforeMount () {},
    // 生命周期 - 更新之前
    beforeUpdate () {},
    // 生命周期 - 更新之后
    updated () {
        this.scrollDown()
    },
    // 生命周期 - 销毁之前
    beforeDestroy () {},
    // 生命周期 - 销毁完成
    destroyed () {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
}
</script>

<style scoped>
    .labSystem {
        height: 96vh;
        overflow-y: scroll;
    }
    .labContent {

    }
    .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 0 50px;
        background: #f5f7ff;
    }
    .themeContent {
        height: 104vh;
        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 {
        display: flex;
        justify-content: left;
        align-items: center;
        margin-top: 28px;
    }
    .themeOneLeft {
        width: 182px;
        height: 204px;
        position: relative;
        box-shadow:0 0 9px 3px #f5f8fd;
    }
    .themeOneLeft div {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .themeOneLeft div p {
        font-size: 18px;
        font-weight: bold;
        color: #151033;
        margin-top: 18px;
    }
    .themeElseH {
        height: 256px!important;
    }
    .themeOneRight {
        width: 100%;
        height: 204px;
        background: #f5f7ff;
    }
    .themeOne-title {
        height: 34px;
        width: 97%;
        margin-bottom: 18px;
        margin-top: 18px;
    }
    .themeOne-title span {
        float: right;
        font-size: 16px;
        color: #fff;
    }
    /*.themeOne-second {*/
        /*height: 34px;*/
        /*width: 97%;*/
    /*}*/
    /*.themeOne-second span {*/
        /*float: right;*/
        /*font-size: 16px;*/
        /*color: #fff;*/
    /*}*/
    .themeOne-pint {
        margin-left: 6px;
        cursor: pointer;
        color: blue !important;
    }
    .themeOne-pint  i {
        display: inline-block;
        height: 30px;
        border-bottom: 1px solid blue;
    }

    .edit {
        width: 114px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        background: #151033;
    }
    .edit:hover {
        background: #3b3b56;
    }
    .edit img {
        margin-right: 8px;
    }
    .themeOneRight-div {
        width: 97%;
        margin-bottom: 20px;
        padding-left: 25px;
        color: #5d5d7c;
    }
    .themeOneRight-span {
        display: inline-block;
        border: 1px solid #a8d5f4;
        width: 84%;
        height: 40px;
        line-height: 40px;
        padding-left: 12px;
    }
    .themeThree {
        padding-left: 25px;
        position: relative;
    }
    .themeThree p {
        height: 50px;
    }
    .themeThree p span {
        display: inline-block;
        width: 33%;
        margin-bottom: -14px
    }
    .themeThree div {
        margin-bottom: 10px;
    }
    .themeThree div i {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgb(72,119,230);
    }
    .themeThree div span {
        display: inline-block;
        width: 15%;
        padding-left: 30px;
    }
    .themeThree div span a {
        color: #333;
    }
    .closeModel {
        position: absolute;
        right: -360px;
        top: 36px;
        cursor: pointer;
    }
    .closeModel:hover {
        content: url("../assets/img/closeh.png");
    }
    .editPlus {
        display: inline-block;
        width: 98px;
        color: #fff;
        height: 30px;
        line-height: 30px;
        margin-left: 5px;
        font-size: 16px;
    }
    .editPlus img {
        margin-right: 8px;
    }
    .aLinkClick {
        padding-left: 23px;
    }
    .deploy {
        display: inline-block;
        position: absolute;
        right: 38px;
        top: 0px;
        color: #fff;
        width: 114px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        background: #151033;
        font-size: 16px;
    }
    .deploy:hover {
        background: #3b3b56;
    }

    .logData{
        width: 100%;
        margin: 0 10px;
        height: 57vh;
        overflow-y: auto;
    }
    .themeFour {
        background: #fff;
        padding: 20px 30px;
        display: flex;
        justify-content: left;
        align-items: center;
    }
    .themeFour-Context {
        padding: 8px 2px 0 10px;
        height: 40vh;
    }
    .myScrollbar >>> .el-scrollbar__wrap { overflow: scroll; width: 101%; height: 120%; }

    .logTextarea {
        width: 96%;
        height: 56vh;
        overflow-x: hidden;
        border: none;
        resize:none;
        background: #f5f7ff;
    }
    .logTextarea:focus {
        outline: none;
    }
    .logData >>> textarea {
        Scrollbar-Arrow-Color: red;
    }

    /**/
    .themeLog {

    }
    .themeLog-box {
        padding: 22px 50px;
        background: #f5f7ff;
    }
    .themeLogH {
        height: 540px;
    }

</style>