{% load static %}

<!-- 引入样式 -->

<link rel="stylesheet" href="{% static 'admin/simpleui-x/elementui/theme-chalk/index.css' %}">
<!-- 引入组件库 -->

<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>更新日志</span>
            <span style="float: right;margin-top: -10px">
                 <el-button type="success" @click="do_update">更新</el-button>
                 <el-button type="danger" @click="do_restart">重启</el-button>
            </span>
        </div>
        <div class="text item">
            <ul v-for="item in update_note">
                <li v-text="item"></li>
            </ul>
            {#            {{ update_notes|safe }}#}
        </div>
    </el-card>
</div>

<script src="{% static 'admin/simpleui-x/js/vue.min.js' %}"></script>
<script src="{% static 'admin/simpleui-x/elementui/index.js' %}"></script>
<script src="{% static 'admin/simpleui-x/js/axios.min.js' %}"></script>

<script type="text/javascript">
    // 配置对象 options
    const vm = new Vue({
        // 配置选项(option)
        // element: 指定用vue来管理页面中的哪个标签区域
        el: '#app',
        data: {
            update_note: ['请先拉取更新哦']
        },
        methods: {
            do_restart() {
                this.$confirm('此操作将重启容器，并更新软件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(
                        "{% url "do_restart" %}"
                        {#url + '/task/do_restart'#}
                    ).then(res => {
                        if (res.data.code === 0) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                        } else {
                            console.log(res)
                            this.$message({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }

                    }).catch(res => {
                        this.$message({
                            type: 'error',
                            message: "重启失败！"
                        });
                    })

                }).catch(res => {
                    console.log(res)
                    this.$message({
                        type: 'info',
                        message: '已取消重启'
                    });
                });
            },
            do_update() {
                this.$confirm('此操作会拉取软件更新软件,新版本不一定稳定，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(
                        "{% url "do_update" %}"
                        {#url + '/task/do_restart'#}
                    ).then(res => {
                        if (res.data.code === 0) {
                            console.log(res, 1)
                            this.update_note = res.data.data
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                        } else {
                            console.log(res, 2)
                            this.$message({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }).catch(res => {
                        console.log(res, 3)
                        this.$message({
                            type: 'error',
                            message: "更新失败！"
                        });
                    })

                }).catch(res => {
                    console.log(res)
                    this.$message({
                        type: 'warning',
                        message: '已取消更新'
                    });
                });
            }
        }
    });
</script>