<template>
    <div class="container">
        <div v-if="building" class="building">
            <el-alert
                v-if="percentage<100"
                :closable="false"
                title="部署中"
                type="info"
                show-icon>
            </el-alert>
            <el-alert
                v-else
                :closable="false"
                title="部署成功"
                type="success"
                show-icon>
            </el-alert>
            <el-progress :percentage="percentage"></el-progress>
            <pre class="output" ref="output">{{output}}</pre>
        </div>
        <div v-else>
            <el-alert title="请谨慎操作" type="warning" description="重新部署会导致网站暂时无法访问" :closable="false" show-icon></el-alert>
            <el-button size="small" style="margin-top:20px" @click="deploy">重新部署</el-button>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'

    export default {
        data() {
            return {
                url: '',
                percentage: 0,
                building: false,
                output: ''
            }
        },
        methods: {
            deploy() {
                this.$confirm('确定重新部署?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post('http://49.4.67.181:8000/job/信牧基础平台/build', {
                        auth: {
                            username: 'admin',
                            password: '3edc#EDC'
                        }
                    }).then(res => {
                        if (res.status === 201) {
                            this.buildid = /(.*)\/(.+?)\/$/.exec(res.headers['location'])[2];
                            this.percentage = 0;
                            this.building = true;
                            this.pollingStatus();
                        } else {

                        }
                    })
                }).catch(() => {
                });
            },
            pollingStatus() {
                axios.get(`http://49.4.67.181:8000/job/信牧基础平台/${this.buildid}/api/json`).then(res => {
                    if (res.status === 200) {
                        if (res.data.building) {
                            let p = (new Date().getTime() - res.data.timestamp) * 100 / res.data.estimatedDuration;
                            p = p < 0 ? 0 : (p >= 100 ? 99 : parseInt(p));
                            this.percentage = p;
                            setTimeout(() => {
                                this.pollingStatus();
                                this.pollingOutputs();
                            }, 500);
                        } else {
                            this.percentage = 100;
                            this.$message.success('部署成功')
                        }
                    }
                })
            },
            pollingOutputs() {
                axios.get(`http://49.4.67.181:8000/job/信牧基础平台/${this.buildid}/logText/progressiveText?start=0`).then(res => {
                    console.log(res);
                    if (res.status === 200) {
                        this.output = res.data;
                        setTimeout(() => {
                            this.$refs.output.scrollTop = this.$refs.output.scrollHeight;
                        }, 100)
                    }
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    .container {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: auto;
        .building {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: auto;
            .output {
                flex-basis: 0;
                flex-grow: 1;
                overflow: auto;
                margin-top: 40px;
                font-size: 14px;
                color: #666666;
            }
        }
    }
</style>
