{% load static %}

<!-- 引入样式 -->

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

<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <el-popover
                    placement="top-start"
                    title="友情提示"
                    width="300"
                    trigger="hover"
                    content="更新之前会自动备份数据库，更新完毕后会自动重启容器！">
                <el-button slot="reference" type="danger" @click="do_update"
                           v-if="update && restart"
                >重启更新
                </el-button>
            </el-popover>
            <el-popover
                    placement="top-start"
                    title="友情提示"
                    width="300"
                    trigger="hover"
                    content="没啥特殊功能，就是重启下容器！">
                <el-button slot="reference" type="danger" @click="do_restart" v-if="!update && restart">重启</el-button>
            </el-popover>
            <el-popover
                    placement="top-start"
                    title="友情提示"
                    width="300"
                    trigger="hover"
                    content="未映射docker路径，更新完毕后请手动重启容器！">
                <el-button slot="reference" type="danger" @click="do_update"
                           v-if="update && !restart">更新
                </el-button>
            </el-popover>
            <el-popover
                    placement="top-start"
                    title="友情提示"
                    width="300"
                    trigger="hover"
                    content="如果遇到无法更新的情况，您可以选择重建容器或者进入容器命令行到项目根目录执行`git pull`命令！">
                <el-link slot="reference"
                         type="success">{{ update_tips }}
                    <span v-if="{{ restart }}"> + 容器已运行：{{ delta }}</span>
                    <span v-text="time"></span>
                </el-link>
            </el-popover>
        </div>
        <div class="text item">
            <el-row>
                <el-col :span="12" v-if="update" :xs="24">
                    <el-card class="box-card" shadow="hover">
                        <div slot="header" class="clearfix">
                            <span>更新日志</span>
                        </div>
                        <el-timeline>
                            <el-timeline-item
                                    v-for="(update_note, index) in update_notes"
                                    :key="index"
                                    {# :icon="activity.icon" #}
                                    {# :type="activity.type" #}
                                    color="#0bbd87"
                                    {# :size="activity.size" #}
                                    :timestamp="update_note.date">
                                <el-card shadow="hover">
                                    <p v-for="content in update_note.data" v-html="content">
                                    </p>
                                </el-card>

                            </el-timeline-item>
                        </el-timeline>
                    </el-card>
                </el-col>

                <el-col :span="local_log_width" :xs="24">
                    <el-card class="box-card" shadow="hover">
                        <div slot="header" class="clearfix">
                            <span>本地日志</span>
                        </div>
                        <el-timeline>
                            <el-timeline-item
                                    v-for="(update_note, index) in local_logs"
                                    :key="index"
                                    icon="el-icon-refresh"
                                    type="success"
                                    color="#0bbd87"
                                    {# :size="activity.size" #}
                                    :timestamp="update_note.date">
                                <el-card shadow="hover">
                                    <p v-for="content in update_note.data" v-html="content">
                                    </p>
                                </el-card>

                            </el-timeline-item>
                        </el-timeline>
                    </el-card>
                </el-col>
            </el-row>

        </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_notes: {{  update_notes | safe   }},
            local_logs: {{   local_logs | safe   }},
            {#local_log: [],#}
            restart: true,
            update: {{ update }},
            local_log_width: 24,
            cid: "{{ cid }}",
            time: ''
        },
        created() {
            if (this.update) {
                this.local_log_width = 12
            }
            if (this.cid === '') {
                this.restart = false
            }
            this.$message({
                showClose: true,
                message: "{{ update_tips }}",
                type: 'success'
            });
        },
        watch: {
            time: function (newValue) {
                if (newValue == 0) {
                    this.$router.push("{% url "update_page" %}")
                }
            }
        },
        methods: {
            timeDown() {
                this.time--
            },
            do_restart() {
                this.$confirm('重启容器, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(
                        "{% url "do_restart" %}"
                    ).then(res => {
                        if (res.data.code === 0) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                            this.time = 15
                            setInterval(this.timeDown, 1000)
                        } else {
                            console.log(res)
                            this.$message({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    })
                }).catch(res => {
                    {#console.log(res)#}
                    this.$message({
                        type: 'info',
                        message: '已取消重启'
                    });
                });
            },

            do_update() {
                this.$confirm('此操作会拉取代码并更新软件,并重启容器，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(
                        "{% url "do_update" %}", {
                            params: {
                                cid: this.cid
                            }
                        }
                    ).then(res => {
                        if (res.data.code === 0) {
                            console.log(res, 1)
                            this.update_log = res.data.data.result
                            {#console.log('规则更新记录', res.data.data.xpath_update)#}
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                            this.time = 15
                            setTimeout(this.timeDown, 1000)
                        } 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>