<template>
    <div class="data">
        <jarch-page-title :title="titlePage" :description="descriptionPage" :icon="icon"/>
        <jarch-data-master :action="action" :title="title" :path="path" :router-name-list="routerNameList">
            <slot/>
        </jarch-data-master>
    </div>
</template>

<script>
import JarchPageTitle from "../content/PageTitle"
import JarchDataMaster from "../content/DataMaster"
import {mapActions} from "vuex";

export default {
    name: "Data",
    components: {
        JarchPageTitle,
        JarchDataMaster
    },
    props: {
        title: { type: String, required: true },
        path: { type: String, required: true },
        icon: { type: String, required: false },
        routerNameList: { type: String, required: true },
        onShow: {}
    },
    data() {
        return {
            action: this.$route.query.action,
            idEntity: this.$route.query.id,
        }
    },
    mounted() {
        this.load()
    },
    computed: {
        titlePage() {
            return this.$t('label.data') + " - " + this.title
        },
        descriptionPage() {
            return this.$t('label.keep') + " - " + this.title
        },
        isInsert() {
            return this.action === 'INSERT'
        },
        isClone() {
            return this.action === 'CLONE'
        },
        isChange() {
            return this.action === 'CHANGE'
        },
        isConsult() {
            return this.action === 'CONSULT'
        },
        isDelete() {
            return this.action === 'DELETE'
        },
        isDynamic() {
            return this.action === 'DYNAMIC'
        },
    },
    methods: {
        ...mapActions(['setNewEntity', 'setLoadEntity']),
        load() {
            if (this.isInsert)
                this.setNewEntity({path: this.path})
            else
                // this.setLoadEntity({idEntity: this.idEntity, path: this.path})
               this.setLoadEntity({idEntity: this.idEntity, path: this.path})

            this.$emit('onShow', {
                action: this.action,
                disabled: this.isConsult || this.isDelete
            })
        }
    }
}
</script>

<style lang="scss">

.data {
    .field.p-grid {
        margin: 10px;
    }
}

</style>
