<!-- XClab系统页面 -->
<template>
    <div class="labsystem">
        <div class="labContent">
            <div class="labContent-title">
                <p >XClab系统</p>
            </div>
            <div class="themeContent">
                <div class="themeBtn"> <span>项目归档</span> </div>
                <div class="themeName"> <i></i> {{name}} </div>
                <div class="themeOne">
                    <p class="themeOne-title"> <i></i> 项目信息 <!--<span class="edit"><img src="../assets/img/edit.png" alt="">编辑</span>--> </p>
                    <div class="themeOne-context">
                        <el-row :gutter="24">
                            <el-col :offset="1" :span="11">
                                <div>项目路径： <span class="themeOne-pint" @click="openAnother(path)"> <i>{{path}}</i> </span></div>
                            </el-col>
                            <el-col :offset="1" :span="11">
                                <div>gitlab地址： <span>{{gitPath}}</span> </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="themeTwo">
                    <p class="themeOne-title"> <i></i> 项目配置详情 <span class="save"><img src="../assets/img/save.png" alt="">保存</span> </p>
                    <div class="themeTwo-context">
                        <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 class="themeThree">
                    <p class="themeOne-title"> <i></i> 项目环境 <span class="apply" @click="apply"><img src="../assets/img/apply.png" alt="">重新申请</span> </p>
                    <div class="themeThree-context">
                        <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/img/edit.png" alt=""> 编辑</i>
                            <i class="edit editPlus" v-if="editLink === true" @click="saveLinkClick"><img src="../assets/img/edit.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 class="themeFour">
                    <p class="themeOne-title"> <i></i> 项目运行日志 <span class="refresh"><img src="../assets/img/refresh.png" alt="">刷新</span> </p>
                    <div class="themeFour-context">
                        <!--<div v-if="logData.length === 0" class="logNone">暂无数据</div>-->
                        <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>
        <!--重新申请弹窗-->
        <el-dialog :visible.sync="applyModal" width="0%" >
            <newApply :val="applyMessage" :applyId="applyId" :osId="osId" @on-closeWeb="websocketCosle" @on-websocket="newWebsocket()" @on-project="newProject()" @on-close="reset()"></newApply>
            <img src="../assets/img/close.png" class="closeModel" @click="reset()">
        </el-dialog>

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

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import newApply from '../components/dial/newApply';
import baseUrl from '../../config';
export default {
    name: 'labSystem',
    // import引入的组件需要注入到对象中才能使用
    components: {newApply},
    props: {},
    data() {
        // 这里存放数据
        return {
            id: 1, //
            path: '', // 项目路径
            gitPath: '', // git路径
            name:'', // 项目名字
            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();
        // this.copyWebsocket();
    },
    // 生命周期 - 创建之前
    beforeCreate () {},
    // 生命周期 - 挂载之前
    beforeMount () {},
    // 生命周期 - 更新之前
    beforeUpdate () {},
    // 生命周期 - 更新之后
    updated () {
        this.scrollDown()
    },
    // 生命周期 - 销毁之前
    beforeDestroy () {},
    // 生命周期 - 销毁完成
    destroyed () {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
    }
</script>

<style scoped>
    .labsystem {
        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;
    }
    .themeBtn {
        text-align: right;
    }
    .themeBtn span {
        display: inline-block;
        width: 100px;
        height: 34px;
        line-height: 34px;
        background: #4877e6;
        color: #fff;
        text-align: center;
        border-radius: 5px;
    }
    .themeBtn span:hover {
        background: #1c45a4;
    }
    .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-title span {
        float: right;
        font-size: 18px;
        color: rgba(72,119,230,.6);
        font-weight: normal;
    }
    .themeOne-title span img {
        margin-right: 8px;
    }
    .themeOne-title span:hover {
        color: #4877e6;
    }
    .themeOne-title .edit:hover img {
        content: url("../assets/img/eidth.png");
    }
    .themeOne-title .save:hover img {
        content: url("../assets/img/saveh.png");
    }
    .themeOne-title .apply:hover img {
        content: url("../assets/img/applyh.png");
    }
    .themeOne-title .refresh:hover img {
        content: url("../assets/img/refreshh.png");
    }
    /* 二级标题样式可以重复使用 */

    .themeOne-pint {
        cursor: pointer;
        color: blue !important;
    }
    .themeOne-pint  i {
        display: inline-block;
        height: 30px;
        border-bottom: 1px solid blue;
    }
    .themeOne >>> div span {
        color: #333;
        display: inline-block;
        width: 60%;
        height: 36px;
        /*background: #f5f8fd;*/
        /*border: 1px solid #d5e3ff;*/
        /*border-radius: 2px;*/
        line-height: 36px;
        padding: 0 12px;
        margin-bottom: -14px;
    }
    .themeTwo-context,.themeThree-context,.themeFour-context  {
        width: 96%;
        margin: 0 auto;
        height: 115px;
        border: 2px solid #eaf1ff;
        margin-top: 10px;
        margin-bottom: 30px;
        padding: 30px 2px 30px 50px;
    }

    .themeThree-context {
        height: 150px;
        color: #666;
        position: relative;
    }
    .themeThree-context p {
        height: 50px;
    }
    .themeThree-context p span {
        /*color: #333;*/
        display: inline-block;
        width: 33%;
        /*height: 36px;*/
        /*background: #f5f8fd;*/
        /*border: 1px solid #d5e3ff;*/
        /*border-radius: 2px;*/
        /*line-height: 36px;*/
        /*padding: 0 12px;*/
        margin-bottom: -14px
    }
    .themeThree-context div {
        margin-bottom: 10px;
    }
    .themeThree-context div i {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgb(72,119,230);
    }
    .themeThree-context div span {
        display: inline-block;
        width: 15%;
        padding-left: 30px;
    }
    .themeThree-context div span a {
        color: #333;
    }
    .closeModel {
        position: absolute;
        right: -360px;
        top: 36px;
        cursor: pointer;
    }
    .closeModel:hover {
        content: url("../assets/img/closeh.png");
    }
    .editPlus {
        color: rgba(72,119,230,.6);
    }
    .editPlus:hover {
        color: #4877e6;
    }
    .editPlus:hover img {
        content: url("../assets/img/eidth.png");
    }
    .editPlus img {
        margin-right: 8px;
    }
    .aLinkClick {
        padding-left: 23px;
    }
    .deploy {
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 17px;
        color: rgba(72,119,230,.6);
    }
    .deploy:hover {
        color: #4877e6;
    }
    .logData{
        width: 100%;
        margin: 0 10px;
        height: 39vh;
        overflow-y: auto;
    }
    .logLi{
        color: #FFF;
        font-size: 16px;
        padding: 10px 10px;
        text-align: left;
        border-bottom: 3px dotted rgba(3,110,183, 0.2);
        word-wrap:break-word;
    }
    .el-textarea {
        width: 95%;
    }
    .themeFour-context {
        padding: 8px 2px 0 10px;
        height: 40vh;
    }
    .myScrollbar {
        /*overflow-x: auto;*/
        /*width: 98%;*/
    }
    .el-scrollbar__wrap {overflow-x:hidden;}

    .myScrollbar >>> .el-scrollbar__wrap { overflow: scroll; width: 101%; height: 120%; }

    .logTextarea {
        width: 99%;
        height: 38vh;
        overflow-x: hidden;
        border: none;
        resize:none;

    }
    .logTextarea:focus {
        outline: none;
    }
    .logData >>> textarea {
        Scrollbar-Arrow-Color: red;
    }
</style>