<template>
    <theme-dailog :modalId="'modalForm'" :title="'Chat Of Account'" :loading="form.busy" @submitData="$emit('submitData')">
        <div slot="modal-body">
            <div class="row">
                <div class="col-sm-6 mb-3">
                    <label class="form-label">{{ $t('Type') }}<sup class="text-danger">*</sup></label>
                    <Multiselect
                        :placeholder="$t('Type')"
                        :disabled="form.can_edit ==false"
                        :class="{ 'is-invalid': form.errors.has('type_of_acc_id') }"
                        :searchable="true"
                        :options="type_of_account"
                        label="type_name"
                        trackBy="type_name"
                        value="id"
                        v-model="form.type_of_acc_id" 
                        @input="fChangTypeOfAccDetail"
                    />
                    <div class="valid text-danger" v-if="form.errors.has('type_of_acc_id')" v-html="form.errors.get('type_of_acc_id')"></div>
                </div>
                <div class="col-sm-6 mb-3">
                    <label class="form-label">{{ $t('Account Type') }}<sup class="text-danger">*</sup></label>
                    <Multiselect
                        :placeholder="$t('Account Type')"
                        :disabled="form.can_edit ==false"
                        :class="{ 'is-invalid': form.errors.has('type_of_acc_detail_id') }"
                        :searchable="true"
                        :options="type_of_acc_details"
                        label="name"
                        trackBy="name"
                        value="id"
                        v-model="form.type_of_acc_detail_id"
                    />
                    <div class="valid text-danger" v-if="form.errors.has('type_of_acc_detail_id')" v-html="form.errors.get('type_of_acc_detail_id')"></div>
                </div>
                <div class="col-sm-6 mb-3">
                    <label class="form-label">{{ $t('Chart Code') }}<sup class="text-danger">*</sup></label>
                    <input type="text" class="form-control" v-model="form.chart_code" :placeholder="$t('Chart code required 5 digits')"
                        :class="{ 'is-invalid': form.errors.has('chart_code') }">
                    <div class="valid text-danger" v-if="form.errors.has('chart_code')" v-html="form.errors.get('chart_code')"></div>
                </div>
                <div class="col-sm-6 mb-3">
                    <label class="form-label">{{ $t('Chart Name') }}<sup class="text-danger">*</sup></label>
                    <input type="text" class="form-control" v-model="form.chart_name" :placeholder="$t('Chart Name')"
                        :class="{ 'is-invalid': form.errors.has('chart_name') }">
                    <div class="valid text-danger" v-if="form.errors.has('chart_name')" v-html="form.errors.get('chart_name')"></div>
                </div>
                <div class="col-sm-6 mb-3">
                    <label class="form-label">{{ $t('Description') }}</label>
                    <textarea :placeholder="$t('Description')" class="form-control" v-model="form.desc" rows="5"></textarea>
                    <div class="valid text-danger" v-if="form.errors.has('desc')" v-html="form.errors.get('desc')"></div>
                </div>
            </div>
        </div>
    </theme-dailog>
</template>
<script>
import ThemeDailog from "../../../components/model-dialog/ThemeDailog.vue";
export default {
    props: {
        form: {},
    },
    components: {
        ThemeDailog,
    },
    data() {
        return {
            type_of_account: [],
            type_of_acc_details: [],
        }
    },
    created() {
        this.getTypeOfAccount();
    },
    mounted() {
      // Emits on mount
      this.emitInterface();
    },
    methods: {
        getTypeOfAccount() {
            axios.get('accounting/get-type-acc')
            .then((res) => {
                this.type_of_account = res.data;
            })
            .catch((error) =>{
                console.log(error);
            });
        },
        fChangTypeOfAccDetail(){
            this.form.type_of_acc_detail_id = '';
            this.getTypeOfAccDetail();
        },
        getTypeOfAccDetail(){
            axios.get('accounting/get-type-of-acc-details/'+this.form.type_of_acc_id)
            .then((res) => {
                this.type_of_acc_details  = res.data;
            })
            .catch((error) =>{
                console.log(error);
            });
        },
        emitInterface() {
            this.$emit("interface", {
                getTypeOfAccDetail: () => this.getTypeOfAccDetail()
            });
        }
    },
}
</script>
