<template>
    <div class="lookup col-12 p-fluid formgrid grid" :style="style">

        <div class="col-12 label" :class="{'p-error': this.fieldErrors.includes(label)}">
            <label>{{ label }}</label>
        </div>

        <jarch-input-code label="" class="code" :class="classCode" :disabled="disabled" :required="required"
                          @blur="findByCode" v-model="valueCode"/>

        <div :class="classButton" style="margin: 0; padding: 0">
            <prime-button :label="$t(labelSearch)" :class="classButton" @click="openDialog"/>
        </div>

        <jarch-input-text label="" class="description text-purple-500" :class="classDescription" disabled
                          :required="required"
                          v-model="valueDescription"/>

        <prime-dialog class="lookup-dialog" :showHeader="false" v-model:visible="displaySelection"
                      :style="{width: '80vw', padding: '0'}" :modal="true" :show="onShow">

            <jarch-list class="list" :icon="icon" :title="label" :path="path" :show-column-action="false"/>

            <template #footer>
                <jarch-button-cancel @click="closeDialog"/>
                <jarch-button-search label="label.select" icon="pi pi-reply" @click="selectAndCloseDialog" autofocus/>
            </template>
        </prime-dialog>
    </div>
</template>

<script>

import JarchInputCode from "./InputCode"
import JarchInputText from "./InputText"
import JarchButtonCancel from "./ButtonCancel";
import JarchButtonSearch from "./ButtonSearch";
import JarchList from "../content/List"

import PrimeButton from "primevue/button";
import PrimeDialog from "primevue/dialog";

import {mapActions, mapGetters} from "vuex";
import axios from "axios";

export default {
    name: 'lookup',
    components: {
        JarchInputCode, JarchInputText,
        JarchButtonCancel, JarchButtonSearch,
        JarchList,
        PrimeButton, PrimeDialog
        // PrimeDatatable, PrimeColumn
    },
    props: {
        id: {type: String},
        label: {type: String, required: true},
        path: {type: String, required: true},
        propertyCode: {type: String, required: true},
        propertyDescription: {type: String, required: true},
        icon: {type: String},
        labelSearch: {type: String, default: 'label.search'},
        classCode: {type: String, default: 'col-1'},
        classButton: {type: String, default: 'col-1'},
        classDescription: {type: String, default: 'col-10'},
        style: {type: String},
        disabled: {type: Boolean, default: false},
        required: {type: Boolean, default: false},
        modelValue: {type: [Object]},
    },
    data() {
        return {
            displaySelection: false,
            valueCode: '',
            valueDescription: ''
        }
    },
    computed: {
        ...mapGetters(['fieldErrors', 'entityLookup']),
    },
    methods: {
        ...mapActions(['setEntityCodeLookup']),
        openDialog() {
            this.displaySelection = true
        },
        closeDialog() {
            this.valueCode = null
            this.valueDescription = null
            this.$emit("update:modelValue", null);
            this.displaySelection = false
        },
        selectAndCloseDialog() {
            this.valueCode = this.entityLookup[this.propertyCode]
            this.valueDescription = this.entityLookup[this.propertyDescription]
            this.$emit("update:modelValue", this.entityLookup);
            this.displaySelection = false
        },
        onShow(event) {
            console.log('Show !!! ' + event)
        },
        findByCode(event) {
            console.log('findByCode !!! ' + event)

            if (event === undefined || event.trim() === '')
                return

            axios.get(`${this.path}/lookup/${this.propertyCode}/${event}`)
                .then(res => {
                    const entity = res.data;
                    this.$emit("update:modelValue", entity)
                })
        }
    },
    watch: {
        modelValue: function(entityLookup) {
            this.valueCode = entityLookup[this.propertyCode]
            this.valueDescription = entityLookup[this.propertyDescription]
        },
    }

}
</script>

<style lang="scss" scoped>

.lookup {
    padding-right: 0;

    .label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .label label {
        font-weight: bold;
    }

    .element {
        display: flex;
        margin-bottom: 0;
    }

    .p-inputtext-sm {
        //width: 200px;
    }

    button {
        margin: 0;
        text-align: center
    }

    .description {
        padding-right: 0;
    }
}

.p-dialog.lookup-dialog > .p-dialog-content {
    padding: 0 !important;
}

</style>
