hl-core 0.0.7-beta.15 → 0.0.7-beta.16

package/components/Form/MemberForm.vue

@@ -1,11 +1,13 @@
 <template>
   <section class="flex flex-col gap-4 px-[10px]">
-    <v-form v-if="member" ref="vForm" @submit="submitForm" class="max-h-[75vh] md:max-h-[77vh] overflow-y-scroll">
+    <v-form v-if="member" ref="vForm" @submit="submitForm" class="max-h-[82svh] overflow-y-scroll">
       <base-form-section :title="$t('form.personalData')">
         <base-form-input
           v-model="member.iin"
           :label="$t('form.iin')"
           maska="###-###-###-###"
+          :readonly="isDisabled || isIinPhoneDisabled"
+          :clearable="!isDisabled"
           append-inner-icon="mdi mdi-magnify"
           @append="searchMember"
           :rules="$rules.required.concat($rules.iinRight)"
@@ -14,23 +16,65 @@
           v-model="member.phoneNumber"
           :label="$t('form.phoneNumber')"
           maska="+7 (7##) ### ## ##"
-          placeholder="+7 7"
+          :readonly="isDisabled || isIinPhoneDisabled"
+          :clearable="!isDisabled"
+          :append-inner-icon="otpCondition ? 'mdi mdi-phone-message' : ''"
+          @append="sendOtp(false)"
+          @keyup.enter.prevent="otpCondition ? sendOtp(false) : null"
           :rules="$rules.required.concat($rules.phoneFormat)"
         ></base-form-input>
-        <base-form-input v-model="member.lastName" :label="$t('form.lastName')" :rules="$rules.required.concat($rules.cyrillic)"></base-form-input>
-        <base-form-input v-model="member.firstName" :label="$t('form.firstName')" :rules="$rules.required.concat($rules.cyrillic)"></base-form-input>
-        <base-form-input v-model="member.middleName" :label="$t('form.middleName')" :rules="$rules.required.concat($rules.cyrillic)"></base-form-input>
+        <base-fade-transition>
+          <base-form-input
+            v-if="otpCondition && member.otpTokenId"
+            v-model="member.otpCode"
+            :label="$t('form.otpCode')"
+            maska="# # # #"
+            :append-inner-icon="hasOtp ? 'mdi mdi-check' : ''"
+            @keyup.enter.prevent="hasOtp ? checkOtp() : null"
+          ></base-form-input>
+        </base-fade-transition>
+        <base-form-input
+          v-model="member.lastName"
+          :readonly="isDisabled || isFromGBD"
+          :clearable="!isDisabled"
+          :label="$t('form.lastName')"
+          :rules="$rules.required.concat($rules.cyrillic)"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.firstName"
+          :readonly="isDisabled || isFromGBD"
+          :clearable="!isDisabled"
+          :label="$t('form.firstName')"
+          :rules="$rules.required.concat($rules.cyrillic)"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.middleName"
+          :readonly="isDisabled || isFromGBD"
+          :clearable="!isDisabled"
+          :label="$t('form.middleName')"
+          :rules="$rules.required.concat($rules.cyrillic)"
+        ></base-form-input>
         <base-form-input
           v-model="member.birthDate"
+          :readonly="isDisabled || isFromGBD"
+          :clearable="!isDisabled"
           :label="$t('form.birthDate')"
           :rules="$rules.required.concat($rules.birthDate)"
           maska="##.##.####"
           append-inner-icon="mdi mdi-calendar-blank-outline"
         ></base-form-input>
-        <base-form-input v-model="member.age" :label="$t('form.age')" :rules="$rules.required.concat($rules.numbers)"></base-form-input>
+        <base-form-input
+          v-model="member.age"
+          :label="$t('form.age')"
+          :readonly="isDisabled || isFromGBD"
+          :clearable="!isDisabled"
+          :rules="$rules.required.concat($rules.numbers)"
+        ></base-form-input>
         <base-panel-input
           v-model="member.gender"
           :value="member.gender.nameRu"
+          :readonly="isDisabled || isFromGBD"
+          :clearable="!isDisabled"
           :label="$t('form.gender')"
           :rules="$rules.objectRequired"
           append-inner-icon="mdi mdi-chevron-right"
@@ -39,72 +83,232 @@
         <base-panel-input
           v-model="member.familyStatus"
           :value="member.familyStatus.nameRu"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
           :label="$t('form.familyStatus')"
           :rules="$rules.objectRequired"
           append-inner-icon="mdi mdi-chevron-right"
           @append="openPanel($t('form.familyStatus'), [], 'familyStatus', $dataStore.getFamilyStatuses)"
         ></base-panel-input>
+        <base-panel-input
+          v-if="(whichForm === formStore.beneficiaryFormKey || whichForm === formStore.insuredFormKey) && member.iin !== formStore.policyholderForm.iin"
+          v-model="member.relationDegree"
+          :value="member.relationDegree.nameRu"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :label="$t('form.relations')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.relations'), [], 'relationDegree', $dataStore.getRelationTypes)"
+        ></base-panel-input>
+        <base-form-input
+          v-if="whichForm === formStore.beneficiaryFormKey"
+          v-model="member.percentageOfPayoutAmount"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :label="$t('form.percentageOfPayoutAmount')"
+          :rules="$rules.required.concat($rules.numbers)"
+        ></base-form-input>
+        <base-form-toggle v-if="$dataStore.isGons" :disabled="isDisabled" :has-border="false" v-model="member.isPdl" :title="$dataStore.t('isMemberIPDL')"></base-form-toggle>
       </base-form-section>
-      <base-form-section :title="$t('form.jobData')">
-        <base-form-input v-model="member.job" :label="$t('form.job')" :rules="$rules.required"></base-form-input>
-        <base-form-input v-model="member.jobPosition" :label="$t('form.jobPosition')" :rules="$rules.required"></base-form-input>
-        <base-form-input v-model="member.jobPlace" :label="$t('form.jobPlace')" :rules="$rules.required"></base-form-input>
+      <base-form-section :title="$t('policyholdersRepresentative.PowerOfAttorney')" v-if="whichForm === formStore.policyholdersRepresentativeFormKey">
+        <base-form-input
+          v-model="member.fullNameRod"
+          :label="$t('policyholdersRepresentative.NameParentCase')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.required"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.confirmDocTypeKz"
+          :label="$t('policyholdersRepresentative.basisDocKz')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.required"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.confirmDocType"
+          :label="$t('policyholdersRepresentative.basisDocRu')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.required"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.confirmDocTypeRod"
+          :label="$t('policyholdersRepresentative.basisDocRuParentCase')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.required"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.confirmDocNumber"
+          :label="$t('policyholdersRepresentative.numberDoc')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.required"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.confirmDocIssueDate"
+          :label="$t('form.documentDate')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.date"
+          maska="##.##.####"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.confirmDocExpireDate"
+          :label="$t('form.documentExpire')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.date"
+          maska="##.##.####"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        ></base-form-input>
+        <base-form-input v-model="member.migrationCard" :label="$t('policyholdersRepresentative.numberVisa')"></base-form-input>
+        <base-form-input
+          v-model="member.migrationCardIssueDate"
+          :label="$t('form.documentDate')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.date"
+          maska="##.##.####"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.migrationCardExpireDate"
+          :label="$t('form.documentExpire')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.date"
+          maska="##.##.####"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        ></base-form-input>
+        <base-form-toggle
+          v-model="formStore.policyholdersRepresentativeForm.isNotary"
+          :disabled="isDisabled"
+          :has-border="false"
+          :title="$t('policyholdersRepresentative.confirmAuthority')"
+        ></base-form-toggle>
+        <base-form-input
+          v-model="member.notaryLongName"
+          :label="$t('policyholdersRepresentative.name')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="formStore.policyholdersRepresentativeForm.isNotary ? $rules.required : []"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.notaryLicenseNumber"
+          :label="$t('policyholdersRepresentative.numberLicense')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="formStore.policyholdersRepresentativeForm.isNotary ? $rules.required : []"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.notaryLicenseIssuer"
+          :label="$t('policyholdersRepresentative.documentIssuers')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="formStore.policyholdersRepresentativeForm.isNotary ? $rules.required : []"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.notaryLicenseDate"
+          :label="$t('form.documentDate')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="formStore.policyholdersRepresentativeForm.isNotary ? $rules.required.concat($rules.date) : []"
+          maska="##.##.####"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        ></base-form-input>
       </base-form-section>
-      <base-form-section :title="$t('form.placeRegistration')">
+      <base-form-section :title="$t('form.jobData')" v-if="$dataStore.hasJobSection(whichForm)">
+        <base-form-input v-model="member.job" :label="$t('form.job')" :readonly="isDisabled" :clearable="!isDisabled" :rules="$rules.required"></base-form-input>
+        <base-form-input v-model="member.jobPosition" :label="$t('form.jobPosition')" :readonly="isDisabled" :clearable="!isDisabled" :rules="$rules.required"></base-form-input>
+        <base-form-input v-model="member.jobPlace" :label="$t('form.jobPlace')" :readonly="isDisabled" :clearable="!isDisabled" :rules="$rules.required"></base-form-input>
+      </base-form-section>
+      <base-form-section :title="$t('form.placeRegistration')" v-if="$dataStore.hasPlaceSection(whichForm)">
         <base-panel-input
           v-model="member.registrationCountry"
           :value="member.registrationCountry.nameRu"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
           :label="$t('form.Country')"
           :rules="$rules.objectRequired"
           append-inner-icon="mdi mdi-chevron-right"
           @append="openPanel($t('form.Country'), [], 'registrationCountry', $dataStore.getCountries)"
         ></base-panel-input>
-        <div class="flex flex-col gap-[1px]" v-if="member.registrationCountry.nameRu === 'Казахстан' || member.registrationCountry.nameRu === null">
-          <base-panel-input
-            v-model="member.registrationProvince"
-            :value="member.registrationProvince.nameRu"
-            :label="$t('form.Province')"
-            :rules="$rules.objectRequired"
-            append-inner-icon="mdi mdi-chevron-right"
-            @append="openPanel($t('form.Province'), [], 'registrationProvince', $dataStore.getStates, 'registrationCountry')"
-          ></base-panel-input>
-          <base-panel-input
-            v-model="member.registrationRegionType"
-            :value="member.registrationRegionType.nameRu"
-            :label="$t('form.RegionType')"
-            :rules="$rules.objectRequired"
-            append-inner-icon="mdi mdi-chevron-right"
-            @append="openPanel($t('form.RegionType'), [], 'registrationRegionType', $dataStore.getLocalityTypes)"
-          ></base-panel-input>
-          <base-panel-input
-            v-if="member.registrationRegionType.nameRu !== 'город'"
-            v-model="member.registrationRegion"
-            :value="member.registrationRegion.nameRu"
-            :label="$t('form.Region')"
-            :rules="$rules.objectRequired"
-            append-inner-icon="mdi mdi-chevron-right"
-            @append="openPanel($t('form.Region'), [], 'registrationRegion', $dataStore.getRegions, 'registrationProvince')"
-          ></base-panel-input>
-          <base-panel-input
-            v-model="member.registrationCity"
-            :value="member.registrationCity.nameRu"
-            :label="$t('form.City')"
-            :rules="$rules.objectRequired"
-            append-inner-icon="mdi mdi-chevron-right"
-            @append="openPanel($t('form.City'), [], 'registrationCity', $dataStore.getCities, 'registrationProvince')"
-          ></base-panel-input>
-          <base-form-input v-model="member.registrationQuarter" :label="$t('form.Quarter')"></base-form-input>
-          <base-form-input v-model="member.registrationMicroDistrict" :label="$t('form.MicroDistrict')"></base-form-input>
-          <base-form-input v-model="member.registrationStreet" :rules="$rules.required" :label="$t('form.Street')"></base-form-input>
-          <base-form-input v-model="member.registrationNumberHouse" :rules="$rules.required" :label="$t('form.NumberHouse')"></base-form-input>
-          <base-form-input v-model="member.registrationNumberApartment" :label="$t('form.NumberApartment')"></base-form-input>
-        </div>
+        <base-fade-transition>
+          <div class="flex flex-col gap-[1px]" v-if="member.registrationCountry.nameRu === 'Казахстан' || member.registrationCountry.nameRu === null">
+            <base-panel-input
+              v-model="member.registrationProvince"
+              :value="member.registrationProvince.nameRu"
+              :label="$t('form.Province')"
+              :readonly="isDisabled"
+              :clearable="!isDisabled"
+              :rules="$rules.objectRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel($t('form.Province'), [], 'registrationProvince', $dataStore.getStates, 'registrationCountry')"
+            ></base-panel-input>
+            <base-panel-input
+              v-model="member.registrationRegionType"
+              :value="member.registrationRegionType.nameRu"
+              :label="$t('form.RegionType')"
+              :readonly="isDisabled"
+              :clearable="!isDisabled"
+              :rules="$rules.objectRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel($t('form.RegionType'), [], 'registrationRegionType', $dataStore.getLocalityTypes)"
+            ></base-panel-input>
+            <base-panel-input
+              v-if="member.registrationRegionType.nameRu !== 'город'"
+              v-model="member.registrationRegion"
+              :value="member.registrationRegion.nameRu"
+              :label="$t('form.Region')"
+              :readonly="isDisabled"
+              :clearable="!isDisabled"
+              :rules="$rules.objectRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel($t('form.Region'), [], 'registrationRegion', $dataStore.getRegions, 'registrationProvince')"
+            ></base-panel-input>
+            <base-panel-input
+              v-model="member.registrationCity"
+              :value="member.registrationCity.nameRu"
+              :label="$t('form.City')"
+              :readonly="isDisabled"
+              :clearable="!isDisabled"
+              :rules="$rules.objectRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel($t('form.City'), [], 'registrationCity', $dataStore.getCities, 'registrationProvince')"
+            ></base-panel-input>
+            <!-- <base-form-input v-if="$dataStore.isGons" v-model="member.postIndex" :readonly="isDisabled"
+          :clearable="!isDisabled" :label="$t('form.postIndex')" maska="######"></base-form-input> -->
+            <base-form-input v-model="member.registrationQuarter" :readonly="isDisabled" :clearable="!isDisabled" :label="$t('form.Quarter')"></base-form-input>
+            <base-form-input v-model="member.registrationMicroDistrict" :readonly="isDisabled" :clearable="!isDisabled" :label="$t('form.MicroDistrict')"></base-form-input>
+            <base-form-input
+              v-model="member.registrationStreet"
+              :rules="$rules.required"
+              :readonly="isDisabled"
+              :clearable="!isDisabled"
+              :label="$t('form.Street')"
+            ></base-form-input>
+            <base-form-input
+              v-model="member.registrationNumberHouse"
+              :rules="$rules.required"
+              :readonly="isDisabled"
+              :clearable="!isDisabled"
+              :label="$t('form.NumberHouse')"
+            ></base-form-input>
+            <base-form-input v-model="member.registrationNumberApartment" :readonly="isDisabled" :clearable="!isDisabled" :label="$t('form.NumberApartment')"></base-form-input>
+          </div>
+        </base-fade-transition>
       </base-form-section>
-      <base-form-section :title="$t('form.birthData')">
+      <base-form-section :title="$t('form.birthData')" v-if="$dataStore.hasBirthSection(whichForm)">
         <base-panel-input
           v-model="member.birthPlace"
           :value="member.birthPlace.nameRu"
           :label="$t('form.Country')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
           :rules="$rules.objectRequired"
           append-inner-icon="mdi mdi-chevron-right"
           @append="openPanel($t('form.Country'), [], 'birthPlace', $dataStore.getCountries)"
@@ -114,25 +318,42 @@
           v-model="member.birthRegion"
           :value="member.birthRegion.nameRu"
           :label="$t('form.Region')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
           :rules="$rules.objectRequired"
           append-inner-icon="mdi mdi-chevron-right"
           @append="openPanel($t('form.Region'), [], 'birthRegion', $dataStore.getRegions)"
         ></base-panel-input> -->
       </base-form-section>
-      <base-form-section :title="$t('form.documentData')">
+      <base-form-section :title="$t('form.documentData')" v-if="$dataStore.hasDocumentSection(whichForm)">
         <base-panel-input
           v-model="member.documentType"
           :value="member.documentType.nameRu"
           :label="$t('form.documentType')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
           :rules="$rules.objectRequired"
           append-inner-icon="mdi mdi-chevron-right"
           @append="openPanel($t('form.documentType'), [], 'documentType', $dataStore.getDocumentTypes)"
         ></base-panel-input>
-        <base-form-input v-model="member.documentNumber" :label="$t('form.documentNumber')" :rules="$rules.required"></base-form-input>
+        <base-form-input
+          v-model="member.documentNumber"
+          :label="$t('form.documentNumber')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.required"
+        ></base-form-input>
+        <base-file-input v-if="!memberDocument" :disabled="isDisabled" :clearable="!isDisabled" @input="attachFile($event)"></base-file-input>
+        <base-empty-form-field v-if="memberDocument" @click="!isDisabled && openCustomPanel('document')" class="justify-between">
+          {{ `${memberDocument.fileTypeName} - ${memberDocument.fileName}` }}
+          <i class="cursor-pointer mdi mdi-file-document mr-6 text-[#a0b3d8] text-xl"></i>
+        </base-empty-form-field>
         <base-panel-input
           v-model="member.documentIssuers"
           :value="member.documentIssuers.nameRu"
           :label="$t('form.documentIssuers')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
           :rules="$rules.objectRequired"
           append-inner-icon="mdi mdi-chevron-right"
           @append="openPanel($t('form.documentIssuers'), [], 'documentIssuers', $dataStore.getDocumentIssuers)"
@@ -140,22 +361,30 @@
         <base-form-input
           v-model="member.documentDate"
           :label="$t('form.documentDate')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
           :rules="$rules.required.concat($rules.date)"
           maska="##.##.####"
           append-inner-icon="mdi mdi-calendar-blank-outline"
         ></base-form-input>
-        <base-form-input
-          v-if="member.documentType.ids !== 'SBI' && member.documentType.ids !== 'VNZ'"
-          v-model="member.documentExpire"
-          :label="$t('form.documentExpire')"
-          :rules="$rules.required.concat($rules.date)"
-          maska="##.##.####"
-          append-inner-icon="mdi mdi-calendar-blank-outline"
-        ></base-form-input>
+        <base-fade-transition>
+          <base-form-input
+            v-if="member.documentType.ids !== 'SBI' && member.documentType.ids !== 'VNZ'"
+            v-model="member.documentExpire"
+            :label="$t('form.documentExpire')"
+            :readonly="isDisabled"
+            :clearable="!isDisabled"
+            :rules="$rules.required.concat($rules.date)"
+            maska="##.##.####"
+            append-inner-icon="mdi mdi-calendar-blank-outline"
+          ></base-form-input>
+        </base-fade-transition>
         <base-panel-input
           v-model="member.signOfResidency"
           :value="member.signOfResidency.nameRu"
           :label="$t('form.signOfResidency')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
           :rules="$rules.objectRequired"
           append-inner-icon="mdi mdi-chevron-right"
           @append="openPanel($t('form.signOfResidency'), [], 'signOfResidency', $dataStore.getResidents)"
@@ -164,23 +393,31 @@
           v-model="member.countryOfTaxResidency"
           :value="member.countryOfTaxResidency.nameRu"
           :label="$t('form.countryOfTaxResidency')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
           :rules="$rules.objectRequired"
           append-inner-icon="mdi mdi-chevron-right"
           @append="openPanel($t('form.countryOfTaxResidency'), [], 'countryOfTaxResidency', $dataStore.getTaxCountries)"
         ></base-panel-input>
-        <base-panel-input
-          v-if="member.countryOfTaxResidency.ids === '500014.3'"
-          v-model="member.addTaxResidency"
-          :value="member.addTaxResidency.nameRu"
-          :label="$t('form.addTaxResidency')"
-          :rules="$rules.objectRequired"
-          append-inner-icon="mdi mdi-chevron-right"
-          @append="openPanel($t('form.addTaxResidency'), [], 'addTaxResidency', $dataStore.getAdditionalTaxCountries)"
-        ></base-panel-input>
+        <base-fade-transition>
+          <base-panel-input
+            v-if="member.countryOfTaxResidency.ids === '500014.3'"
+            v-model="member.addTaxResidency"
+            :value="member.addTaxResidency.nameRu"
+            :label="$t('form.addTaxResidency')"
+            :readonly="isDisabled"
+            :clearable="!isDisabled"
+            :rules="$rules.objectRequired"
+            append-inner-icon="mdi mdi-chevron-right"
+            @append="openPanel($t('form.addTaxResidency'), [], 'addTaxResidency', $dataStore.getAdditionalTaxCountries)"
+          ></base-panel-input>
+        </base-fade-transition>
         <base-panel-input
           v-model="member.signOfIPDL"
           :value="member.signOfIPDL.nameRu"
           :label="$t('form.signOfIPDL')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
           :rules="$rules.objectRequired"
           append-inner-icon="mdi mdi-chevron-right"
           @append="openPanel($t('form.signOfIPDL'), $dataStore.ipdl, 'signOfIPDL')"
@@ -189,6 +426,8 @@
           v-model="member.countryOfCitizenship"
           :value="member.countryOfCitizenship.nameRu"
           :label="$t('form.countryOfCitizenship')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
           :rules="$rules.objectRequired"
           append-inner-icon="mdi mdi-chevron-right"
           @append="openPanel($t('form.countryOfCitizenship'), [], 'countryOfCitizenship', $dataStore.getCitizenshipCountries)"
@@ -197,39 +436,53 @@
           v-model="member.economySectorCode"
           :value="member.economySectorCode.nameRu"
           :label="$t('form.economySectorCode')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
           :rules="$rules.objectRequired"
           append-inner-icon="mdi mdi-chevron-right"
           @append="openPanel($t('form.economySectorCode'), [], 'economySectorCode', $dataStore.getSectorCodeList)"
         ></base-panel-input>
       </base-form-section>
-      <base-form-section :title="$t('form.contactsData')">
+      <base-form-section :title="$t('form.contactsData')" v-if="$dataStore.hasContactSection(whichForm)">
         <base-form-input
           v-model="member.homePhone"
           maska="+7 (7##) ### ## ##"
           placeholder="+7 7"
           :label="$t('form.homePhone')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
           :rules="whichForm === formStore.beneficiaryFormKey ? [] : $rules.phoneFormat"
         ></base-form-input>
-        <base-form-input v-model="member.email" :label="$t('form.email')" :rules="$rules.email"></base-form-input>
+        <base-form-input v-model.trim="member.email" :label="$t('form.email')" :rules="$rules.email"></base-form-input>
       </base-form-section>
     </v-form>
-    <base-btn :text="$t('buttons.save')" @click="submitForm"></base-btn>
+    <base-btn v-if="!isDisabled && isTask && $dataStore.isInitiator()" :loading="isButtonLoading || isSubmittingForm" :text="$t('buttons.save')" @click="submitForm"></base-btn>
     <Teleport v-if="isPanelOpen" to="#panel-actions">
-      <div :class="[$libStyles.scrollPage]">
-        <base-rounded-input v-model="searchQuery" :label="$t('labels.search')" class="p-2" :hide-details="true"></base-rounded-input>
-        <div v-if="panelList && isPanelLoading === false">
-          <base-panel-item class="cursor-pointer border-t-[1px]" @click="pickPanelValue(new Value())">{{ $t('form.notChosen') }}</base-panel-item>
-          <base-panel-item
+      <div :class="[$libStyles.scrollPage]" class="flex flex-col items-center">
+        <base-rounded-input v-model="searchQuery" :label="$t('labels.search')" class="w-full p-2" :hide-details="true"></base-rounded-input>
+        <div v-if="panelList && isPanelLoading === false" class="w-full flex flex-col gap-2 p-2">
+          <base-panel-select-item :text="$t('form.notChosen')" :selected="panelValue.nameRu === null" @click="pickPanelValue(new Value())"></base-panel-select-item>
+          <base-panel-select-item
             v-for="(item, index) of panelList.filter(i => i.nameRu && (i.nameRu as string).match(new RegExp(searchQuery, 'i')))"
             :key="index"
-            class="cursor-pointer"
-            :class="[item.nameRu === panelValue.nameRu && $libStyles.greenText]"
+            :text="item.nameRu as string"
+            :selected="item.nameRu === panelValue.nameRu"
             @click="pickPanelValue(item)"
-          >
-            {{ item.nameRu }}
-          </base-panel-item>
+          ></base-panel-select-item>
         </div>
-        <base-loader v-if="isPanelLoading" class="absolute mx-auto mt-10" :size="50"></base-loader>
+        <base-loader v-if="isPanelLoading" class="absolute mt-10" :size="50"></base-loader>
+      </div>
+    </Teleport>
+    <Teleport v-if="isSearchOpen" to="#panel-actions">
+      <div :class="[$libStyles.flexColNav]">
+        <base-btn v-if="$dataStore.controls.hasGBDFL" :loading="isButtonLoading" :text="$t('buttons.fromGBDFL')" @click="getContragentFromGBDFL"></base-btn>
+        <base-btn v-if="$dataStore.controls.hasInsis" :loading="isButtonLoading" :text="$t('buttons.fromInsis')" @click="getContragent"></base-btn>
+      </div>
+    </Teleport>
+    <Teleport v-if="isDocumentOpen" to="#panel-actions">
+      <div :class="[$libStyles.flexColNav]">
+        <base-btn :disabled="documentLoading" :loading="documentLoading" text="Открыть" @click="getFile('view')"></base-btn>
+        <base-btn :disabled="documentLoading" :loading="documentLoading" text="Скачать" @click="getFile('download')"></base-btn>
       </div>
     </Teleport>
   </section>
@@ -237,11 +490,13 @@
 
 <script lang="ts">
 import { LocationQueryValue } from 'vue-router';
-import { Value } from '@/composables/classes';
+import { Value, DocumentItem } from '@/composables/classes';
+import { uuid } from 'vue-uuid';
 
-export default defineComponent({
+export default {
   setup() {
-    const componentKey = ref<number>(0);
+    type FileActions = 'view' | 'download';
+
     const vForm = ref<any>();
     const route = useRoute();
     const router = useRouter();
@@ -252,26 +507,84 @@ export default defineComponent({
       memberStore.getMemberFromStore(whichForm as keyof typeof formStore, Number((whichIndex ? whichIndex : '0') as string))!;
     const member = ref(getMember(route.query.tab, route.query.i));
     const isPanelOpen = ref<boolean>(false);
+    const memberDocument = ref<DocumentItem>();
+    const isButtonLoading = ref<boolean>(false);
+    const isSubmittingForm = ref<boolean>(false);
+    const documentLoading = ref<boolean>(false);
+    const isSearchOpen = ref<boolean>(false);
+    const isDocumentOpen = ref<boolean>(false);
     const isPanelLoading = ref<boolean>(false);
     const panelValue = ref<Value>(new Value());
     const panelList = ref<Value[]>([]);
-    const currentPanel = ref<string>('');
+    const currentPanel = ref<keyof typeof member.value>();
     const searchQuery = ref<string>('');
+    const fileData = ref<{ file: any }>();
 
     const whichForm = computed(() => route.query.tab);
     const whichIndex = computed(() => route.query.i);
+    const hasOtp = computed(() => member.value.otpCode && member.value.otpCode.length === 7);
+    const isDisabled = computed(() => !memberStore.isStatementEditible(whichForm.value as string));
+    const isTask = computed(() => route.params.taskId === '0' || dataStore.isTask());
+    const isIinPhoneDisabled = computed(() => formStore.applicationData && 'regNumber' in formStore.applicationData && whichForm.value === formStore.policyholderFormKey);
+    const isFromGBD = computed(() => !!member.value.gosPersonData);
+
+    const getOtpConditionByMember = () => {
+      switch (whichForm.value) {
+        case formStore.policyholderFormKey:
+          return route.params.taskId === '0';
+        case formStore.policyholdersRepresentativeFormKey:
+          return route.query.id === '0';
+        case formStore.insuredFormKey:
+          return route.query.id === '0';
+        case formStore.beneficiaryFormKey:
+          return route.query.id === '0';
+        case formStore.beneficialOwnerFormKey:
+          return route.query.id === '0';
+      }
+    };
+    const otpCondition = computed(() => {
+      // Add conditions by product
+      if (member.value.hasAgreement) return false;
+      if (!member.value.phoneNumber || (member.value.phoneNumber && member.value.phoneNumber.length !== 18)) return false;
+      return getOtpConditionByMember();
+    });
 
     const searchMember = async () => {
-      console.log('Search');
+      if (!isDisabled.value) {
+        dataStore.panelAction = null;
+        dataStore.panel.title = 'Поиск клиента';
+        dataStore.panel.open = true;
+        isSearchOpen.value = true;
+        isDocumentOpen.value = false;
+        isPanelOpen.value = false;
+      } else {
+        dataStore.showToaster('error', dataStore.t('toaster.viewErrorText'));
+      }
+    };
+
+    const openCustomPanel = (type: 'document' = 'document') => {
+      dataStore.panelAction = null;
+      if (type === 'document' && memberDocument.value) {
+        dataStore.panel.title = memberDocument.value.fileTypeName!;
+        isDocumentOpen.value = true;
+        isSearchOpen.value = false;
+        isPanelOpen.value = false;
+      }
+      dataStore.panel.open = true;
     };
 
     const openPanel = async (title: string, list: Value[], key: string, asyncFunction?: Function, filterKey?: string) => {
-      if (formStore.isDisabled[whichForm.value as keyof typeof formStore.isDisabled] === false) {
-        const notAllowedToChange = ['gender', 'documentType', 'documentIssuers'];
-        if (member.value.gotFromInsis === false && notAllowedToChange.includes(key)) {
-          return;
-        }
-        currentPanel.value = key;
+      if (!isDisabled.value) {
+        isSearchOpen.value = false;
+        isDocumentOpen.value = false;
+        // Feature
+        // const notAllowedToChange = ['gender', 'documentType', 'documentIssuers'];
+        // if (member.value.gotFromInsis === false && notAllowedToChange.includes(key)) {
+        //   dataStore.showToaster('error', 'Запрещенео менять значения этого поля');
+        //   return;
+        // }
+        searchQuery.value = '';
+        currentPanel.value = key as keyof typeof member.value;
         isPanelOpen.value = true;
         dataStore.panelAction = null;
         dataStore.panel.open = true;
@@ -280,10 +593,10 @@ export default defineComponent({
         let newList = list;
         if (asyncFunction) {
           isPanelLoading.value = true;
-          newList = await asyncFunction(filterKey, whichForm.value);
+          newList = await asyncFunction(filterKey, member.value);
         }
         panelList.value = newList;
-        panelValue.value = member.value[key as keyof typeof member.value];
+        panelValue.value = member.value[currentPanel.value];
         isPanelLoading.value = false;
       } else {
         dataStore.showToaster('error', dataStore.t('toaster.viewErrorText'));
@@ -294,16 +607,208 @@ export default defineComponent({
       if (formStore.isDisabled[whichForm.value as keyof typeof formStore.isDisabled] === false) {
         dataStore.panel.open = false;
         isPanelOpen.value = false;
-        member.value[currentPanel.value as keyof typeof member.value] = item.nameRu === null ? new Value() : item;
+        // @ts-ignore
+        member.value[currentPanel.value] = item.nameRu === null ? new Value() : item;
       } else {
         dataStore.showToaster('error', dataStore.t('toaster.viewErrorText'));
       }
     };
 
+    const uploadFile = async (processInstanceId: string | number) => {
+      const selectedDocument = dataStore.dicFileTypeList.find((i: Value) => i.nameRu === member.value.documentType.nameRu);
+      const formData = new FormData();
+      const information: any = [];
+      const uuidV4 = uuid.v4();
+      if (fileData.value) {
+        Object.values(fileData.value.file).map((value: any) => {
+          formData.append('file', value);
+          const ext = value.name.substr(value.name.lastIndexOf('.'));
+          information.push({
+            identifier: `${uuidV4}${ext}`,
+            iin: member.value.iin ? member.value.iin.replaceAll('-', '') : null,
+            processInstanceId: processInstanceId,
+            fileTypeCode: selectedDocument ? selectedDocument.code : null,
+            fileTypeId: selectedDocument ? selectedDocument.id : null,
+            fileName: value.name,
+          });
+        });
+        formData.append('fileData', JSON.stringify(information));
+        await dataStore.uploadFiles(formData, false);
+      }
+    };
+
+    const attachFile = (event: InputEvent) => {
+      if (event.target) {
+        fileData.value = { file: (event.target as HTMLInputElement).files };
+      } else {
+        if (event.dataTransfer) {
+          fileData.value = { file: (event.dataTransfer as DataTransfer).files };
+        }
+      }
+    };
+
+    const getFile = async (type: FileActions) => {
+      if (memberDocument.value) {
+        documentLoading.value = true;
+        const fileExtension = memberDocument.value.fileName!.match(/\.([0-9a-z]+)(?:[\?#]|$)/i)![1];
+        await dataStore.getFile(memberDocument.value, type, fileExtension);
+        documentLoading.value = false;
+      }
+    };
+
+    const getContragentFromGBDFL = async () => {
+      if (member.value.hasAgreement === false) {
+        dataStore.showToaster('error', dataStore.t('toaster.needAgreement'), 3000);
+        return;
+      }
+      if (!member.value.iin || member.value.iin.length !== 15 || !member.value.phoneNumber || member.value.phoneNumber.length !== 18) {
+        dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', 'Номер телефона, ИИН'), 5000);
+        return;
+      }
+      isButtonLoading.value = true;
+      await dataStore.getContragentFromGBDFL(member.value.iin, member.value.phoneNumber, whichForm.value, whichIndex.value ? Number(whichIndex.value) : null);
+      member.value.gotFromInsis = true;
+      isSearchOpen.value = false;
+      dataStore.panel.open = false;
+      isButtonLoading.value = false;
+    };
+
+    const getContragent = async () => {
+      if (member.value.hasAgreement === false) {
+        dataStore.showToaster('error', dataStore.t('toaster.needAgreement'), 3000);
+        return;
+      }
+      if (!member.value.iin || member.value.iin.length !== 15) {
+        dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', 'ИИН'), 5000);
+        return;
+      }
+      isButtonLoading.value = true;
+      await dataStore.getContragent(member.value, whichForm.value, whichIndex.value, false);
+      isSearchOpen.value = false;
+      dataStore.panel.open = false;
+      isButtonLoading.value = false;
+    };
+
+    const validateESBD = async (docTypeNumber: number) => {
+      const data = {
+        personType: 1,
+        iin: member.value.iin!.replaceAll('-', ''),
+        lastName: member.value.lastName,
+        firstName: member.value.firstName,
+        middleName: member.value.middleName,
+        birthDate: member.value.getDateByKey('birthDate'),
+        sex: member.value.gender.id,
+        docType: docTypeNumber,
+        docNumber: member.value.documentNumber,
+        docIssuedDate: member.value.getDateByKey('documentDate'),
+        docIssuedBy: member.value.documentIssuers.nameRu,
+        activityKindId: 0,
+        economicsSectorId: Number((member.value.economySectorCode.ids! as string).at(-1)),
+        resident: member.value.signOfResidency.ids === '500011.2' || member.value.signOfResidency.ids === null ? 0 : 1,
+        countryId: Number((member.value.countryOfTaxResidency.ids! as string).at(-1)),
+      };
+      return await dataStore.getValidateClientESBD(data);
+    };
+
+    const saveMember = async () => {
+      const hasSaved = await dataStore.saveContragent(member.value, whichForm.value, whichIndex.value, true);
+      if (hasSaved === false) {
+        dataStore.isLoading = false;
+        return false;
+      }
+      const isInsured = formStore.isPolicyholderInsured;
+      if (whichForm.value == formStore.policyholderFormKey) {
+        if (route.params.taskId === '0') {
+          try {
+            const taskId = await dataStore.startApplication(member.value);
+            if (taskId) {
+              await dataStore.getApplicationData(taskId, false, false, false, false);
+              await router.replace({
+                name: route.name!,
+                params: { taskId },
+                query: { ...route.query },
+              });
+              dataStore.showToaster('success', dataStore.t('toaster.successStatementCreation'));
+            } else {
+              formStore.applicationData = { processInstanceId: 0 };
+              return;
+            }
+            dataStore.isLoading = false;
+          } catch (err) {
+            formStore.applicationData = { processInstanceId: 0 };
+            dataStore.isLoading = false;
+            return;
+          }
+        }
+        if (fileData.value && fileData.value.file) {
+          await uploadFile(formStore.applicationData.processInstanceId);
+        }
+      }
+      const memberFromApplicaiton = memberStore.getMemberFromApplication(whichForm.value as keyof typeof formStore, whichIndex.value ? Number(whichIndex.value) : undefined);
+      const isSaved = await dataStore.saveMember(member.value, memberStore.getMemberCode(whichForm.value as keyof typeof formStore), memberFromApplicaiton);
+      if (!isSaved) return false;
+      if (whichForm.value === formStore.policyholderFormKey && isInsured === true) {
+        formStore.insuredForm[0] = formStore.policyholderForm;
+        const isInsuredSaved = await dataStore.saveMember(
+          member.value,
+          memberStore.getMemberCode(formStore.insuredFormKey as keyof typeof formStore),
+          memberStore.getMemberFromApplication(formStore.insuredFormKey as keyof typeof formStore, formStore.insuredFormIndex),
+        );
+        if (!isInsuredSaved) return false;
+      }
+      await router.replace({
+        name: route.name!,
+        query: { ...route.query, id: member.value.id },
+      });
+      await dataStore.getApplicationData(route.params.taskId, false, false, false, false);
+      if (dataStore.controls.hasCalculator) {
+        if (dataStore.additionalInsuranceTermsWithout && dataStore.additionalInsuranceTermsWithout.length !== 0) {
+          dataStore.additionalInsuranceTerms.forEach((term: any) => {
+            const defaultTerm = dataStore.additionalInsuranceTermsWithout.find((i: any) => i.coverTypeId === term.coverTypeId);
+            if (defaultTerm) {
+              term.coverSumName = defaultTerm.coverSumName;
+              term.coverSumId = defaultTerm.coverSumId;
+            }
+          });
+        }
+      }
+      dataStore.showToaster('success', dataStore.t('toaster.successSaved'));
+      dataStore.isLoading = false;
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+
     const submitForm = async () => {
+      if (member.value.hasAgreement === false) {
+        dataStore.showToaster('error', dataStore.t('toaster.needAgreement'));
+        return;
+      }
       await vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
         if (v.valid) {
-          console.log(v);
+          isSubmittingForm.value = true;
+          const docType = member.value.documentType.ids;
+          if (member.value.gotFromInsis === true && (docType === '1UDL' || docType === 'SBI')) {
+            dataStore.isLoading = true;
+            const ESBDResponse = await validateESBD(docType === '1UDL' ? 1 : 3);
+            if (!ESBDResponse) {
+              dataStore.isLoading = false;
+              return;
+            }
+            const initialPoint = `${member.value.iin!.replaceAll('-', '')}.`;
+            const RESPONSE = ESBDMessage(ESBDResponse, initialPoint);
+            let errorMessage = RESPONSE !== false ? RESPONSE : 'Что-то произошло не так';
+            if (ESBDResponse.errorCode === 0) {
+              member.value.verifyType = 'ESBD';
+              member.value.verifyDate = ESBDResponse.verifiedDate;
+              const hasMemberSaved = await saveMember();
+            } else {
+              dataStore.isLoading = false;
+              dataStore.showToaster('error', errorMessage, 5000);
+            }
+          } else {
+            member.value.gotFromInsis = true;
+            const hasMemberSaved = await saveMember();
+          }
+          isSubmittingForm.value = false;
         } else {
           const errors = document.querySelector('.v-input--error');
           if (errors) {
@@ -326,16 +831,100 @@ export default defineComponent({
       });
     };
 
+    const checkOtp = async () => {
+      if (!member.value.otpCode || member.value.iin?.length !== 15 || member.value.phoneNumber?.length !== 18) {
+        dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', dataStore.t('form.otpCode')), 3000);
+        return;
+      }
+      const checked = await memberStore.checkOtp(member.value);
+      if (typeof checked !== 'undefined') {
+        member.value.hasAgreement = checked;
+      }
+    };
+
+    const sendOtp = async (onInit = false) => {
+      const response = await memberStore.sendOtp(member.value, formStore.applicationData.processInstanceId, onInit);
+      if (response) {
+        if (member.value.hasAgreement === null) member.value.hasAgreement = response.otpStatus;
+      }
+    };
+
+    const onInit = async () => {
+      if (route.params.taskId === '0' || (route.params.taskId !== '0' && dataStore.isProcessEditable(formStore.applicationData.statusCode))) {
+        await dataStore.getSignedDocList(formStore.applicationData.processInstanceId);
+      }
+      if (getOtpConditionByMember()) {
+        await sendOtp(true);
+      } else {
+        if (member.value.hasAgreement === null) member.value.hasAgreement = true;
+      }
+      if (route.query.id !== '0' && !member.value.id) {
+        await dataStore.getContragentById(route.query.id, whichForm.value, true);
+      }
+      if (member.value.id && route.query.id === '0') {
+        await router.replace({
+          name: route.name!,
+          query: { ...route.query, id: member.value.id },
+        });
+      }
+      if (member.value.id) {
+        const filteredDocuments: DocumentItem[] = dataStore.getFilesByIIN(member.value.iin!.replace(/-/g, '')) as DocumentItem[];
+        if (filteredDocuments && filteredDocuments.length) memberDocument.value = filteredDocuments[0];
+      }
+    };
+
+    onMounted(async () => {
+      await onInit();
+    });
+
     onBeforeRouteUpdate(to => {
-      member.value = getMember(to.query.tab, to.query.i);
-      componentKey.value++;
+      if ('tab' in to.query && to.query.tab !== 'productConditions') {
+        member.value = getMember(to.query.tab, to.query.i);
+      }
     });
 
+    watch(
+      () => member.value.percentageOfPayoutAmount,
+      val => {
+        if (val) {
+          if (val < 0) {
+            member.value.percentageOfPayoutAmount = 0;
+            dataStore.showToaster('error', dataStore.t('toaster.incorrectInput'), 1000);
+          } else if (val > 100) {
+            member.value.percentageOfPayoutAmount = 100;
+            dataStore.showToaster('error', dataStore.t('toaster.incorrectInput'), 1000);
+          }
+        }
+      },
+    );
+
+    watch(
+      () => member.value.birthDate,
+      val => {
+        if (val && val.length === 10) {
+          const calculatedAge = member.value.getAgeByBirthDate();
+          if (calculatedAge) member.value.age = calculatedAge;
+        }
+      },
+    );
+
+    watch(
+      () => member.value.otpCode,
+      async () => {
+        if (member.value.otpCode && member.value.otpCode.length === 7) {
+          await checkOtp();
+        }
+      },
+    );
+
     watch(
       () => dataStore.panel.open,
       () => {
         if (dataStore.panel.open === false) {
           isPanelOpen.value = false;
+          isDocumentOpen.value = false;
+          isSearchOpen.value = false;
+          dataStore.panelAction = null;
         }
       },
       { immediate: true },
@@ -354,23 +943,41 @@ export default defineComponent({
       memberStore,
       member,
       isPanelOpen,
+      isSearchOpen,
+      isDocumentOpen,
       isPanelLoading,
-      componentKey,
+      isButtonLoading,
+      isSubmittingForm,
+      documentLoading,
       panelValue,
       panelList,
       searchQuery,
       Value,
+      memberDocument,
 
       // Computed
       whichForm,
       whichIndex,
+      otpCondition,
+      hasOtp,
+      isDisabled,
+      isTask,
+      isIinPhoneDisabled,
+      isFromGBD,
 
       // Functions
       searchMember,
       openPanel,
+      openCustomPanel,
       pickPanelValue,
       submitForm,
+      checkOtp,
+      sendOtp,
+      getContragentFromGBDFL,
+      getContragent,
+      attachFile,
+      getFile,
     };
   },
-});
+};
 </script>