{% load i18n static simpletags simple_ext_tags %}
{% if result_hidden_fields %}
    <div class="hiddenfields">{# DIV for HTML validation #}
        {% for item in result_hidden_fields %}{{ item }}{% endfor %}
    </div>
{% endif %}
<div class="results">
    <table id="result_list">
        <thead>
        <tr>
            {% for header in result_headers %}
                <th scope="col" {{ header.class_attrib }}>
                    {% if header.sortable %}
                        {% if header.sort_priority > 0 %}
                            <div class="sortoptions">
                                <a class="sortremove" href="{{ header.url_remove }}"
                                   title="{% trans "Remove from sorting" %}"></a>
                                {% if num_sorted_fields > 1 %}<span class="sortpriority"
                                                                    title="{% blocktrans with priority_number=header.sort_priority %}Sorting priority: {{ priority_number }}{% endblocktrans %}">{{ header.sort_priority }}</span>{% endif %}
                                <a href="{{ header.url_toggle }}"
                                   class="toggle {% if header.ascending %}ascending{% else %}descending{% endif %}"
                                   title="{% trans "Toggle sorting" %}"></a>
                            </div>
                        {% endif %}
                    {% endif %}
                    <div class="text">{% if header.sortable %}
                        <a href="{{ header.url_primary }}">{{ header.text|capfirst }}</a>{% else %}
                        <span>{{ header.text|capfirst }}</span>{% endif %}</div>
                    <div class="clear"></div>
                </th>{% endfor %}
        </tr>
        </thead>
        <tbody>
        {% for result in results %}
            {% if result.form.non_field_errors %}
                <tr>
                    <td colspan="{{ result|length }}">{{ result.form.non_field_errors }}</td>
                </tr>
            {% endif %}
            <tr class="{% cycle 'row1' 'row2' %}">
                {% for item in result %}
                    {% with instance=result.form.instance %}
                        {% with field_info=item|table_item_type:instance %}
                            {% if field_info.field_type == 'boolean' %}
                                <td class="field-{{ field_info.field_name }}" data-row="{{ forloop.parentloop.counter0 }}" data-field="{{ field_info.field_name }}">
                                    {% if field_info.editable %}
                                        <!-- 保留原始复选框但隐藏它 -->
                                        <input type="checkbox"
                                               id="{{ field_info.input_id }}"
                                               name="{{ field_info.input_name }}"
                                               style="display:none"
                                               {% if field_info.value %}checked{% endif %}>
                                        <!-- 添加 El-Switch 组件 -->
                                        <el-switch 
                                                  :value="getFieldValue({{ forloop.parentloop.counter0 }}, '{{ field_info.field_name }}')"
                                                  @change="updateCheckbox('{{ field_info.input_id }}', $event, {{ forloop.parentloop.counter0 }}, '{{ field_info.field_name }}')"
                                                  >
                                        </el-switch>
                                    {% else %}
                                        <!-- 不可编辑的布尔字段 -->
                                        <el-tag type="{{ field_info.value|yesno:'success,danger' }}" size="small">
                                            {{ field_info.value|yesno:_("Yes,No") }}
                                        </el-tag>
                                    {% endif %}
                                </td>

                            {% elif field_info.field_type == 'image' %}
                                <td class="field-{{ field_info.field_name }}">
                                    {% if field_info.value %}
                                    <el-image
                                    src="{{ field_info.value }}"
                                    :preview-src-list="['{{ field_info.value }}']"
                                    style="width: 45px; height: 45px; object-fit: cover;border-radius: 4px;"
                                    fit="cover">
                                </el-image>

                                    {% else %}
                                        {% trans "No Image" %}
                                    {% endif %}
                                </td>
                            {% elif field_info.field_type == 'tag' %}
                                <td class="field-{{ field_info.field_name }}">
                                    <el-tag type="{{ field_info.tag_type }}" size="small">
                                        {{ field_info.display_name }}
                                    </el-tag>
                                </td>
                            {% else %}
                                {{ item }}
                            {% endif %}
                        {% endwith %}
                    {% endwith %}
                {% endfor %}
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<script type="text/javascript">
    new Vue({
        el: "#result_list",
        data() {
            return {
                fieldValues: {
                    {% for result in results %}
                        {% for item in result %}
                            {% with instance=result.form.instance %}
                                {% with field_info=item|table_item_type:instance %}
                                    {% if field_info.field_type == 'boolean' %}
                                        '{{ forloop.parentloop.counter0 }}_{{ field_info.field_name }}': {% if field_info.value %}true{% else %}false{% endif %},
                                    {% endif %}
                                {% endwith %}
                            {% endwith %}
                        {% endfor %}
                    {% endfor %}
                }
            }
        },
        methods: {
            getFieldValue(row, fieldName) {
                const key = `${row}_${fieldName}`;
                return this.fieldValues[key] || false;
            },
            updateCheckbox(id, value, row, fieldName) {
                // 更新隐藏的复选框
                document.getElementById(id).checked = value;
                // 更新数据模型
                const key = `${row}_${fieldName}`;
                this.fieldValues[key] = value;
            }
        }
    });
</script>