{% extends './base.html' %}
{% block structure %}{{ block.super }}<!--       ui/radio_update -->
{% endblock %}

{% block content %}
    <option-set>
        <option-radio v-for="option, index in options" :key="index"
                      :title="option[1]"
                      :name="params[Object.keys(params)[0]]"
                      :value="option[0]"
                      :id="index"></option-radio>
    </option-set>
{% endblock %}

{% block script %}{{ block.super }}
    <!-- 💙 ui/radio_update -->
    <script>
        const vm = new Vue({
            mixins: [base, patch],
            el: '#content',
            data: {
                options: [], originalValue: undefined
            },
            updated() { // 组件挂载之后
                document.querySelectorAll('input').forEach(it => {
                    if (it.attributes['type'].value === 'radio') {
                        // SO https://stackoverflow.com/questions/11973678/difference-between-element-value-and-element-getattributevalue
                        const value = this.params[Object.keys(this.params)[0]]
                        if (value.toString() === it.value) {
                            it.setAttribute('checked', 'checked')
                        }
                        it.onclick = event => {
                            const key = Object.keys(this.params)[0]
                            this.params[key] = it.value
                            this.smartsubmit(event)
                        }
                    }
                })
            },
            methods: {
                onPrepare() {
                    const url = new URL(document.URL)
                    const resource = url.searchParams.get('resource')
                    const name = url.searchParams.get('name')
                    const value = url.searchParams.get('value')
                    if (!resource || !name || !value) {
                        showAlert('请传入 resource, name 和 value')
                        return
                    }
                    document.title += ` ${gettext(name)}`
                    // 动态获取参数
                    httpUtilrequest('GET', '/api/v1/choices/', {
                        'resource': resource,
                        'property': name
                    }, (code, data) => {
                        this.call.method = data.method
                        this.call.endpoint = data.endpoint
                        this.options = data.property.choices
                        this.params = {[name]: value}
                        this.originalValue = value
                    })
                },
                onLoadSuccess(code, data) { // 默认模式是返回
                    this.originalValue = this.getValue()
                    this.back()
                },
                // 💛 私有方法
                getValue() {
                    return this.params[Object.keys(this.params)[0]]
                },
                smartsubmit(event) {
                    if (this.getValue() !== this.originalValue) {
                        this.submit(event)
                    } else {
                        console.warn(JSON.stringify(this.params), '与之前相同, 不提交服务器更新')
                        this.back()
                    }
                }
            }
        })
    </script>
    <!-- 💛 自定义 script -->{% endblock %}
