{% 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="restart">重启</el-button>
            </el-popover>
            <el-popover
                    placement="top-start"
                    title="友情提示"
                    width="300"
                    trigger="hover"
                    content="如果更新后更新功能未生效，请重启容器！！">
                <el-button slot="reference" type="danger" @click="do_update"
                           v-if="update">更新
                </el-button>
            </el-popover>
            <el-popover
                    placement="top-start"
                    title="友情提示"
                    width="300"
                    trigger="hover"
                    content="如果提示更新失败，可以使用本功能同步数据库！！">
                <el-button slot="reference" type="warning" @click="do_xpath">同步数据库
                </el-button>
            </el-popover>
            <el-popover
                    placement="top-start"
                    title="友情提示"
                    width="300"
                    trigger="hover"
                    content="如果遇到无法更新的情况，您可以选择重建容器或者进入容器命令行到项目根目录执行`git pull`命令！">
                <el-link slot="reference" type="success">
                    <span v-if="{{ restart }}">容器已运行：{{ delta }}</span>
                    <span v-text="time"></span>
                </el-link>
            </el-popover>
            <el-tag type="success" style="float: right;"
                    effect="plain">
                <span v-text="branch"></span>
            </el-tag>
        </div>
        <div class="text item">
            <el-card class="box-card" shadow="hover" v-if="show">
                <div slot="header" class="clearfix">
                    <span>更新记录</span>
                    {#                    <el-tag style="float: right; padding: 3px 0"#}
                    {#                            :key="log.res[0] == 0 ? '操作成功！' : '出错啦！'"#}
                    {#                            :type="log.res[0] == 0 ? 'success' : 'warning'">#}
                    {#                        <span v-text="log.res[0] == 0 ? '操作成功！' : '出错啦！'"></span>#}
                    {#                    </el-tag>#}
                </div>
                <div class="text item">
                    <el-row>
                        <el-col :sm="8" :lg="6" :xs="11" v-for="log in update_log">
                            <el-result :icon="log.res == 0 ? 'success' : 'warning'"
                                       :title="log.command"
                                       :subTitle="log.command">
                            </el-result>

                        </el-col>
                    </el-row>
                </div>
            </el-card>

            <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-html="update_note.data">
                                    </p>
                                    <h4>版本编号：
                                        <span v-html="update_note.hexsha"></span>
                                    </h4>
                                </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-html="update_note.data">
                                    <h4>版本编号：
                                        <span v-html="update_note.hexsha"></span>
                                    </h4>
                                    </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   }},
            update_log: {},
            restart: true,
            update: {{ update }},
            local_log_width: 24,
            cid: "{{ cid }}",
            time: '',
            show: false,
            branch: "{{ branch }}"
        },
        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) {
                    location.reload()
                    {#this.$route.replace("{% url "update_page" %}")#}
                }
            }
        },
        methods: {
            timeDown() {
                console.log(this.time)
                this.time--
            },
            do_restart() {
                this.$confirm('重启容器, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(
                        "{% url "do_restart" %}", {
                            params: {
                                cid: this.cid
                            }
                        }).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_xpath() {
                this.$confirm('初始化Xpath, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(
                        "{% url "do_xpath" %}", {
                            params: {
                                cid: this.cid
                            }
                        }).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(() => {
                    this.$message({
                        type: 'success',
                        message: '更新指令发送成功！稍后请在接到通知后同步数据库！'
                    });
                    axios.get(
                        "{% url "do_update" %}"
                    ).then(res => {
                        if (res.data.code === 0) {
                            console.log(res, 1)
                            this.update_log = res.data.data.result
                            this.show = true
                            {#console.log('规则更新记录', res.data.data.xpath_update)#}
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                            setTimeout(() => {
                                window.location.reload()
                            }, 15000)
                        } 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>