<div id="common"></div>
<script>
    var bayke = new Vue({
        el: '#common',
        delimiters: ['{$', '$}'],
        created() {
            this.messageShow()
            // this.notificationShow()
        },
        methods: {
            // 简单的消息提示
            toastMessage(type, message) {
                this.$buefy.toast.open({
                    message: message,
                    type: type
                })
            },

            // 简单提示
            messageShow() {
                let messages = "{% if messages %}{% for message in messages %}{{ message }}{% endfor %}{% endif %}"
                let tag = `{% if messages %}{% for message in messages %}is-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %}{% endfor %}{% endif %}`
                return `{% if messages %}${this.toastMessage(tag, messages)}{% endif %}`
            },

            // 通知提示
            notificationShow() {
                let messages = "{% if messages %}{% for message in messages %}{{ message }}{% endfor %}{% endif %}"
                let tag = `{% if messages %}{% for message in messages %}is-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %}{% endfor %}{% endif %}`
                return `{% if messages %}${this.$buefy.notification.open({
                    message: messages,
                    type: tag,
                    pauseOnHover: true,
                    position: "is-top",
                    closable: false
                })}{% endif %}`
            },

            // 获取csrftoken
            getCookie(name) {
                let cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    const cookies = document.cookie.split(';');
                    for (let i = 0; i < cookies.length; i++) {
                        const cookie = cookies[i].trim();
                        // Does this cookie string begin with the name we want?
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            },

            // 封装fetch请求
            handleResponse(response) {
                let contentType = response.headers.get('content-type')
                if (contentType.includes('application/json')) {
                    return handleJSONResponse(response)
                } else if (contentType.includes('text/html')) {
                    return handleTextResponse(response)
                } else {
                    // Other response types as necessary. I haven't found a need for them yet though.
                    throw new Error(`Sorry, content-type ${contentType} not supported`)
                }
            },
            handleJSONResponse(response) {
                return response.json()
                    .then(json => {
                        if (response.ok) {
                            return json
                        } else {
                            return Promise.reject(Object.assign({}, json, {
                                // status: response.status,
                                // statusText: response.statusText
                            }))
                        }
                    })
            },
            handleTextResponse(response) {
                return response.text()
                    .then(text => {
                        if (response.ok) {
                            return text
                        } else {
                            return Promise.reject({
                                status: response.status,
                                statusText: response.statusText,
                                err: text
                            })
                        }
                    })
            }
        }
    })
</script>