<template>
    <div class="new_item">
        <div class="container-fluid px-0">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card border-0 bg-transparent">
                        <div class="card-body border-0 bg-white rounded_8">
                            <h5 class="text-koulen mb-3">
                                <router-link :to="{ name: 'Collaterals' }">{{ $t('Collaterals') }}</router-link>
                                <label class="px-1">/</label>
                                <label>{{ $t('Collateral Information') }}</label>
                            </h5>
                            <div class="col-3 mb-3">
                                <label class="form-label">{{ $t('Client') }} <sup class="text-danger">( * )</sup></label>
                                <Multiselect v-model="form.client_id" :placeholder="$t('Client')" trackBy="name" value="id" label="name" :class="{ 'is-invalid': form.errors.has('client_id') }" :searchable="true" :options="comClient" />
                                <div class="valid text-danger" v-if="form.errors.has('client_id')" v-html="form.errors.get('client_id')">
                                </div>
                            </div>
                            <div class="menu">
                                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link active required" id="pills-one-tab" data-bs-toggle="pill" href="#pills-one" role="tab" aria-controls="pills-one" aria-selected="true">អចលនទ្រព្យ (១)</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="pills-two-tab" data-bs-toggle="pill" href="#pills-two" role="tab" aria-controls="pills-two" aria-selected="false">អចលនទ្រព្យ (២)</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="pills-three-tab" data-bs-toggle="pill" href="#pills-three" role="tab" aria-controls="pills-three" aria-selected="false">ម៉ូតូ (១)</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="pills-five-tab" data-bs-toggle="pill" href="#pills-five" role="tab" aria-controls="pills-five" aria-selected="false">ម៉ូតូ (២)</a>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <a class="nav-link" id="pills-four-tab" data-bs-toggle="pill" href="#pills-four" role="tab" aria-controls="pills-four" aria-selected="false">ឡាន</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab">
                                    <div class="row px-3 pt-2">
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Type Collateral') }}</label>
                                                <input type="text" class="form-control" v-model="form.home.pawn_type" :placeholder="$t('Type Collateral')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Collateral Name') }}</label>
                                                <input type="text" class="form-control" v-model="form.home.collateral_name" :placeholder="$t('Collateral Name')"/>                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ប្រភេទឯកសារកម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.home.ownership_doc_type" placeholder="ប្រភេទឯកសារកម្មសិទ្ធិ" :class="{ 'is-invalid': form.errors.has('ownership_doc_type') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('ownership_doc_type')" v-html="form.errors.get('ownership_doc_type')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខឯកសារកម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.home.number" :placeholder="$t('Number')" :class="{ 'is-invalid': form.errors.has('number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number')" v-html="form.errors.get('number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">កាលបរិច្ឆេទចេញប័ណ្ណ</label>
                                                <date-picker v-model="form.home.date_made" valueType="format" :format="format" :class="{'is-invalid': form.errors.has('date_made') }"></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ឈ្មោះម្ចាស់កម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.home.collateral_owner" placeholder="ឈ្មោះម្ចាស់កម្មសិទ្ធិ" :class="{ 'is-invalid': form.errors.has('collateral_owner') }"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Issued By') }}</label>
                                                <input type="text" class="form-control" v-model="form.home.issued_by" :placeholder="$t('Issued By')" :class="{ 'is-invalid': form.errors.has('issued_by') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('issued_by')" v-html="form.errors.get('issued_by')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ទំហំក្រឡាផ្ទៃដី ផ្ទះ</label>
                                                <input type="text" class="form-control" v-model="form.home.size" :placeholder="$t('Size Land')" :class="{ 'is-invalid': form.errors.has('size') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('size')" v-html="form.errors.get('size')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Location') }}</label>
                                                <suggestions v-model="form.home.location" :onInputChange="onCountryInputChange"
                                                    inputClass="form-control"></suggestions>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('North') }}</label>
                                                <input type="text" class="form-control" v-model="form.home.north" :placeholder="$t('North')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('South') }}</label>
                                                <input type="text" class="form-control" v-model="form.home.south" :placeholder="$t('South')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('East') }}</label>
                                                <input type="text" class="form-control" v-model="form.home.east" :placeholder="$t('East')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('West') }}</label>
                                                <input type="text" class="form-control" v-model="form.home.west" :placeholder="$t('West')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃអាជ្ញាធរ</label>
                                                <input type="text" class="form-control" v-model="form.home.authority_price" placeholder="តម្លៃអាជ្ញាធរ" :class="{ 'is-invalid': form.errors.has('authority_price') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('authority_price')" v-html="form.errors.get('authority_price')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃអ្នកជិតខាង</label>
                                                <input type="text" class="form-control" v-model="form.home.price_urgent" placeholder="តម្លៃអ្នកជិតខាង" :class="{ 'is-invalid': form.errors.has('price_urgent') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_urgent')" v-html="form.errors.get('price_urgent')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទ្រព្យបញ្ចាំ(Collateral value)</label>
                                                <input type="text" class="form-control" v-model="form.home.price_collateral" placeholder="តម្លៃទ្រព្យបញ្ចាំ(Collateral value)" :class="{ 'is-invalid': form.errors.has('price_collateral') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_collateral')" v-html="form.errors.get('price_collateral')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ផែនទី</label>
                                                <ImageCropper @croped="handlePhoto1" :modalId="'1'" :croppedImage="this.form.home.photo"/>

                                            </div>
                                        </div>

                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ទ្រង់ទ្រាយដី</label>
                                                <ImageCropper @croped="handlePhoto2" :modalId="'2'" :croppedImage="this.form.home.image"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab" >
                                    <div class="row px-3 pt-2">
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Type Collateral') }}</label>
                                                <input type="text" class="form-control" v-model="form.home1.pawn_type" :placeholder="$t('Type Collateral')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Collateral Name') }}</label>
                                                <input type="text" class="form-control" v-model="form.home1.collateral_name" :placeholder="$t('Collateral Name')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ប្រភេទឯកសារកម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.home1.ownership_doc_type" placeholder="ប្រភេទឯកសារកម្មសិទ្ធិ" :class="{ 'is-invalid': form.errors.has('ownership_doc_type') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('ownership_doc_type')" v-html="form.errors.get('ownership_doc_type')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខឯកសារកម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.home1.number" :placeholder="$t('Number')" :class="{ 'is-invalid': form.errors.has('number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number')" v-html="form.errors.get('number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">កាលបរិច្ឆេទចេញប័ណ្ណ</label>
                                                <date-picker v-model="form.home1.date_made" valueType="format" :format="format" :class="{'is-invalid': form.errors.has('date_made') }"></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ឈ្មោះម្ចាស់កម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.home1.collateral_owner" placeholder="ឈ្មោះម្ចាស់កម្មសិទ្ធិ" :class="{ 'is-invalid': form.errors.has('collateral_owner') }"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Issued By') }}</label>
                                                <input type="text" class="form-control" v-model="form.home1.issued_by" :placeholder="$t('Issued By')" :class="{ 'is-invalid': form.errors.has('issued_by') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('issued_by')" v-html="form.errors.get('issued_by')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ទំហំក្រឡាផ្ទៃដី ផ្ទះ</label>
                                                <input type="text" class="form-control" v-model="form.home1.size" :placeholder="$t('Size Land')" :class="{ 'is-invalid': form.errors.has('size') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('size')" v-html="form.errors.get('size')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Location') }}<sup class="text-danger"></sup></label>
                                                <suggestions v-model="form.home1.location" :onInputChange="onCountryInputChange"
                                                    inputClass="form-control"></suggestions>
                                                <div class="valid text-danger" v-if="form.errors.has('location')"
                                                    v-html="form.errors.get('location')"></div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('North') }}</label>
                                                <input type="text" class="form-control" v-model="form.home1.north" :placeholder="$t('North')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('South') }}</label>
                                                <input type="text" class="form-control" v-model="form.home1.south" :placeholder="$t('South')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('East') }}</label>
                                                <input type="text" class="form-control" v-model="form.home1.east" :placeholder="$t('East')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('West') }}</label>
                                                <input type="text" class="form-control" v-model="form.home1.west" :placeholder="$t('West')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃអាជ្ញាធរ</label>
                                                <input type="text" class="form-control" v-model="form.home1.authority_price" placeholder="តម្លៃអាជ្ញាធរ" :class="{ 'is-invalid': form.errors.has('authority_price') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('authority_price')" v-html="form.errors.get('authority_price')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃអ្នកជិតខាង</label>
                                                <input type="text" class="form-control" v-model="form.home1.price_urgent" placeholder="តម្លៃអ្នកជិតខាង" :class="{ 'is-invalid': form.errors.has('price_urgent') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_urgent')" v-html="form.errors.get('price_urgent')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទ្រព្យបញ្ចាំ(Collateral value)</label>
                                                <input type="text" class="form-control" v-model="form.home1.price_collateral" placeholder="តម្លៃទ្រព្យបញ្ចាំ(Collateral value)" :class="{ 'is-invalid': form.errors.has('price_collateral') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_collateral')" v-html="form.errors.get('price_collateral')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ផែនទី</label>
                                                <ImageCropper @croped="handlePhoto3" :modalId="'3'" :croppedImage="this.form.home1.photo"/>

                                            </div>
                                        </div>

                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ទ្រង់ទ្រាយដី</label>
                                                <ImageCropper @croped="handlePhoto4" :modalId="'4'" :croppedImage="this.form.home1.image"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab" >
                                    <div class="row px-3 pt-2">
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Type Collateral') }}</label>
                                                 <input type="text" class="form-control" v-model="form.vehicle.pawn_type" :placeholder="$t('Type Collateral')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Collateral Name') }}</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.collateral_name" :placeholder="$t('Collateral Name')" :class="{ 'is-invalid': form.errors.has('collateral_name') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('collateral_name')" v-html="form.errors.get('collateral_name')"></div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ប្រភេទឯកសារ</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.ownership_doc_type" placeholder="ប្រភេទឯកសារ" :class="{ 'is-invalid': form.errors.has('ownership_doc_type') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('ownership_doc_type')" v-html="form.errors.get('ownership_doc_type')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ឈ្មោះម្ចាស់កម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.collateral_owner" placeholder="ឈ្មោះម្ចាស់កម្មសិទ្ធិ" :class="{ 'is-invalid': form.errors.has('collateral_owner') }"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខឯកសារកម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.number" :placeholder="$t('Number')" :class="{ 'is-invalid': form.errors.has('number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number')" v-html="form.errors.get('number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ផ្លាកលេខ</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.number_plate" placeholder="ផ្លាកលេខ" :class="{ 'is-invalid': form.errors.has('number_plate') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number_plate')" v-html="form.errors.get('number_plate')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ពណ៌</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.color" placeholder="ពណ៌	" :class="{ 'is-invalid': form.errors.has('color') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('color')" v-html="form.errors.get('color')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខតួ</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.body_number" placeholder="លេខតួ" :class="{ 'is-invalid': form.errors.has('body_number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('body_number')" v-html="form.errors.get('body_number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខម៉ាស៊ីន</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.engine_number" placeholder="លេខម៉ាស៊ីន" :class="{ 'is-invalid': form.errors.has('engine_number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('engine_number')" v-html="form.errors.get('engine_number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">កម្លាំង</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.strength" placeholder="កម្លាំង" :class="{ 'is-invalid': form.errors.has('strength') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('strength')" v-html="form.errors.get('strength')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ឆ្នាំផលិត: </label> {{ form.vehicle.year }}
                                                <date-picker v-model="form.vehicle.year"  valueType="format" :format="'YYYY'" type="year"></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ថ្ងៃចេញប័ណ្ណលើកដំបូង</label>
                                                <date-picker v-model="form.vehicle.date_made" valueType="format" :format="format" :class="{'is-invalid': form.errors.has('date_made') }"></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទីផ្សារពេលវាយតម្លៃ (Market Price)</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.price_market" placeholder="តម្លៃទីផ្សារពេលវាយតម្លៃ" :class="{ 'is-invalid': form.errors.has('price_market') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_market')" v-html="form.errors.get('price_market')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃលក់បន្ទាន់ (Force Sale)</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.price_urgent" placeholder="តម្លៃលក់បន្ទាន់ (Force Sale)" :class="{ 'is-invalid': form.errors.has('price_urgent') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_urgent')" v-html="form.errors.get('price_urgent')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទ្រព្យបញ្ចាំ(Collateral value)</label>
                                                <input type="text" class="form-control" v-model="form.vehicle.price_collateral" placeholder="តម្លៃទ្រព្យបញ្ចាំ" :class="{ 'is-invalid': form.errors.has('price_collateral') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_collateral')" v-html="form.errors.get('price_collateral')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">រូបភាព</label>
                                                <ImageCropper @croped="handlePhoto5" :modalId="'5'" :croppedImage="this.form.vehicle.image"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-five" role="tabpanel" aria-labelledby="pills-five-tab" >
                                    <div class="row px-3 pt-2">
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Type Collateral') }}</label>
                                                 <input type="text" class="form-control" v-model="form.vehicleMotor.pawn_type" :placeholder="$t('Type Collateral')"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Collateral Name') }}</label>
                                                <input type="text" class="form-control" v-model="form.vehicleMotor.collateral_name" :placeholder="$t('Collateral Name')" :class="{ 'is-invalid': form.errors.has('collateral_name') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('collateral_name')" v-html="form.errors.get('collateral_name')"></div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ប្រភេទឯកសារ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleMotor.ownership_doc_type" placeholder="ប្រភេទឯកសារ" :class="{ 'is-invalid': form.errors.has('ownership_doc_type') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('ownership_doc_type')" v-html="form.errors.get('ownership_doc_type')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ឈ្មោះម្ចាស់កម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleMotor.collateral_owner" placeholder="ឈ្មោះម្ចាស់កម្មសិទ្ធិ" :class="{ 'is-invalid': form.errors.has('collateral_owner') }"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខឯកសារកម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleMotor.number" :placeholder="$t('Number')" :class="{ 'is-invalid': form.errors.has('number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number')" v-html="form.errors.get('number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ផ្លាកលេខ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleMotor.number_plate" placeholder="ផ្លាកលេខ" :class="{ 'is-invalid': form.errors.has('number_plate') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number_plate')" v-html="form.errors.get('number_plate')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ពណ៌</label>
                                                <input type="text" class="form-control" v-model="form.vehicleMotor.color" placeholder="ពណ៌	" :class="{ 'is-invalid': form.errors.has('color') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('color')" v-html="form.errors.get('color')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខតួ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleMotor.body_number" placeholder="លេខតួ" :class="{ 'is-invalid': form.errors.has('body_number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('body_number')" v-html="form.errors.get('body_number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខម៉ាស៊ីន</label>
                                                <input type="text" class="form-control" v-model="form.vehicleMotor.engine_number" placeholder="លេខម៉ាស៊ីន" :class="{ 'is-invalid': form.errors.has('engine_number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('engine_number')" v-html="form.errors.get('engine_number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">កម្លាំង</label>
                                                <input type="text" class="form-control" v-model="form.vehicleMotor.strength" placeholder="កម្លាំង" :class="{ 'is-invalid': form.errors.has('strength') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('strength')" v-html="form.errors.get('strength')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <!-- <div class="mb-3">
                                                <label class="form-label">ឆ្នាំផលិត</label>  {{ form.vehicleMotor.year }}
                                                <date-picker v-model="form.vehicleMotor.year"  valueType="format" :format="'YYYY'" type="year"></date-picker>
                                            </div> -->
                                            <div class="mb-3">
                                                <label class="form-label">ឆ្នាំផលិត: </label>
                                                {{ form.vehicleMotor.year }}

                                                <date-picker
                                                        v-model="form.vehicleMotor.year"
                                                        type="year"
                                                        :format="'YYYY'"
                                                        valueType="format"
                                                 ></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ថ្ងៃចេញប័ណ្ណលើកដំបូង</label>
                                                <date-picker v-model="form.vehicleMotor.date_made" valueType="format" :format="format" :class="{'is-invalid': form.errors.has('date_made') }"></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទីផ្សារពេលវាយតម្លៃ (Market Price)</label>
                                                <input type="text" class="form-control" v-model="form.vehicleMotor.price_market" placeholder="តម្លៃទីផ្សារពេលវាយតម្លៃ" :class="{ 'is-invalid': form.errors.has('price_market') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_market')" v-html="form.errors.get('price_market')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃលក់បន្ទាន់ (Force Sale)</label>
                                                <input type="text" class="form-control" v-model="form.vehicleMotor.price_urgent" placeholder="តម្លៃលក់បន្ទាន់ (Force Sale)" :class="{ 'is-invalid': form.errors.has('price_urgent') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_urgent')" v-html="form.errors.get('price_urgent')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទ្រព្យបញ្ចាំ(Collateral value)</label>
                                                <input type="text" class="form-control" v-model="form.vehicleMotor.price_collateral" placeholder="តម្លៃទ្រព្យបញ្ចាំ" :class="{ 'is-invalid': form.errors.has('price_collateral') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_collateral')" v-html="form.errors.get('price_collateral')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">រូបភាព</label>
                                                <ImageCropper @croped="handlePhoto7" :modalId="'7'" :croppedImage="this.form.vehicleMotor.image"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-four" role="tabpanel" aria-labelledby="pills-four-tab" >
                                    <div class="row px-3 pt-2">
                                        <div class="col-6">

                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Type Collateral') }}</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.pawn_type" :placeholder="$t('Type Collateral')" :class="{ 'is-invalid': form.errors.has('pawn_type') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('pawn_type')" v-html="form.errors.get('pawn_type')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">{{ $t('Collateral Name') }}</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.collateral_name" :placeholder="$t('Collateral Name')" :class="{ 'is-invalid': form.errors.has('collateral_name') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('collateral_name')" v-html="form.errors.get('collateral_name')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ប្រភេទឯកសារ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.ownership_doc_type" placeholder="ប្រភេទឯកសារ" :class="{ 'is-invalid': form.errors.has('ownership_doc_type') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('ownership_doc_type')" v-html="form.errors.get('ownership_doc_type')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ឈ្មោះម្ចាស់កម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.collateral_owner" placeholder="ឈ្មោះម្ចាស់កម្មសិទ្ធិ" :class="{ 'is-invalid': form.errors.has('collateral_owner') }"/>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខឯកសារកម្មសិទ្ធិ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.number" :placeholder="$t('Number')" :class="{ 'is-invalid': form.errors.has('number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number')" v-html="form.errors.get('number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ផ្លាកលេខ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.number_plate" placeholder="ផ្លាកលេខ" :class="{ 'is-invalid': form.errors.has('number_plate') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('number_plate')" v-html="form.errors.get('number_plate')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ពណ៌</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.color" placeholder="ពណ៌	" :class="{ 'is-invalid': form.errors.has('color') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('color')" v-html="form.errors.get('color')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លតាប័ត្រ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.latabat" placeholder="លតាប័ត្រ" :class="{ 'is-invalid': form.errors.has('latabat') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('latabat')" v-html="form.errors.get('latabat')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខតួ/លេខសាក់ស៊ី</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.body_number" placeholder="លេខតួ/លេខសាក់ស៊ី" :class="{ 'is-invalid': form.errors.has('body_number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('body_number')" v-html="form.errors.get('body_number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លេខម៉ាស៊ីន</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.engine_number" placeholder="លេខម៉ាស៊ីន" :class="{ 'is-invalid': form.errors.has('engine_number') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('engine_number')" v-html="form.errors.get('engine_number')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ទំហំស៊ីឡាំង</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.cylinder_size" placeholder="ទំហំស៊ីឡាំង" :class="{ 'is-invalid': form.errors.has('cylinder_size') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('cylinder_size')" v-html="form.errors.get('cylinder_size')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">កម្លាំង</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.strength" placeholder="កម្លាំង" :class="{ 'is-invalid': form.errors.has('strength') }" />
                                                <div class="valid text-danger" v-if="form.errors.has('strength')" v-html="form.errors.get('strength')">
                                                </div>
                                            </div>
                                        </div>
                                         <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ទីចាត់ការគយនិងរដ្ឋាករ លេខលតាប័ត្រ</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.customs_office" placeholder="ទីចាត់ការគយនិងរដ្ឋាករ លេខលតាប័ត្រ" :class="{ 'is-invalid': form.errors.has('customs_office') }" />
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លិខិតទិញលក់រថយន្តចំនួន</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.letter_of_car" placeholder="លិខិតទិញលក់រថយន្តចំនួន" :class="{ 'is-invalid': form.errors.has('letter_of_car') }" />
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">អត្តសញ្ញាណប័ណ្ណថតចម្លងចំនួន</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.copy_of_idcard" placeholder="អត្តសញ្ញាណប័ណ្ណថតចម្លងចំនួន" :class="{ 'is-invalid': form.errors.has('copy_of_idcard') }" />
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">លតាប័ត្របង់ពន្ធមធ្យោបាយដឹកជញ្ជូនឆ្នាំ</label>
                                                <date-picker v-model="form.vehicleTwo.transportation"  valueType="format" :format="'YYYY'" type="year"></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">វិញ្ញាបនបត្រត្រួតពិនិត្យលក្ខណៈបច្ចេកទេសរថយន្ត ថ្ងៃផុតកំណត់</label>
                                                <date-picker v-model="form.vehicleTwo.vehicle_technical_certificate_expire" valueType="format" :format="format" :class="{'is-invalid': form.errors.has('vehicle_technical_certificate_expire') }"></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ឆ្នាំផលិត</label>
                                                <date-picker v-model="form.vehicleTwo.year"  valueType="format" :format="'YYYY'" type="year"></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">ថ្ងៃចេញប័ណ្ណលើកដំបូង</label>
                                                <date-picker v-model="form.vehicleTwo.date_made" valueType="format" :format="format" :class="{'is-invalid': form.errors.has('date_made') }"></date-picker>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទីផ្សារពេលវាយតម្លៃ (Market Price)</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.price_market" placeholder="តម្លៃទីផ្សារពេលវាយតម្លៃ" :class="{ 'is-invalid': form.errors.has('price_market') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_market')" v-html="form.errors.get('price_market')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃលក់បន្ទាន់ (Force Sale)</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.price_urgent" placeholder="តម្លៃលក់បន្ទាន់ (Force Sale)" :class="{ 'is-invalid': form.errors.has('price_urgent') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('price_urgent')" v-html="form.errors.get('price_urgent')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">តម្លៃទ្រព្យបញ្ចាំ(Collateral value)</label>
                                                <input type="text" class="form-control" v-model="form.vehicleTwo.other_price" placeholder="តម្លៃទ្រព្យបញ្ចាំ" :class="{ 'is-invalid': form.errors.has('other_price') }"/>
                                                <div class="valid text-danger" v-if="form.errors.has('other_price')" v-html="form.errors.get('other_price')">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="mb-3">
                                                <label class="form-label">រូបភាព</label>
                                                <ImageCropper @croped="handlePhoto6" :modalId="'6'" :croppedImage="this.form.vehicleTwo.image"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <button type="submit" :disabled="form.busy" class="btn btn-success " @click="store">
                                    <i class="fa-solid fa-floppy-disk"></i>
                                    {{ $t('Submit') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import ImageCropper from "../../components/ImageCropper.vue";

export default {
    props:['id', 'num'],
    components: {
        ImageCropper,
    },
    data() {
        return {
            comClient: [],
            formatYear: 'YYYY',
            format: 'YYYY-MM-DD',
            form: new Form({
                client_id: '',
                home:{
                    id: '',
                    client_id: '',
                    pawn_type: '',
                    collateral_name: '',
                    ownership_doc_type: '',
                    price_collateral : '',
                    body_number: '',
                    engine_number: '',
                    number_plate: '',
                    color: '',
                    cylinder_size: '',
                    year: '',
                    date_made: '',
                    price_market: '',
                    other_price: '',
                    authority_price: '',
                    price_urgent: '',
                    degree: '',
                    head_land: '',
                    size: '',
                    issued_by: '',
                    north:'',
                    south:'',
                    west:'',
                    east:'',
                    location: '',
                    latabat: '',
                    number: '',
                    image: '',
                    photo: '',
                    collateral_owner: '',
                    status_type: 1,
                },
                home1:{
                    id: '',
                    client_id: '',
                    pawn_type: '',
                    collateral_name: '',
                    ownership_doc_type: '',
                    price_collateral : '',
                    body_number: '',
                    engine_number: '',
                    number_plate: '',
                    number: '',
                    color: '',
                    cylinder_size: '',
                    year: '',
                    date_made: '',
                    price_market: '',
                    other_price: '',
                    authority_price: '',
                    price_urgent: '',
                    degree: '',
                    head_land: '',
                    size: '',
                    issued_by: '',
                    north:'',
                    south:'',
                    west:'',
                    east:'',
                    location: '',
                    latabat: '',
                    image: '',
                    photo: '',
                    collateral_owner: '',
                    status_type: 2,
                },
                vehicle:{
                    id: '',
                    client_id: '',
                    pawn_type: '',
                    collateral_name: '',
                    ownership_doc_type: '',
                    price_collateral : '',
                    body_number: '',
                    number: '',
                    engine_number: '',
                    number_plate: '',
                    color: '',
                    cylinder_size: '',
                    year: '',
                    date_made: '',
                    price_market: '',
                    other_price: '',
                    authority_price: '',
                    price_urgent: '',
                    degree: '',
                    head_land: '',
                    size: '',
                    issued_by: '',
                    north:'',
                    south:'',
                    west:'',
                    east:'',
                    location: '',
                    latabat: '',
                    status_type: 3,
                    image: '',
                    photo: '',
                    collateral_owner: '',
                    strength: '',
                },
                vehicleMotor:{
                    id: '',
                    client_id: '',
                    pawn_type: '',
                    collateral_name: '',
                    ownership_doc_type: '',
                    price_collateral : '',
                    body_number: '',
                    number: '',
                    engine_number: '',
                    number_plate: '',
                    color: '',
                    cylinder_size: '',
                    year: '',
                    date_made: '',
                    price_market: '',
                    other_price: '',
                    authority_price: '',
                    price_urgent: '',
                    degree: '',
                    head_land: '',
                    size: '',
                    issued_by: '',
                    north:'',
                    south:'',
                    west:'',
                    east:'',
                    location: '',
                    latabat: '',
                    status_type: 5,
                    image: '',
                    photo: '',
                    collateral_owner: '',
                    strength: '',
                },
                vehicleTwo:{
                    id: '',
                    client_id: '',
                    pawn_type: '',
                    collateral_name: '',
                    ownership_doc_type: '',
                    price_collateral : '',
                    body_number: '',
                    number: '',
                    engine_number: '',
                    number_plate: '',
                    color: '',
                    cylinder_size: '',
                    year: '',
                    date_made: '',
                    price_market: '',
                    other_price: '',
                    authority_price: '',
                    price_urgent: '',
                    degree: '',
                    head_land: '',
                    size: '',
                    issued_by: '',
                    north:'',
                    south:'',
                    west:'',
                    east:'',
                    location: '',
                    latabat: '',
                    status_type: 4,
                    image: '',
                    photo: '',
                    collateral_owner: '',
                    strength: '',
                    customs_office:'',
                    transportation:'',
                    vehicle_technical_certificate_expire:'',
                    letter_of_car:'',
                    copy_of_idcard:'',
                },
            }),
        }
    },
    created() {
        this.getClient();
        this.getCollateral();
    },
    methods: {
        getClient() {
            axios.get("admin-api/com-client").then((res) => {
                this.comClient = res.data;
            }).catch((error) => {
                console.log(error);
            });
        },
        handlePhoto1(imgDataUrl) {
            this.form.home.photo = imgDataUrl;
        },
        handlePhoto2(imgDataUrl) {
            this.form.home.image = imgDataUrl;
        },
        handlePhoto3(imgDataUrl) {
            this.form.home1.photo = imgDataUrl;
        },
        handlePhoto4(imgDataUrl) {
            this.form.home1.image = imgDataUrl;
        },
        handlePhoto5(imgDataUrl) {
            this.form.vehicle.image = imgDataUrl;
        },
        handlePhoto6(imgDataUrl) {
            this.form.vehicleTwo.image = imgDataUrl;

        },
        handlePhoto7(imgDataUrl) {
            this.form.vehicleMotor.image = imgDataUrl;

        },
        getCollateral() {
            axios.get('admin-api/create-detail', {
                params:{
                    'id': this.id,
                    'num' : this.num
                }
             })
            .then((res) => {
                if(res.data.status == 1){
                    this.form.client_id = res.data.client_id;
                    this.form.home = res.data.home??this.form.home;
                    this.form.home1 = res.data.home1??this.form.home1;
                    this.form.vehicle = res.data.vehicle??this.form.vehicle;
                    this.form.vehicleMotor = res.data.vehicleMotor??this.form.vehicleMotor;
                    this.form.vehicleTwo = res.data.vehicleTwo??this.form.vehicleTwo;
                }
            }).catch((error) => {
                console.log(error);
            });
        },
        store() {
            this.form.post("admin-api/store-detail").then((res) => {
                if (res.data.status == 1) {
                    this.$toast.success(res.data.message);
                    this.$router.push({name:'Collaterals'})
                } else {
                    this.$toast.warning(res.data.message);
                }
            }).catch((error) => {
                console.log(error);
                this.$toast.warning(res.data.message);
            })
        },
        onChanageImage(event){
            let files = event.target.files
            if(!files.length) return;
            this.action = false;
            let render = new FileReader();
            render.onload = (file) =>{
                this.form.photo = file.target.result;
            };
            render.readAsDataURL(files[0]);
        },
        BrowserImaage(){
            $("#photo").trigger('click');
        },
        async onCountryInputChange(query) {
            if (query.trim().length === 0) {
                return null
            }
            let data = await axios.get('admin-api/address-autocomplete', { params: { 'searchText': query } });
            return data.data;
        },

    }
}
</script>
