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

    data: function() {
        return {
            dialog: false,
            dialogDelete: false,
            editedIndex: -1,
            defaultItem: {},
            editedItem: {},
            search: null,
            show_url: "{{ show_url|default:'' }}",
            default_hidden_fields: [{% for field in default_hidden_fields %}"{{ field }}",{% endfor %}]
        }
    },

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

        citems_headers: function() {
            return this.items_headers.filter(e => !this.hidden_fields.includes(e.value) && !this.default_hidden_fields.includes(e.value))
        },
    },

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

    methods: {

        formatDate (date) {
            return formatDate(date)
        },

        showItem (item) {
            this.$router.replace({ name: this.show_url, params: { id: item.id }})
        },

        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 () {
            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 {

                this.$emit("createItem", this.editedItem)

            }

            this.close()
        },
    }
}

{% endblock %}