<template>
    <theme-dailog  :modalId="'modalForm'" :title="'Type 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 Name') }}<sup class="text-danger">*</sup></label>
                    <Multiselect
                        :placeholder="$t('Type Name')"
                        :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"
                    />
                    <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('Sub Name') }}<sup class="text-danger">*</sup></label>
                    <input type="text" class="form-control" v-model="form.name" :placeholder="$t('Sub Name')"
                        :class="{ 'is-invalid': form.errors.has('name') }">
                    <div class="valid text-danger" v-if="form.errors.has('name')" v-html="form.errors.get('name')"></div>
                </div>
                <div class="col-sm-6 mb-3">
                    <label class="form-label">{{ $t('Note') }}</label>
                    <textarea :placeholder="$t('Note')" class="form-control" v-model="form.remark" id="" rows="5"></textarea>
                    <div class="valid text-danger" v-if="form.errors.has('remark')" v-html="form.errors.get('remark')"></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: [],
        }
    },
    created() {
        this.getTypeOfAccount();
    },
    methods: {
        getTypeOfAccount() {
            axios.get('accounting/get-type-acc').then((res) => {
                this.type_of_account = res.data;
            });
        },
    },
}
</script>
