{% block component %}
{{ name }} = {
    template: "#{{ name }}",
    delimiters: ["[[", "]]"],
    props: ["crypto_key", "items", "items_headers", "items_relations", "group_by"],

    data: function() {
        return {
            dialog: false,
            dialogDelete: false,
            editedIndex: -1,
            defaultItem: {},
            editedItem: {},
            search: null,
        }
    },

    computed: {
        editable_fields: function() {
            return this.items_headers.filter(e => e.editable)
        },
    },

    watch: {
        dialog (val) {
            val || this.close()
        },
        dialogDelete (val) {
            val || this.closeDelete()
        },
    },

    methods: {

        editItem (item) {
            this.editedIndex = this.items.indexOf(item)
            this.editedItem = Object.assign({}, item)
            this.dialog = true
        },

        deleteItem (item) {
            this.editedIndex = this.items.indexOf(item)
            this.editedItem = Object.assign({}, item)
            this.dialogDelete = true
        },

        deleteItemConfirm () {
            var self = this
            var item = this.items[this.editedIndex]

            this.$emit("deleteItem", this.editedIndex)
            this.closeDelete()

        },

        close () {
            this.dialog = false
            this.editedItem = Object.assign({}, this.defaultItem)
            this.editedIndex = -1
        },

        closeDelete () {
            this.dialogDelete = false
            this.editedItem = Object.assign({}, this.defaultItem)
            this.editedIndex = -1
        },


        save () {

            if (this.editedIndex > -1) {

                this.$emit("editItem", this.editedIndex, this.editedItem)

            } else {

                console.log('createItem emit', this.editedItem)
                this.$emit("createItem", this.editedItem)

            }

            this.close()
        },
    }
}

{% endblock %}