<template>
    <div class="container" :style="{height:height}">
        <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: '',
                estimatedDuration: 0,
                startTime: 0,
                auth: {
                    username: 'admin',
                    password: '3edc#EDC'
                }
            }
        },
        computed: {
            height() {
                return window.innerHeight - 100 + 'px'
            }
        },
        methods: {
            deploy() {
                this.$confirm('确定重新部署?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return axios.post('http://121.43.171.110:8000/job/信牧基础平台/build', null, {
                        auth: this.auth
                    })
                }).then(res => {
                    if (res.status === 201) {
                        this.startTime = new Date().getTime();
                        return axios.get(`${res.headers['location']}api/json`, {
                            auth: this.auth
                        })
                    } 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`, {
                    auth: this.auth
                }).then(res => {
                    if (res.status === 200) {
                        if (res.data.building) {
                            if (!this.estimatedDuration) {
                                this.estimatedDuration = res.data.estimatedDuration + 80000;
                            }
                            let p = (new Date().getTime() - this.startTime) * 100 / this.estimatedDuration;
                            p = p < 0 ? 0 : (p >= 100 ? 99 : parseInt(p));
                            this.percentage = p;
                            setTimeout(() => {
                                this.pollingStatus();
                            }, 1000);
                        } else {
                            this.state = 2;

                            let interval = setInterval(() => {
                                let p = (new Date().getTime() - this.startTime) * 100 / this.estimatedDuration;
                                p = p < 0 ? 0 : (p >= 100 ? 99 : parseInt(p));
                                this.percentage = p;
                                axios.get('http://121.43.171.110:8080/admin' || this.$baseUrl, {
                                    timeout: 2000
                                }).then(res => {
                                    console.log(res);
                                    this.state = 3;
                                    this.percentage = 100;
                                    this.$message.success('部署成功');
                                    this.$alert('请刷新页面', '部署成功', {
                                        type: 'success',
                                        confirmButtonText: '立即刷新',
                                    }).then(() => {
                                        location.reload();
                                    }).catch(() => {
                                    });
                                    clearInterval(interval);
                                }).catch(e => {
                                });
                            }, 2100)
                        }
                    }
                });
                axios.get(`${this.url}/logText/progressiveText?start=0`, {
                    auth: this.auth
                }).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 {
            overflow: auto;
            font-size: 14px;
            color: #666666;
            flex-basis: 0;
            flex-grow: 1;
            margin-top: 40px;
        }
    }
</style>
