asco_admin/src/views/register/Register.vue

<template>

  <div class="mx-5">
    <div class="flex justify-center">
      <img src="@/assets/images/logo.svg" width="150px" class="mt-10"/>
    </div>
    <vx-card class="mx-auto mt-10">

      <a-steps :current="current" v-show="current<2">
        <a-step title="مرحله اول"/>
        <a-step title="مرحله دوم"/>
        <a-step title="مرحله سوم"/>
      </a-steps>
      <div v-show="current == 0">
        <p class="mt-6">
          متقاضی گرامی ضمن سپاس از علاقه مندی شما برای همکاری با مجموعه آسکو بین الملل، لطفا اطلاعات شخصی و شغل مورد نظر
          خود را به دقت تکمیل فرمایید.
        </p>
        <p>
          درخواستها مورد بررسی قرار گرفته و در صورت هماهنگی با فرصتهای شغلی شرکت، با شما تماس گرفته خواهد شد.
        </p>
        <p>
          با تشکر و آرزوی موفقیت
        </p>
      </div>
      <a-divider/>
      <div class="steps-content">
        <ASpin :spinning="loading">
          <a-form :form="formFirst">
            <!-- <a-form-item label="نام و نام خانوادگی">
               &lt;!&ndash;<a-input autocomplete="off" v-decorator="['name2',{initialValue: null,rules: [{ required: true, message: 'این فیلد نمیتواند خالی باشد.' }]}]" />&ndash;&gt;
              &lt;!&ndash; <a-input v-decorator="['name',{initialValue: null,rules: [{ required: true, message: 'این فیلد نمیتواند خالی باشد.' }]}]" class="ant-input" placeholder="Basic usage" />&ndash;&gt;
                   &lt;!&ndash;<input type="text" v-decorator="['name',{initialValue: null,rules: [{ required: true, message: 'این فیلد نمیتواند خالی باشد.' }]}]" class="ant-input" >&ndash;&gt;
              &lt;!&ndash; <vs-input v-decorator="['name',{initialValue: null,rules: [{ required: true, message: 'این فیلد نمیتواند خالی باشد.' }]}]" />&ndash;&gt;
             </a-form-item>-->
            <div v-show="current==0" class="mt-4">
              <a-button type="primary" @click="addCity()">
                افزودن ردیف
              </a-button>
              <a-card :bordered="true" class="mt-3" v-for="(item,index) in jobsList">
                <div class="grid sm:grid-cols-1 md:grid-cols-2 md:gap-3 lg:grid-cols-2 lg:gap-3">
                  <div>
                    <a-form-item label="انتخاب شهر">
                      <a-select
                          :filter-option="filterOption"
                          show-search
                          v-decorator="[`jobs[${index}].city`,{rules: [{ required: true, message: 'انتخاب شهر الزامی است.' }]}]"
                          autocomplete="off"
                          @select="getJob(index)"
                          notFoundContent="اطلاعاتی یافت نشد"
                          placeholder="لطفا شهر را انتخاب کنید.">
                        <a-select-option v-for="item in city" :value="item.id">
                          {{ item.title }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                  </div>
                  <a-form-item label="انتخاب شغل">
                    <a-select
                        :filter-option="filterOption"
                        show-search
                        notFoundContent="اطلاعاتی یافت نشد"
                        autocomplete="off" aria-placeholder="لطفا شغل خود را انتخاب کنید."
                        v-decorator="[`jobs[${index}].job`,{rules: [{ required: true, message: 'انتخاب شغل الزامی است.' }]}]">
                      <a-select-option v-for="item in jobsList[index].jobs" :value="item.id">
                        {{ item.title }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </div>
                <a-button type="danger" @click="deleteCity(index)" v-if="index >0">
                  حذف
                </a-button>
              </a-card>
            </div>
          </a-form>

          <a-form :form="from">
            <div v-show="current==1">

              <a-alert message="توجه داشته باشید پس از ثبت اطلاعات، بازگشت عملیات امکان پذیر نخواهد بود."
                       type="warning"/>

              <div class="grid sm:grid-cols-1 md:grid-cols-4 lg:grid-cols-4 gap-4 mt-5">

                <a-form-item label="نام و نام خانوادگی">
                  <!-- <a-input autocomplete="off" v-decorator="['name',{initialValue: null,rules: [{ required: true, message: 'این فیلد نمیتواند خالی باشد.' }]}]" />-->
                  <input autocomplete="off" type="text"
                         v-decorator="['name',{initialValue: null,rules: [{ required: true, message: 'نام و نام خانوادگی را وارد نمایید' }]}]"
                         class="ant-input">
                </a-form-item>

                <a-form-item label="نام پدر">
                  <!--<a-input autocomplete="off" v-decorator="['father_name',{initialValue: null,rules: [{ required: true, message: 'نام پدر را وارد نمایید' }]}]" />-->
                  <input autocomplete="off" type="text" class="ant-input"
                         v-decorator="['father_name',{initialValue: null,rules: [{ required: true, message: 'نام پدر را وارد نمایید' }]}]">
                </a-form-item>

                <div>
                  <a-form-item label="تاریخ تولد">
                    <!-- birth_date-->
                    <input v-if="!birth_day" class="hidden" autocomplete="off"
                           v-decorator="['note',{ rules:[{ required: true, message: 'تاریخ را وارد نمایید' }] }]"/>
                    <date-picker v-model="birth_day"/>
                    <!-- v-decorator="['birthdate',{initialValue: null,rules: [{ required: true, message: 'تاریخ تولد را وارد نمایید' }]}]"-->
                  </a-form-item>
                </div>

                <a-form-item label="کد ملی">
                  <!--<a-input autocomplete="off" v-decorator="['ncode',{initialValue: null,rules: [{ required: true, message: 'این فیلد نمیتواند خالی باشد.' }]}]" />-->
                  <input autocomplete="off" type="text"
                         v-decorator="['ncode',{initialValue: null,rules: [{ required: true, message: 'کد ملی را وارد نمایید' },{ min	: 10, message: 'کد ملی 10 رقمی می باشد' },{ max	: 10, message: 'کد ملی 10 رقمی می باشد' },{pattern:/^[0-9]+$/,message:'مقدار وارد شده باید عددی باشد.'}]}]"
                         class="ant-input">
                </a-form-item>

              </div>

              <div class="grid lg:grid-cols-4 md:grid-cols-4 sm:grid-cols-1 gap-4">
                <a-form-item label="جنسیت">
                  <a-radio-group style="direction: ltr" v-decorator="['gender',{ initialValue: '1' }]"
                                 button-style="solid" @change="setGender">
                    <a-radio-button value="2">
                      زن
                    </a-radio-button>
                    <a-radio-button value="1">
                      مرد
                    </a-radio-button>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="وضعیت تاهل">
                  <a-radio-group style="direction: ltr" v-decorator="['married',{initialValue: '1'}]"
                                 button-style="solid" @change="setMarriage_sts">
                    <a-radio-button value="1">
                      مجرد
                    </a-radio-button>
                    <a-radio-button value="2">
                      متاهل
                    </a-radio-button>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="شماره حساب بانک پاسارگاد">
                  <input class="ant-input" autocomplete="off"
                         v-decorator="['pasargad_bank_number',{initialValue: null},{ rules: [{pattern:/^[0-9]+$/,message:'مقدار وارد شده باید عددی باشد.'},] }]"/>
                </a-form-item>

                <a-form-item label="حقوق درخواستی">
                  <input class="ant-input" autocomplete="off"
                         v-decorator="['requested_salary',{initialValue: null,rules: [{ required: true, message: 'حقوق درخواستی را وارد نمایید' },{pattern:/^[0-9]+$/,message:'مقدار وارد شده باید عددی باشد.'}]}]"/>
                </a-form-item>
                <a-form-item label="تعداد فرزند" v-if="flags.marriage_sts == 2">
                  <input class="ant-input"
                         v-decorator="['count_child',{rules: [{ required: true, message: 'لطفا مقدار را وارد کنید' },{ pattern: /^[0-9]+$/,type: 'string', message: 'فقط عدد مجاز است' }] }]"/>
                </a-form-item>

                <a-form-item label="وضعیت نظام وظیفه" v-if="flags.gender == 1">
                  <a-select style="width: 100%"
                            v-decorator="['military_sts',{rules: [{ required: true, message: 'لطفا مقدار را وارد کنید' }] }]">
                    <a-select-option v-for="(item,index) in {1:'معاف',2:'مشمول',3:'پایان خدمت',}" :value="index">
                      {{ item }}
                    </a-select-option>
                  </a-select>
                </a-form-item>

              </div>

              <a-card :bordered="true">

                <a-alert message="توضیحات سریال شناسنامه" type="info"/>

                <div class="grid sm:grid-cols-1 md:grid-cols-4 lg:grid-cols-4 gap-4">
                  <a-form-item label="شماره شناسنامه">
                    <input class="ant-input" autocomplete="off"
                           v-decorator="['iden_code',{initialValue: null,rules: [{ required: true, message: 'شماره شناسنامه را وارد نمایید' },{pattern:/^[0-9]+$/,message:'مقدار وارد شده باید عددی باشد.'}]}]"/>
                  </a-form-item>

                  <a-form-item label="سریال شناسنامه">
                    <a-input-group compact style="direction: ltr">
                      <a-select style="width: 23%" v-decorator="['iden_no_left',{initialValue: null}]">
                        <a-select-option style="width: 100% !important;" v-for="item in alphabet" :value="item">
                          {{ item }}
                        </a-select-option>
                      </a-select>
                      <input class="ant-input"
                             v-decorator="['iden_no_right',{initialValue: null},{ rules: [{pattern:/^[0-9]+$/,message:'مقدار وارد شده باید عددی باشد.'},] }]"
                             autocomplete="off" style="width: 77%;direction: rtl"/>
                    </a-input-group>
                  </a-form-item>
                  <!--  <a-input-group compact>
                      <a-select default-value="Option1">
                        <a-select-option value="Option1">
                          Option1
                        </a-select-option>
                        <a-select-option value="Option2">
                          Option2
                        </a-select-option>
                      </a-select>
                      <a-input style="width: 50%" default-value="input content" />
                    </a-input-group>-->


                  <a-form-item label="محل صدور">
                    <input class="ant-input" autocomplete="off"
                           v-decorator="['iden_where',{initialValue: null,rules: [{ required: true, message: 'محل صدور را وارد نمایید' }]}]"/>
                  </a-form-item>

                  <a-form-item label="محل تولد">
                    <input class="ant-input" autocomplete="off"
                           v-decorator="['birth_where',{initialValue: null,rules: [{ required: true, message: 'محل تولد را وارد نمایید' }]}]"/>
                  </a-form-item>
                </div>
              </a-card>
              <br/>
              <a-card title="اطلاعات سکونت" :bordered="true">

                <a-form-item label="وضعیت مسکن">
                  <a-radio-group style="direction: ltr" v-decorator="['house_sts',{initialValue: '1'}]"
                                 button-style="solid">
                    <a-radio-button value="2">
                      مستاجر
                    </a-radio-button>
                    <a-radio-button value="1">
                      مالک
                    </a-radio-button>
                  </a-radio-group>
                </a-form-item>

                <a-form-item label="آدرس">
                  <input class="ant-input" autocomplete="off"
                         v-decorator="['address',{initialValue: null,rules: [{ required: true, message: 'آدرس را وارد نمایید' }]}]"/>
                </a-form-item>

                <div class="md:flex">
                  <div class="md:w-1/4 md:pl-4">
                    <a-row>
                      <a-form-item label="ایمیل">
                        <input class="ant-input" style="direction: rtl !important;"
                               v-decorator="['email',{initialValue: null,rules: [{ required: true, message: 'ایمیل را وارد نمایید' }]}]">
                        <!--                                                <feather-icon style="direction: ltr !important;" icon="MailIcon" slot="addonAfter" class="pt-1" svgClasses="w-5 h-5" />-->
                        <!-- </a-input>-->
                      </a-form-item>
                    </a-row>
                  </div>
                  <div class="md:w-1/4 md:pl-4">
                    <a-row>
                      <a-form-item label="موبایل">
                        <input class="ant-input" autocomplete="off"
                               v-decorator="['mobile',{initialValue: null,rules: [{ required: true, message: 'شماره موبایل را وارد نمایید' },{pattern:/^[0-9]+$/,message:'مقدار وارد شده باید عددی باشد.'}]}]">
                        <!--<feather-icon style="direction: ltr !important;" icon="SmartPhoneIcon" slot="addonAfter" class="pt-1" svgClasses="w-5 h-5" />-->
                        <!-- </a-input>-->
                      </a-form-item>
                    </a-row>
                  </div>
                  <div class="md:w-1/4 md:pl-4">
                    <a-row>
                      <a-form-item label="تلفن ثابت">
                        <input class="ant-input" autocomplete="off"
                               v-decorator="['phone',{initialValue: null,rules: [{ required: true, message: 'تلفن ثابت را وارد نمایید' },{pattern:/^[0-9]+$/,message:'مقدار وارد شده باید عددی باشد.'}]}]">
                        <!--<feather-icon style="direction: ltr !important;" icon="PhoneIcon" slot="addonAfter" class="pt-1" svgClasses="w-5 h-5" />-->
                        <!-- </a-input>-->
                      </a-form-item>
                    </a-row>
                  </div>
                </div>

                <a-divider/>

                <div class="md:flex">
                  <div class="md:w-1/4 md:pl-4">
                    <a-row>
                      <a-form-item label="تلفن ضروری">
                        <input class="ant-input" style="direction: rtl !important;"
                               v-decorator="['phone_emergency',{initialValue: null,rules: [{ required: true, message: 'تلفن ضروری را وارد نمایید' },{pattern:/^[0-9]+$/,message:'مقدار وارد شده باید عددی باشد.'}]}]">
                        <!--                                                <feather-icon style="direction: ltr !important;" icon="MailIcon" slot="addonAfter" class="pt-1" svgClasses="w-5 h-5" />-->
                        <!-- </a-input>-->
                      </a-form-item>
                    </a-row>
                  </div>
                  <div class="md:w-1/4 md:pl-4">
                    <a-row>
                      <a-form-item label="نام فرد">
                        <input class="ant-input" autocomplete="off"
                               v-decorator="['phone_emergency_name',{initialValue: null}]">
                        <!--<feather-icon style="direction: ltr !important;" icon="SmartPhoneIcon" slot="addonAfter" class="pt-1" svgClasses="w-5 h-5" />-->
                        <!-- </a-input>-->
                      </a-form-item>
                    </a-row>
                  </div>
                  <div class="md:w-1/4 md:pl-4">
                    <a-row>
                      <a-form-item label="نسبت">
                        <input class="ant-input" autocomplete="off"
                               v-decorator="['phone_emergency_related',{initialValue: null}]">
                        <!--<feather-icon style="direction: ltr !important;" icon="PhoneIcon" slot="addonAfter" class="pt-1" svgClasses="w-5 h-5" />-->
                        <!-- </a-input>-->
                      </a-form-item>
                    </a-row>
                  </div>
                </div>

              </a-card>
              <a-divider>دیگر اطلاعات</a-divider>
              <a-card title="سابقه بیمه" :bordered="true">

                <a-form-item label="سابقه بیمه">
                  <a-radio-group style="direction: ltr" v-decorator="['has_insurance',{initialValue:-1}]"
                                 button-style="solid" @change="number_insurance">
                    <a-radio-button :value="1">
                      دارم
                    </a-radio-button>
                    <a-radio-button :value="-1">
                      ندارم
                    </a-radio-button>
                  </a-radio-group>
                </a-form-item>

                <a-form-item label="شماره بیمه" v-if="has_instructor == 1 ">
                  <input class="ant-input" autocomplete="off" style="width: 40%"
                         v-decorator="['insurance_no',{initialValue: null,rules: [{ required: false, message: 'شماره بیمه را وارد نمایید' },{pattern:/^[0-9]+$/,message:'مقدار وارد شده باید عددی باشد.'}]}]"/>
                </a-form-item>

              </a-card>
              <br/>
              <a-card title="اطلاعات خانوادگی" :bordered="true">

                <a-list class="mb-5" v-if="family.length > 0" :locale="{emptyText:'اطلاعاتی برای نمایش وجود ندارد.'}"
                        bordered item-layout="horizontal">
                  <a-list-item class="grid grid-cols-4" v-for="(item,index) in family" :key="index">
                    <div>
                      <div style="direction: ltr"> نام :{{ item.name }}</div>
                      <div style="direction: rtl">نسبت : {{ item.relation }}</div>
                    </div>
                    <div>
                      <div style="direction: ltr" v-if="item.edu"> مقطع :{{ item.edu.title }}</div>
                      <div style="direction: rtl">رشته تحصیلی : {{ item.edu_title }}</div>
                    </div>
                    <div>
                      <div style="direction: rtl">شغل : {{ item.job }}</div>
                    </div>

                    <div>
                      <a-popconfirm
                          placement="right"
                          title="آیا می خواهید حذف کنید؟"
                          ok-text="بله"
                          cancel-text="خیر"
                          @confirm="removeFamily(item)"
                      >
                        <a-button type="danger" class="mr-3">حذف</a-button>
                      </a-popconfirm>

                      <a-button class="mr-3" @click="openModalFamilyModeEDit(item)">
                        مشاهده و ویرایش
                      </a-button>

                    </div>

                  </a-list-item>
                </a-list>

                <a-button type="dashed" icon="plus" @click="openModalFamily">
                  افزودن اطلاعات خانوادگی
                </a-button>

              </a-card>
              <br/>
              <a-card title="سوابق تحصیلی" :bordered="true">

                <a-list class="mb-5" v-if="edu.length > 0" :locale="{emptyText:'اطلاعاتی برای نمایش وجود ندارد.'}"
                        bordered item-layout="horizontal">
                  <a-list-item class="grid grid-cols-4" v-for="(item,index) in edu" :key="index">
                    <div>
                      <div style="direction: ltr" v-if="item.grade"> مقطع :{{ item.grade.title }}</div>
                      <div style="direction: rtl">دانشگاه : {{ item.university }}</div>
                    </div>

                    <div>
                      <div style="direction: rtl">سال شروع : {{ item.start }}</div>
                      <div style="direction: rtl">سال خاتمه : {{ item.end }}</div>
                    </div>

                    <div>
                      <div style="direction: rtl">رشته تحصیلی : {{ item.major }}</div>
                      <div style="direction: rtl">گرایش تحصیلی : {{ item.orientation }}</div>
                    </div>

                    <div>
                      <a-popconfirm
                          placement="right"
                          title="آیا می خواهید حذف کنید؟"
                          ok-text="بله"
                          cancel-text="خیر"
                          @confirm="removeEdu(item)"
                      >
                        <a-button type="danger" class="mr-3">حذف</a-button>
                      </a-popconfirm>

                      <a-button class="mr-3" @click="openModalEduModeEDit(item)">
                        مشاهده و ویرایش
                      </a-button>

                    </div>

                  </a-list-item>
                </a-list>

                <a-button type="dashed" icon="plus" @click="openModalEdu">
                  افزودن سابقه تحصیلی
                </a-button>

              </a-card>
              <br/>
              <a-card title="سوابق آموزشی" :bordered="true">

                <a-list class="mb-5" v-if="educational.length > 0"
                        :locale="{emptyText:'اطلاعاتی برای نمایش وجود ندارد.'}" bordered item-layout="horizontal">
                  <a-list-item class="grid grid-cols-3" v-for="(item,index) in educational" :key="index">
                    <div>
                      <div style="direction: rtl"> مرکز برگزار کننده : {{ item.university }}</div>
                      <div style="direction: rtl">عنوان دوره : {{ item.major }}</div>
                    </div>

                    <div>
                      <div style="direction: rtl">سال : {{ item.start }}</div>
                      <div style="direction: rtl">
                        امکان ارائه گواهینامه دارم:
                        <feather-icon icon="CheckIcon" v-if="item.has_certificate" svgClasses="w-5 h-5 text-success"/>
                        <feather-icon icon="XIcon" v-else svgClasses="w-5 h-5 text-danger"/>
                      </div>
                    </div>

                    <div>
                      <a-popconfirm
                          placement="right"
                          title="آیا می خواهید حذف کنید؟"
                          ok-text="بله"
                          cancel-text="خیر"
                          @confirm="removeEducational(item)"
                      >
                        <a-button type="danger" class="mr-3">حذف</a-button>
                      </a-popconfirm>

                      <a-button class="mr-3" @click="openModalEducationalEDit(item)">
                        مشاهده و ویرایش
                      </a-button>

                    </div>

                  </a-list-item>
                </a-list>

                <a-button type="dashed" icon="plus" @click="openModalEducational">
                  افزودن سابقه آموزشی
                </a-button>

              </a-card>
              <br/>
              <a-card title="سوابق کاری" :bordered="true">

                <a-list class="mb-5" v-if="work.length > 0" :locale="{emptyText:'اطلاعاتی برای نمایش وجود ندارد.'}"
                        bordered item-layout="horizontal">
                  <a-list-item class="grid grid-cols-4" v-for="(item,index) in work" :key="index">
                    <div>
                      <div style="direction: rtl"> نام سازمان : {{ item.university }}</div>
                      <div style="direction: rtl">عنوان شغل : {{ item.major }}</div>
                    </div>

                    <div>
                      <div style="direction: rtl">سال شروع : {{ item.start }}</div>
                      <div style="direction: rtl">سال خاتمه : {{ item.end }}</div>
                    </div>

                    <div>
                      <div style="direction: rtl">دلیل خاتمه : {{ item.note }}</div>
                      <div style="direction: rtl">
                        تاکنون:
                        <feather-icon icon="CheckIcon" v-if="item.end_now" svgClasses="w-5 h-5 text-success"/>
                        <feather-icon icon="XIcon" v-else svgClasses="w-5 h-5 text-danger"/>
                      </div>
                    </div>

                    <div>
                      <a-popconfirm
                          placement="right"
                          title="آیا می خواهید حذف کنید؟"
                          ok-text="بله"
                          cancel-text="خیر"
                          @confirm="removeWork(item)"
                      >
                        <a-button type="danger" class="mr-3">حذف</a-button>
                      </a-popconfirm>

                      <a-button class="mr-3" @click="openModalWorkEDit(item)">
                        مشاهده و ویرایش
                      </a-button>

                    </div>

                  </a-list-item>
                </a-list>

                <a-button type="dashed" icon="plus" @click="openModalWork">
                  افزودن سابقه کاری
                </a-button>

              </a-card>
              <br/>
              <a-card title="سوابق شخصی" :bordered="true">

                <div class="dropbox">
                  <a-upload-dragger
                      :multiple="false"
                      action="http://hr.asco-intl.com:2020/kernel/api/register/upload"
                      :file-list="fileList"
                      :default-file-list="fileList"
                      @change="changeDocumentUpload"
                      :remove="handleRemoveDocument"
                  >
                    <p class="ant-upload-drag-icon">
                      <a-icon type="inbox"/>
                    </p>
                    <p class="ant-upload-text">
                      فایل را درگ کنید یا اینکه کاوش کنید.
                    </p>
                    <p class="ant-upload-hint">
                      فایلی که بارگذاری می کنید باید زیر ۵ مگابایت باشد.
                    </p>
                  </a-upload-dragger>
                </div>

              </a-card>
              <br/>

              <a-form-item>
                <a-checkbox
                    v-decorator="['commitment',{valuePropName: 'checked',initialValue: true,rules: [{ required: true, message: 'نام را وارد نمایید' }]}]">
                  با آگاهی از قوانین و مقررات و صحت اطلاعات تایید میکنم.
                </a-checkbox>
              </a-form-item>

              <a-alert type="warning">
                <div slot="message">
                  <a-button @click="openAccept" class="font-bold" type="link" style="color: #0091ae">
                    مشاهده قوانین و مقررات
                  </a-button>
                </div>
              </a-alert>

            </div>
          </a-form>
          <div v-show="current==2">
               <a-result
                  status="success"
                  title="رزومه با موفقیت دریافت شد و در صورت امکان همکاری، برای مراحل بعدی با شما ارتباط برقرار خواهیم کرد"
                  sub-title="">
                  <template #extra>
                    <a-button type="primary" size="large" @click="clearAll">
                      تایید
                    </a-button>
                  </template>
              </a-result>
            </div>
        </ASpin>
      </div>

      <a-modal :visible="visibleFamily" title="اطلاعات خانوادگی" @ok="createFamily" @cancel="cancelFamily"
               ok-text="ایجاد" cancel-text="انصراف">
        <a-form :form="formFamily">
          <a-form-item label="نام">
            <input class="ant-input" autocomplete="off"
                   v-decorator="['name',{rules: [{ required: true, message: 'نام را وارد نمایید' }]}]"/>
          </a-form-item>
          <a-form-item label="نسبت">
            <input class="ant-input" autocomplete="off"
                   v-decorator="['relation',{rules: [{ required: true, message: 'نسب را وارد نمایید' }]}]"/>
          </a-form-item>
          <a-form-item label="مقطع">
            <a-select
                class="mt-3"
                style="width: 100%;direction: rtl !important;"
                v-decorator="['level',{rules: [{ required: false, message: 'مقطع را وارد نمایید' }]}]"
                @change="changeGrade"
                allowClear
            >
              <a-select-option v-for="item in grade" :value="item.level">
                {{ item.title }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="رشته تحصیلی">
            <input class="ant-input" autocomplete="off"
                   v-decorator="['edu_title',{rules: [{ required: false, message: 'رشته تحصیلی را وارد نمایید' }]}]"/>
          </a-form-item>
          <a-form-item label="شغل">
            <input class="ant-input" autocomplete="off"
                   v-decorator="['job',{rules: [{ required: false, message: 'شغل را وارد نمایید' }]}]"/>
          </a-form-item>
          <!-- <a-form-item label="مقطع">
             <a-select
                 class="mt-3"
                 style="width: 100%;direction: rtl !important;"
                 v-decorator="['level',{rules: [{ required: true, message: 'این فیلد نمیتواند خالی باشد.' }]}]"
                 @change="changeGrade"
                 allowClear
             >
               <a-select-option v-for="item in grade" :value="item.level">
                 {{ item.title }}
               </a-select-option>
             </a-select>
           </a-form-item>
           <a-form-item label="دانشگاه">
             <a-input autocomplete="off" v-decorator="['university',{rules: [{ required: true, message: 'این فیلد نمیتواند خالی باشد.' }]}]"/>
           </a-form-item>
           <a-form-item label="رشته تحصیلی">
             <a-input autocomplete="off" v-decorator="['major',{rules: [{ required: true, message: 'این فیلد نمیتواند خالی باشد.' }]}]"/>
           </a-form-item>
           <a-form-item label="گرایش تحصیلی">
             <a-input autocomplete="off" v-decorator="['orientation',{rules: [{ required: true, message: 'این فیلد نمیتواند خالی باشد.' }]}]"/>
           </a-form-item>

           <div class="md:flex">
             <div class="md:w-1/2">
               <a-form-item label="سال شروع">
                 <a-input-number autocomplete="off" :min="1350" :max="1401" v-decorator="['start',{rules: [{ required: true, message: 'لطفا مقدار سال شروع را به درستی بین 1350 تا 1401 وارد کنید.' }]}]"/>
               </a-form-item>
             </div>
             <div class="md:w-1/2">
               <a-form-item label="سال خاتمه">
                 <a-input-number id="end" ref="end" autocomplete="off" :disabled="is_check" :min="1350" :max="1401" v-decorator="['end',{rules: [{ required: is_check ? false : true, message: 'لطفا مقدار سال خاتمه را به درستی بین 1350 تا 1401 وارد کنید.' }]}]"/>
               </a-form-item>
             </div>
             <div class="md:w-1/3">
               <a-form-item label="تاکنون">
                 <a-checkbox v-decorator="['end_now',{initialValue:false,valuePropName: 'checked'}]" @change="isChecked"/>
               </a-form-item>
             </div>
           </div>-->
        </a-form>
      </a-modal>

      <a-modal :forceRender="true" :visible="visibleEdu" title="افزودن سابقه تحصیلی" @ok="createEdu" @cancel="cancelEdu"
               ok-text="ایجاد" cancel-text="انصراف">
        <a-form :form="formEdu">
          <a-form-item label="مقطع">
            <a-select
                class="mt-3"
                style="width: 100%;direction: rtl !important;"
                v-decorator="['level',{rules: [{ required: true, message: 'مقطع را وارد نمایید ' }]}]"
                @change="changeGrade"
                allowClear
            >
              <a-select-option v-for="item in grade" :value="item.level">
                {{ item.title }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="دانشگاه">
            <input class="ant-input" autocomplete="off"
                   v-decorator="['university',{rules: [{ required: true, message: 'دانشگاه را وارد نمایید' }]}]"/>
          </a-form-item>
          <a-form-item label="رشته تحصیلی">
            <input class="ant-input" autocomplete="off"
                   v-decorator="['major',{rules: [{ required: true, message: 'رشته تحصیلی را وارد نمایید' }]}]"/>
          </a-form-item>
          <a-form-item label="گرایش تحصیلی">
            <input class="ant-input" autocomplete="off"
                   v-decorator="['orientation',{rules: [{ required: false, message: 'گرایش تحصیلی را وارد نمایید' }]}]"/>
          </a-form-item>

          <div class="md:flex">
            <div class="md:w-1/2">
              <a-form-item label="سال شروع">
                <a-input-number autocomplete="off" :min="1350" :max="1401"
                                v-decorator="['start',{rules: [{ required: true, message: 'لطفا مقدار سال شروع را به درستی بین 1350 تا 1401 وارد کنید.' }]}]"/>
                <!--<a-input-number v-decorator="['result_1.score',{initialValue: 0}]" :min="0" :max="20" />-->
              </a-form-item>
            </div>
            <div class="md:w-1/2">
              <a-form-item label="سال خاتمه">
                <a-input-number type="number" class="ant-input-number" id="end" ref="end" autocomplete="off"
                                :disabled="is_check" :min="1350" :max="1401"
                                v-decorator="['end',{rules: [{ required: is_check ? false : true, message: 'لطفا مقدار سال خاتمه را به درستی بین 1350 تا 1401 وارد کنید.' }]}]"/>
              </a-form-item>
            </div>
            <div class="md:w-1/3">
              <a-form-item label="تاکنون">
                <a-checkbox v-decorator="['end_now',{initialValue:false,valuePropName: 'checked'}]"
                            @change="isChecked"/>
              </a-form-item>
            </div>
          </div>

        </a-form>
      </a-modal>


      <a-modal :visible="visibleEducational" title="افزودن سابقه آموزشی" @ok="createEducational"
               @cancel="cancelEducational" ok-text="ایجاد" cancel-text="انصراف">
        <a-form :form="formEducational">

          <a-form-item label="مرکز برگزار کننده">
            <input class="ant-input" autocomplete="off"
                   v-decorator="['university',{rules: [{ required: true, message: 'مرکز برگزار کننده را وارد نمایید' }]}]"/>
          </a-form-item>
          <a-form-item label="عنوان دوره">
            <input class="ant-input" autocomplete="off"
                   v-decorator="['major',{rules: [{ required: true, message: 'عنوان دوره را وارد نمایید' }]}]"/>
          </a-form-item>

          <div class="md:flex">
            <div class="md:w-1/2">
              <a-form-item label="سال">
                <a-input-number autocomplete="off" :min="1350" :max="1401"
                                v-decorator="['start',{rules: [{ required: true, message: 'لطفا مقدار سال شروع را به درستی بین 1350 تا 1401 وارد کنید.' }]}]"/>
              </a-form-item>
            </div>
            <div class="md:w-1/3">
              <a-form-item label="امکان ارائه گواهینامه دارم">
                <a-checkbox v-decorator="['has_certificate',{initialValue:false,valuePropName: 'checked'}]"/>
              </a-form-item>
            </div>
          </div>

        </a-form>
      </a-modal>

      <a-modal :visible="visibleWork" title="افزودن سابقه کاری" @ok="createWork" @cancel="cancelWork" ok-text="ایجاد"
               cancel-text="انصراف">
        <a-form :form="formWork">
          <a-form-item label="نام سازمان">
            <input class="ant-input" autocomplete="off"
                   v-decorator="['university',{rules: [{ required: true, message: 'نام سازمان را وارد نمایید ' }]}]"/>
          </a-form-item>
          <a-form-item label="عنوان شغل">
            <input class="ant-input" autocomplete="off"
                   v-decorator="['major',{rules: [{ required: true, message: 'عنوان شغل را وارد نمایید' }]}]"/>
          </a-form-item>
          <a-form-item label="دلیل خاتمه">
            <input class="ant-input" autocomplete="off"
                   v-decorator="['note',{rules: [{ required:is_work_check ? false : true, message: 'دلیل خاتمه را وارد نمایید' }]}]"/>
          </a-form-item>

          <div class="md:flex">
            <div class="md:w-1/2">
              <a-form-item label="سال شروع">
                <a-input-number autocomplete="off" :min="1350" :max="1401"
                                v-decorator="['start',{rules: [{ required: true, message: 'لطفا مقدار سال شروع را به درستی بین 1350 تا 1401 وارد کنید.' }]}]"/>
              </a-form-item>
            </div>
            <div class="md:w-1/2">
              <a-form-item label="سال خاتمه">
                <a-input-number :disabled="is_work_check" autocomplete="off" :min="1350" :max="1401"
                                v-decorator="['end',{rules: [{ required: is_work_check ? false : true, message: 'لطفا مقدار سال خاتمه را به درستی بین 1350 تا 1401 وارد کنید.' }]}]"/>
              </a-form-item>
            </div>
            <div class="md:w-1/3">
              <a-form-item label="تاکنون">
                <a-checkbox v-decorator="['end_now',{initialValue:false,valuePropName: 'checked'}]"
                            @change="isCheckedWork"/>
              </a-form-item>
            </div>
          </div>

        </a-form>
      </a-modal>

      <a-modal :visible="visibleAccept" title="شرایط و مقررات" @ok="visibleAccept = false"
               @cancel="visibleAccept = false" ok-text="تایید" cancel-text="انصراف">
        اینجانب {{ fullName }} در تاریخ {{ date }} فرم بالا را تکمیل نموده و صحت کلیه اطلاعات تکمیل شده را تأیید می
        نمایم.
      </a-modal>

      <div class="mt-5">
        <a-button v-if="current < 2" type="primary" @click="handleSubmit">
          مرحله بعدی
        </a-button>
      </div>

    </vx-card>
  </div>


</template>

<script>

import axios from '@/axios'
import VuePersianDatetimePicker from 'vue-persian-datetime-picker';

export default {
  name: "Register",
  components: {
    datePicker: VuePersianDatetimePicker
  },
  data() {
    return {
      flags: {
        gender: 1,
        marriage_sts: 1,
      },
      fileList: [],
      file_id: undefined,
      current: 0,
      from: this.$form.createForm(this, {name: 'coordinated'}),
      formEdu: this.$form.createForm(this, {name: 'coordinated'}),
      formFamily: this.$form.createForm(this, {name: 'coordinated'}),
      formEducational: this.$form.createForm(this, {name: 'coordinated'}),
      formWork: this.$form.createForm(this, {name: 'coordinated'}),
      formFirst: this.$form.createForm(this, {name: 'coordinated'}),
      city: [],
      job: [],
      edu: [],
      family: [],
      work: [],
      jobsList: [{jobs: []}],
      //jobs:[{city:null,job:null}],
      //model:[],
      educational: [],
      birth_day: '',
      has_instructor: '-1',
      visibleEdu: false,
      visibleFamily: false,
      visibleEducational: false,
      visibleWork: false,
      visibleAccept: false,
      is_check: false,
      is_work_check: false,
      find_grade: null,
      grade: [
        {level: 1, title: 'کاردانی'},
        {level: 2, title: 'کارشناسی'},
        {level: 3, title: 'کارشناسی ارشد'},
        {level: 4, title: 'دکتری'}
      ],
      alphabet: ['الف', 'ب', 'پ', 'ت', 'ث', 'ج', 'چ', 'ح', 'خ', 'د', 'ذ', 'ر', 'ز', 'ژ', 'س', 'ش', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ', 'ف', 'ق', 'ک', 'گ', 'ل', 'م', 'ن', 'و', 'ه', 'ی'],
      loading: false,
      editMode: false,
      id: 0,
      tempRow: {},
      fullName: '',
      date: null
    }
  },
  methods: {
    clearAll(){
      this.from.resetFields()
      this.formEdu.resetFields()
      this.formFamily.resetFields()
      this.formEducational.resetFields()
      this.formWork.resetFields()
      this.formFirst.resetFields()
      this.current = 0
    },
    setMarriage_sts(event) {
      this.flags.marriage_sts = event.target.value
    },
    setGender(event) {
      this.flags.gender = event.target.value
    },
    changeDocumentUpload({fileList, event, file}) {
      if (file.response && file.response.id) {
        this.file_id = file.response.id;
      }
      this.fileList = fileList;
    },
    handleRemoveDocument() {
      this.file_id = null
    },

    deleteCity(index) {
      this.jobsList.splice(index, 1);
      //console.log(index);
    },
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    /* Agrement(rule, value, callback){

     },*/
    addCity() {
      this.jobsList.push({jobs: []});
    },
    number_insurance(e) {
      this.has_instructor = e.target.value
    },
    handleSubmit(e) {
      e.preventDefault();
      if (this.current == 0) {
        this.formFirst.validateFields(async (err, values) => {
          if (!err) {
            this.current++;

            // console.log(values,'first')
          } else {
            this.$ntGetError('اطلاعات را به صورت کامل وارد کنید');
          }
        });
      } else {
        this.from.validateFields(async (err, values) => {
          if (!err) {

            try {
              this.loading = true
              console.log(values, 'values')
              values.model = this.formFirst.getFieldsValue();
              values.birth_date = this.birth_day;
              values.work = this.work;
              values.file_id = this.file_id;
              values.training = this.educational;
              values.academic = this.edu;
              values.family = this.family;
              await axios.post('register/save', values)
              this.$ntSet();
              // this.from.resetFields()
              this.current++
            } catch (e) {
              this.$ntSetError()
              throw e
            } finally {
              this.loading = false
            }

          } else {
            this.$ntGetError('اطلاعات را به صورت کامل وارد کنید');
          }
        });
      }

    },
    getCity() {
      try {
        //const {data} = await axios.get('/register/cities')
        axios.get('/register/cities').then((res) => {
          this.city = res.data;
        }).catch((error) => {
          this.$ntSetError()
        });
      } catch (e) {
        this.$ntSetError()
      }
    },
    getDate() {
      try {
        //const {data} = await axios.get('/register/date')
        axios.get('/register/date').then((res) => {
          this.date = res.data;
        }).catch((error) => {
          this.$ntSetError()
        });
        ;

      } catch (e) {
        this.$ntSetError()
      }
    },
    getJob(index) {
      if (index != undefined) {
        try {
          this.formFirst.resetFields(`jobs[${index}].job`);
          axios.post('/register/jobs', {city: "" + this.formFirst.getFieldValue(`jobs[${index}].city`) + ""}).then((res) => {
            //this.formFirst.setFieldsValue(`jobs[${index}].city`)
            this.jobsList[index].jobs = res.data;
            console.log(this.jobsList[index].jobs);
            //console.log(this.jobsList[0].map((item)=> item.title))
          });
          //this.job = data
        } catch (e) {
          this.$ntSetError()
        }
      }
    },
    openModalEdu() {
      this.visibleEdu = true
      this.editMode = false
      this.formEdu.resetFields()
    },
    openModalFamily() {
      this.visibleFamily = true
      this.editMode = false
      this.formFamily.resetFields();
    },
    openModalEducational() {
      this.visibleEducational = true
      this.editMode = false
      this.formEducational.resetFields()
    },
    openModalWork() {
      this.visibleWork = true
      this.editMode = false
      this.formWork.resetFields()
    },
    openModalFamilyModeEDit(item) {
      //console.log(item,'item')
      this.visibleFamily = true
      this.editMode = true
      this.tempRow = item
      this.formFamily.setFieldsValue(item)
    },
    openModalEduModeEDit(item) {
      console.log(item, 'item')
      this.visibleEdu = true
      this.editMode = true
      this.tempRow = item
      this.formEdu.setFieldsValue(item)
    },
    openModalEducationalEDit(item) {
      this.visibleEducational = true
      this.editMode = true
      this.tempRow = item
      this.formEducational.setFieldsValue(item)
    },
    openModalWorkEDit(item) {
      this.visibleWork = true
      this.editMode = true
      this.tempRow = item
      this.formWork.setFieldsValue(item)
    },
    cancelEdu() {
      this.visibleEdu = false
    },
    cancelFamily() {
      this.visibleFamily = false
    },
    cancelEducational() {
      this.visibleEducational = false
    },
    cancelWork() {
      this.visibleWork = false
    },
    createFamily(e) {
      e.preventDefault();
      this.formFamily.validateFields(async (err, values) => {
        if (!err) {
          try {
            if (this.find_grade) {
              values.edu = this.find_grade;
              values.edu_level = this.find_grade.level;
            }

            if (this.editMode) {
              const find = this.family.findIndex(item => item.id == this.tempRow.id)
              Object.assign(this.family[find], values);
              this.visibleFamily = false;
            } else {
              values.id = this.id
              this.family.push(values)
              this.id += 1
              this.formFamily.resetFields()
              this.visibleFamily = false
            }
          } catch (e) {
            this.$ntSetError()
            throw e
          } finally {

          }
        } else {
          this.$ntGetError('اطلاعات را به صورت کامل وارد کنید');
        }
      });
    },
    createEdu(e) {
      e.preventDefault();
      this.formEdu.validateFields(async (err, values) => {
        if (!err) {
          try {
            if (this.find_grade) values.grade = this.find_grade
            if (this.editMode) {
              const find = this.edu.findIndex(item => item.id == this.tempRow.id)
              Object.assign(this.edu[find], values);
              this.visibleEdu = false
            } else {
              values.id = this.id
              this.edu.push(values)
              this.id += 1
              this.formEdu.resetFields()
              this.visibleEdu = false
            }

          } catch (e) {
            this.$ntSetError()
            throw e
          } finally {

          }

        } else {
          this.$ntGetError('اطلاعات را به صورت کامل وارد کنید');
        }
      });
    },
    createEducational(e) {
      e.preventDefault();
      this.formEducational.validateFields(async (err, values) => {
        if (!err) {
          try {
            if (this.editMode) {
              const find = this.educational.findIndex(item => item.id == this.tempRow.id)
              Object.assign(this.educational[find], values);
              this.visibleEducational = false
            } else {
              values.id = this.id
              this.educational.push(values)
              this.id += 1
              console.log(values, 'values')
              this.formEducational.resetFields()
              this.visibleEducational = false
            }
          } catch (e) {
            this.$ntSetError()
            throw e
          } finally {

          }

        } else {
          this.$ntGetError('اطلاعات را به صورت کامل وارد کنید');
        }
      });
    },
    createWork(e) {
      e.preventDefault();
      this.formWork.validateFields(async (err, values) => {
        if (!err) {
          try {
            if (this.editMode) {
              const find = this.work.findIndex(item => item.id == this.tempRow.id)
              Object.assign(this.work[find], values);
            } else {
              values.id = this.id
              this.work.push(values)
              this.id += 1
              console.log(values, 'values')
              this.formWork.resetFields()
            }
            this.visibleWork = false
          } catch (e) {
            this.$ntSetError()
            throw e
          }

        } else {
          this.$ntGetError('اطلاعات را به صورت کامل وارد کنید');
        }
      });
    },
    isCheckedWork(e) {
      this.is_work_check = e.target.checked
      if (this.is_work_check) this.formWork.resetFields('end')
    },
    removeFamily(item) {
      console.log(item);
      const index = this.family.indexOf(item)
      this.family.splice(index, 1)
    },
    removeEdu(item) {
      const index = this.edu.indexOf(item)
      this.edu.splice(index, 1)
    },
    removeEducational(item) {
      const index = this.educational.indexOf(item)
      this.educational.splice(index, 1)
    },
    removeWork(item) {
      const index = this.work.indexOf(item)
      this.work.splice(index, 1)
    },
    changeGrade(id) {
      console.log(id, 'id')
      this.find_grade = this.grade.find(item => item.level == id)
    },
    isChecked(e) {
      this.is_check = e.target.checked
      if (this.is_check) this.formEdu.resetFields('end')
    },
    openAccept() {
      this.visibleAccept = true;
      this.fullName = this.from.getFieldValue('name');
      this.getDate()
    },
    LoginUser() {
      this.$router.push('/auth/login')
    },
    next() {
      this.current++;
    },
    prev() {
      this.current--;
    }
  },
  computed: {},
  created() {
    this.getCity()
    this.getJob()
  },
  mounted() {

  }
}
</script>

<style>
[dir=rtl] .anticon.anticon-plus {
  position: relative;
  top: 4px;
  left: 5px;
}

.ant-modal-title {
  margin-right: 1rem;
}

.ant-steps-item-title::after {
  /*left: unset !important;*/
  right: 100% !important;
}

/*.ant-select-arrow
{
  left: 11px !important;
}*/

</style>