<template>
    <div class="controls">
        <div class="row">
            <div class="preview-size-slide col">
                <div class="form-group">
                    <div class="form-label">Preview size: {{ preview_size }}</div>
                    <input id="preview_size"
                    @change="change_preview_size"
                    v-model="preview_size"
                    type="range"
                    min="10" max="400"
                    step="5">
                </div>
            </div>
            <div class="col">
                <div class="row border rounded p-2">
                    <div class="col">
                        <strong>Must include:</strong>
                        <div class="form-check" v-for="label in labels" :key="label.id">
                            <input class="form-check-input" :id="`include-${label.id}`" type="checkbox" @change="toggle_include_label(label)" :checked="include_labels.includes(label.id)">
                            <label class="form-check-label" :for="`include-${label.id}`">{{ label.name }}</label>
                        </div>
                    </div>
                    <div class="col">
                        <strong>Must not include:</strong>
                        <div class="form-check" v-for="label in labels" :key="label.id">
                            <input class="form-check-input" :id="`exclude-${label.id}`" type="checkbox" @change="toggle_exclude_label(label)" :checked="exclude_labels.includes(label.id)">
                            <label class="form-check-label" :for="`exclude-${label.id}`">{{ label.name }}</label>
                        </div>
                    </div>
                    <div class="col">
                        <button class="btn btn-success" @click="search">Search</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <GenericManager
        :uri="resource_uri"
        object_name="数据标注"
        :visible_fields="visible_fields"
        :actions="actions"
        no_edit="1" no_details="1" no_delete="1" no_create="1"
        ref="generic_manager"
        :custom_fields="custom_fields"
    >
    </GenericManager>
</template>

<script>
import GenericManager from '@/components/generic-manager.vue'
export default {
    name: 'Labeling',
    components: {
        GenericManager,
    },
    data() {
        return {
            preview_size: 50,
            labels: [],
            visible_fields: ['id', 'succeeded', 'labels', 'code', 'location', 'product__name'],
            include_labels: [],
            exclude_labels: [],
        }
    },
    computed: {
        resource_uri() {
            var url = '/api/v1/scan-data/?';
            if (this.include_labels.length > 0) {
                url += `include_labels=${this.include_labels.join(',')}&`;
            }
            if (this.exclude_labels.length > 0) {
                url += `exclude_labels=${this.exclude_labels.join(',')}&`;
            }
            return url;
        },
        custom_fields() {
            return [
                {
                    title: '扫码图像',
                    get_html: (item) => {
                        var url = `/api/v1/oss-image/?name=${item.image}&token=${this.$root.token}`;
                        return `<a href="${url}" target="_blank"><img width="${this.preview_size}" src="${url}" /></a>`;
                    }
                }
            ]
        },
        actions() {
            if (!this.labels) {
                return []
            }
            return this.labels.map(label => ({
                handler: (item) => {
                    this.toggle_label(item, label);
                },
                name: `${label.name}`,
                icon: 'tag',
            }))
        },
    },
    methods: {
        search() {
            this.$refs.generic_manager.reload();
        },
        toggle_include_label(label) {
            var oldval = this.include_labels.includes(label.name);
            if (oldval) {
                this.include_labels = this.include_labels.filter(l => l !== label.name);
            } else {
                this.include_labels.push(label.name);
            }
        },
        toggle_exclude_label(label) {
            var oldval = this.exclude_labels.includes(label.name);
            if (oldval) {
                this.exclude_labels = this.exclude_labels.filter(l => l !== label.name);
            } else {
                this.exclude_labels.push(label.name);
            }
        },
        change_preview_size() {
            localStorage.setItem('labeling_preview_size', this.preview_size);
        },
        toggle_label(item, label) {
            console.log(item, label);
            var cur_labels = item.labels || "";
            var new_labels = cur_labels.split(",");
            if (new_labels.includes(label.name)) {
                new_labels = new_labels.filter(l => l !== label.name);
            } else {
                new_labels.push(label.name);
            }
            item.labels = new_labels.filter(l => l).join(",");
            this.$root.api_patch(`/api/v1/scan-data/${item.id}/`, {
                labels: item.labels,
            });
        },
        async reload() {
            var url = '/api/v1/datalabel/';
            var r = await this.$root.api_get(url);
            this.labels = r.data.objects
            this.preview_size = localStorage.getItem('labeling_preview_size') || 50;
        }
    },
    mounted() {
        this.reload()
    },
}
</script>
<style>
</style>
