<template>
    <div class="container">
        <el-alert
            v-if="state === 0"
            title="请谨慎操作"
            type="warning"
            description="重新部署会导致网站暂时无法访问"
            :closable="false"
            show-icon>
        </el-alert>
        <div v-if="state === 0" style="margin-top:20px">
            <el-button size="small" @click="deploy" type="danger" plain>重新部署</el-button>
        </div>


        <el-alert
            v-if="state === 1"
            :closable="false"
            title="部署中-编译代码"
            description="部署过程中请不要进行其他操作"
            type="info"
            show-icon>
        </el-alert>
        <el-alert
            v-if="state === 2"
            :closable="false"
            title="部署中-重启tomcat"
            description="部署过程中请不要进行其他操作"
            type="info"
            show-icon>
        </el-alert>
        <el-alert
            v-if="state === 3"
            :closable="false"
            title="部署成功"
            type="success"
            show-icon>
        </el-alert>
        <el-progress :percentage="percentage" v-if="state !== 0"></el-progress>
        <pre class="output" ref="output" v-if="state !== 0">{{output}}</pre>
    </div>
</template>
<script>
    import axios from 'axios'

    export default {
        data() {
            return {
                url: '',
                percentage: 0,
                state: 0,
                output: ''
            }
        },
        methods: {
            deploy() {
                this.$confirm('确定重新部署?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return axios.post('http://49.4.67.181:8000/job/信牧基础平台/build', {
                        auth: {
                            username: 'admin',
                            password: '3edc#EDC'
                        }
                    })
                }).then(res => {
                    if (res.status === 201) {
                        return axios.get(`${res.headers['location']}api/json`)
                    } else {
                        throw ''
                    }
                }).then(res => {
                    this.url = res.data.executable.url;
                    this.percentage = 0;
                    this.output = '';
                    this.state = 1;
                    this.pollingStatus();
                }).catch(e => {
                });
            },
            pollingStatus() {
                axios.get(`${this.url}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();
                            }, 1000);
                        } else {
                            this.state = 2;
                            axios.get('http://49.4.67.181:8083/admin#/myTasks' || this.$baseUrl, {
                                timeout: 600000
                            }).then(res => {
                                this.state = 3;
                                this.percentage = 100;
                                this.$message.success('部署成功')
                            }).catch(e => {

                            });
                        }
                    }
                });
                axios.get(`${this.url}/logText/progressiveText?start=0`).then(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%;
        .output {
            flex-basis: 0;
            flex-grow: 1;
            overflow: auto;
            margin-top: 40px;
            font-size: 14px;
            color: #666666;
        }
    }
</style>
