<div id="app" v-cloak>
    <el-card class="box-card control">
        <el-row>
            <el-col :span="3">
                <a>Nginx 控制中心</a>
            </el-col>
            <el-col :span="5">
                <a @click="nginxStart">
                    <el-image v-if="run" :src="'${UrlUtil.getUrl('/static/img/start_.png')}'"
                              style="width: 50px; height: 50px"
                              fit="fill"></el-image>
                    <el-image v-if="!run" :src="'${UrlUtil.getUrl('/static/img/start.png')}'"
                              style="width: 50px; height: 50px"
                              fit="fill"></el-image>
                </a>
                <a @click="nginxStop">
                    <el-image v-if="run" :src="'${UrlUtil.getUrl('/static/img/stop.png')}'"
                              style="width: 50px; height: 50px"
                              fit="fill"></el-image>
                    <el-image v-if="!run" :src="'${UrlUtil.getUrl('/static/img/stop_.png')}'"
                              style="width: 50px; height: 50px"
                              fit="fill"></el-image>
                </a>
                <a @click="nginxReload">
                    <el-image v-if="run" :src="'${UrlUtil.getUrl('/static/img/reload.png')}'"
                              style="width: 50px; height: 50px"
                              fit="fill"></el-image>
                    <el-image v-if="!run" :src="'${UrlUtil.getUrl('/static/img/reload_.png')}'"
                              style="width: 50px; height: 50px"
                              fit="fill"></el-image>
                </a>
            </el-col>
        </el-row>
    </el-card>

    <el-card class="box-card pane-list" style="width: 260px;height: 140px" v-for="item in services">
        <div class="pane">
            <div class="img">
                <el-image style="width: 60px;height:60px" src="/static/img/http.png"></el-image>

                <a>{{item.title}}</a>
            </div>

            <div class="info">
                <el-switch
                        v-model="item.valid"
                        active-color="#13ce66"
                        active-text="启用"
                        inactive-text="暂停">
                    inactive-color="#ff4949">
                </el-switch>
            </div>

            <div class="more" @click="toSet(item)">
                <el-button type="text" size="mini"><i class="el-icon-s-operation"></i></el-button>
            </div>
        </div>
    </el-card>
</div>
<style>
    #app {
        padding: 10px;
        margin: 0 auto;
        width: 1080px;
    }

    .box-card {
        margin: 10px;
    }

    .control a:first-child {
        padding-right: 10px;
    }

    .control a {
        display: inline-block;
        line-height: 50px;
        height: 50px;
        vertical-align: top;
    }

    .control a:hover {
        background: #e7e7e7;
    }

    .control a:first-child:hover {
        background: #ffffff;
    }

    .pane-list {
        box-shadow: 0 0 0 0 inset !important;
        -webkit-box-shadow: 0 0 0 0 inset !important;
    }

    .pane-list:hover {
        box-shadow: 0 0 70px -40px inset !important;
        -webkit-box-shadow: 0 0 70px -40px inset !important;
    }

    .pane {
        width: 240px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        position: relative;
    }

    .pane .img {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .pane a {
        font-size: 14px;
        line-height: 28px;
        font-family: "微软雅黑";
        font-weight: bold;
    }

    .pane .info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .pane .more {
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<script>
    var app = new Vue({
        mixins: [mixinBase, mixinForMgr],
        el: "#app",
        data: {
            services: [],
            run: ${run?default('false')}
        },
        methods: {
            onLoadService: function () {
                var param = {
                    pageSize: 0
                };
                new Ajax("admin", "services", "find").post(param, function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        this.services = response.result;
                    }
                }.bind(this))
            },
            toSet: function (item) {
                nav.openTab({
                    title: '映射配置',
                    name: 'mapping' + item.id,
                    url: '/admin/locations.htm?servicesId=' + item.id
                })
            },
            startMonitor: function () {
                if (window.EventSource) {
                    window.evtSource = new EventSource('${UrlUtil.getUrl("/sse/1")}');
                    window.evtSource.addEventListener('message', function (e) {

                        var msg = JSON.parse(e.data);
                        if (msg.type == 'NGINX_STATE') {//状态推送
                            if (this.run != msg.object.run) {

                                this.$notify.info({
                                    title: '提示',
                                    message: "Nginx 运行状态发生变化。",
                                    duration: 5000
                                });
                                this.run = msg.object.run;
                            }
                        }
                    }.bind(this))
                }
            },
            nginxStart: function () {
                new Ajax("conf", "nginx", "start").post(function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        this.onFind();
                        this.form.dialog = false;
                    }
                }.bind(this))
            },
            nginxStop: function () {
                new Ajax("conf", "nginx", "stop").post(function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        this.onFind();
                        this.form.dialog = false;
                    }
                }.bind(this))
            },
            configFlush: function () {
                ajax.configFlush();
            },
            onRefresh: function () {
                this.configFlush();
                this.onFind();
            },
            nginxReload: function () {
                new Ajax("conf", "nginx", "reload").post(function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {

                    }
                }.bind(this))
            }
        },
        mounted: function () {
            this.onLoadService();
            this.startMonitor();
        }
    })
</script>
