asan-service/components/agents/EnrollRepresentationForm.vue

<template>
  <div>
    <div class="representation-form" :class="!data && 'panel'">
      <template v-if="!data">
        <h1>فرم درخواست نمایندگی خدمات پس از فروش</h1>
        <div class="notic">
          <p>
            تکمیل این فرم صرفاً جهت درخواست اخذ نمایدگی خدمات پس از فروش از شرکت آسان سرویس بوده و ارسال آن تعهدی برای
            اعطای نمایندگی محسوب نشده و فقط در صورت نیاز شرکت با متقاضیان محترم تماس گرفته میشود.
          </p>
        </div>
      </template>

      <!-- representation type -->
      <div class="box">
        <div class="box-title">
          <p>انتخاب نوع نمایندگی</p>
        </div>
        <form class="form form_4">
          <div class="formRow selectable full" :class="validation.representation_type && 'err'">
            <span>نمایندگی:</span>
            <div class="options">
              <label for="representation_type2">
                <span>لوازم جانبی کامپیوتر و موبایل</span>
                <input id="representation_type2" v-model="formData.representation_type" type="radio" value="verity" />
              </label>
              <label for="representation_type1">
                <span>لوازم صوتی و تصویری خودرو</span>
                <input id="representation_type1" v-model="formData.representation_type" type="radio" value="panatech" />
              </label>
              <label for="representation_type3">
                <span>هر دو گزینه</span>
                <input id="representation_type3" v-model="formData.representation_type" type="radio" value="both" />
              </label>
            </div>
            <p v-if="validation.representation_type">{{ validation.representation_type.msg }}</p>
          </div>
        </form>
      </div>

      <!-- personal info -->
      <div class="box">
        <div class="box-title">
          <p>مشخصات فردی متقاضی</p>
        </div>
        <form class="form form_4">
          <div class="formRow" :class="validation.full_name && 'err'">
            <label for="fullName">
              <span>نام و نام خانوادگی:</span>
              <input
                id="fullName"
                type="text"
                name="fullName"
                disabled
                :title="disabledFieldTitle"
                :value="isAdmin ? formData.full_name : userFullName"
              />
            </label>
            <p v-if="validation.full_name">{{ validation.full_name.msg }}</p>
          </div>
          <div class="formRow" :class="validation.national_code && 'err'">
            <label for="national_code">
              <span>کد ملی:</span>
              <input
                id="national_code"
                type="text"
                name="national_code"
                disabled
                :title="disabledFieldTitle"
                :value="isAdmin ? formData.national_code : user.national_code"
              />
            </label>
            <p v-if="validation.national_code">{{ validation.national_code.msg }}</p>
          </div>
          <div class="formRow" :class="validation.id_number && 'err'">
            <label for="id_number">
              <span>شماره شناسنامه:</span>
              <input
                id="id_number"
                v-model="formData.id_number"
                type="text"
                name="id_number"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.id_number">{{ validation.id_number.msg }}</p>
          </div>
          <div class="formRow" :class="validation.place_of_issue && 'err'">
            <label for="place_of_issue">
              <span>محل صدور:</span>
              <input
                id="place_of_issue"
                v-model="formData.place_of_issue"
                type="text"
                name="place_of_issue"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.place_of_issue">{{ validation.place_of_issue.msg }}</p>
          </div>
          <div class="formRow" :class="validation.birth_date && 'err'">
            <label for="birth_date">
              <span>تاریخ تولد:</span>
              <input
                id="birth_date"
                v-model="formData.birth_date"
                type="text"
                name="birth_date"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.birth_date">{{ validation.birth_date.msg }}</p>
          </div>
          <div class="formRow" :class="validation.fathers_name && 'err'">
            <label for="fathers_name">
              <span>نام پدر:</span>
              <input
                id="fathers_name"
                v-model="formData.fathers_name"
                type="text"
                name="fathers_name"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.fathers_name">{{ validation.fathers_name.msg }}</p>
          </div>
          <div class="formRow" :class="validation.education_level && 'err'">
            <label for="education_level">
              <span>میزان تحصیلات:</span>
              <input
                id="education_level"
                v-model="formData.education_level"
                type="text"
                name="education_level"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.education_level">{{ validation.education_level.msg }}</p>
          </div>
          <div class="formRow" :class="validation.military_status && 'err'">
            <label for="military_status">
              <span>وضعیت نظام وظیفه:</span>
              <input
                id="military_status"
                v-model="formData.military_status"
                type="text"
                name="military_status"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.military_status">{{ validation.military_status.msg }}</p>
          </div>
          <div class="formRow full textarea" :class="validation.certificates && 'err'">
            <label for="certificates">
              <span>گواهینامه های تخصصی اخذ شده:</span>
              <textarea
                id="certificates"
                v-model="formData.certificates"
                rows="10"
                :placeholder="globalPlaceholder"
              ></textarea>
            </label>
            <p v-if="validation.certificates">{{ validation.certificates.msg }}</p>
          </div>
        </form>
      </div>

      <!-- contact info -->
      <div class="box">
        <div class="box-title">
          <p>اطلاعات تماس</p>
        </div>
        <form class="form form_4">
          <div class="formRow" :class="validation.province_name && 'err'">
            <label for="province_name">
              <span>استان:</span>
              <input
                id="province_name"
                type="text"
                name="province_name"
                disabled
                :title="disabledFieldTitle"
                :value="isAdmin ? formData.province_name : user.province_name"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.province_name">{{ validation.province_name.msg }}</p>
          </div>
          <div class="formRow" :class="validation.city_name && 'err'">
            <label for="city_name">
              <span>شهرستان:</span>
              <input
                id="city_name"
                type="text"
                name="city_name"
                disabled
                :title="disabledFieldTitle"
                :value="isAdmin ? formData.city_name : user.city_name"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.city_name">{{ validation.city_name.msg }}</p>
          </div>
          <div class="formRow" :class="validation.store_name && 'err'">
            <label for="store_name">
              <span>نام شرکت/تعمیرگاه:</span>
              <input
                id="store_name"
                v-model="formData.store_name"
                type="text"
                name="store_name"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.store_name">{{ validation.store_name.msg }}</p>
          </div>
          <div class="formRow" :class="validation.postal_code && 'err'">
            <label for="postal_code">
              <span>کد پستی:</span>
              <input
                id="postal_code"
                v-model="formData.postal_code"
                type="text"
                name="postal_code"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.postal_code">{{ validation.postal_code.msg }}</p>
          </div>
          <div class="formRow" :class="validation.mobile_number && 'err'">
            <label for="mobile_number">
              <span>تلفن همراه:</span>
              <input
                id="mobile_number"
                v-model=" formData.mobile_number "
                type="text"
                name="mobile_number"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.mobile_number">{{ validation.mobile_number.msg }}</p>
          </div>
          <div class="formRow" :class="validation.tel_number && 'err'">
            <label for="tel_number">
              <span>تلفن شرکت/تعمیرگاه:</span>
              <input
                id="tel_number"
                v-model="formData.tel_number"
                type="text"
                name="tel_number"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.tel_number">{{ validation.tel_number.msg }}</p>
          </div>
          <div class="formRow" :class="validation.fax_number && 'err'">
            <label for="fax_number">
              <span>فکس شرکت/تعمیرگاه:</span>
              <input
                id="fax_number"
                v-model="formData.fax_number"
                type="text"
                name="fax_number"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.fax_number">{{ validation.fax_number.msg }}</p>
          </div>
          <div class="formRow" :class="validation.economic_code && 'err'">
            <label for="economic_code">
              <span>کد اقتصادی (در صورت وجود):</span>
              <input
                id="economic_code"
                v-model="formData.economic_code"
                type="text"
                name="economic_code"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.economic_code">{{ validation.economic_code.msg }}</p>
          </div>
          <div class="formRow full" :class="validation.email && 'err'">
            <label for="email">
              <span>ایمیل:</span>
              <input
                id="email"
                v-model="formData.email"
                type="email"
                name="email"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.email">{{ validation.email.msg }}</p>
          </div>
          <div class="formRow full textarea" :class="validation.address && 'err'">
            <label for="address">
              <span>آدرس:</span>
              <textarea
                id="address"
                v-model="formData.address"
                rows="10"
                placeholder="آدرس را بدون ذکر استان و شهر و به صورت دقیق بنویسید، مرسوله های ارسالی به این آدرس پست خواهند شد."
              ></textarea>
            </label>
            <p v-if="validation.address">{{ validation.address.msg }}</p>
          </div>
        </form>
      </div>

      <!-- location info -->
      <div class="box">
        <div class="box-title">
          <p>مشخصات مکان نماینده</p>
        </div>
        <form class="form form_4">
          <div class="formRow selectable" :class="validation.business_license && 'err'">
            <span>جواز کسب:</span>
            <div class="options">
              <label for="have_business_license">
                <span>دارم</span>
                <input id="have_business_license" v-model="formData.business_license" type="radio" :value="true" />
              </label>
              <label for="not_hav_business_license">
                <span>ندارم</span>
                <input id="not_hav_business_license" v-model="formData.business_license" type="radio" :value="false" />
              </label>
            </div>
            <p v-if="validation.business_license">{{ validation.business_license.msg }}</p>
          </div>

          <div class="formRow selectable" :class="validation.ownership_type && 'err'">
            <span>نوع مالکیت:</span>
            <div class="options">
              <label for="ownership_type1">
                <span>مالک</span>
                <input id="ownership_type1" v-model="formData.ownership_type" type="radio" value="owner" />
              </label>

              <label for="ownership_type2">
                <span>استیجاری</span>
                <input id="ownership_type2" v-model="formData.ownership_type" type="radio" value="rent" />
              </label>

              <label for="ownership_type3">
                <span>سرقفلی</span>
                <input id="ownership_type3" v-model="formData.ownership_type" type="radio" value="rghit_of_business" />
              </label>
            </div>
            <p v-if="validation.ownership_type">{{ validation.ownership_type.msg }}</p>
          </div>

          <div class="formRow" :class="validation.total_area && 'err'">
            <label for="total_area">
              <span>متراژ کل (متر):</span>
              <input
                id="total_area"
                v-model="formData.total_area"
                type="text"
                name="total_area"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.total_area">{{ validation.total_area.msg }}</p>
          </div>
          <div class="formRow" :class="validation.repair_area && 'err'">
            <label for="repair_area">
              <span>متراژ محل تعمیرات (متر):</span>
              <input
                id="repair_area"
                v-model="formData.repair_area"
                type="text"
                name="repair_area"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.repair_area">{{ validation.repair_area.msg }}</p>
          </div>
          <div class="formRow" :class="validation.stock_area && 'err'">
            <label for="stock_area">
              <span>متراژ انبار (متر):</span>
              <input
                id="stock_area"
                v-model="formData.stock_area"
                type="text"
                name="stock_area"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.stock_area">{{ validation.stock_area.msg }}</p>
          </div>
          <div class="formRow" :class="validation.customer_reference_floor && 'err'">
            <label for="customer_reference_floor">
              <span>طبقه محل مراجعه مشتریان:</span>
              <input
                id="customer_reference_floor"
                v-model="formData.customer_reference_floor"
                type="text"
                name="customer_reference_floor"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.customer_reference_floor">{{ validation.customer_reference_floor.msg }}</p>
          </div>

          <div class="formRow selectable full" :class="validation.place_location && 'err'">
            <span>موقعیت مکانی:</span>
            <div class="options">
              <label for="place_location1">
                <span>مرکز صنف موبایل و کامپیوتر</span>
                <input id="place_location1" v-model="formData.place_location" type="radio" value="tech_passage" />
              </label>
              <label for="place_location2">
                <span>سایر</span>
                <input id="place_location2" v-model="formData.place_location" type="radio" value="other" />
              </label>
            </div>
            <p v-if="validation.place_location">{{ validation.place_location.msg }}</p>
          </div>

          <div class="formRow selectable full" :class="validation.geo_location && 'err'">
            <span>موقعیت جغرافیایی:</span>
            <div class="options">
              <label for="geo_location1">
                <span>خیابان اصلی</span>
                <input id="geo_location1" v-model="formData.geo_location" type="radio" value="main_street" />
              </label>
              <label for="geo_location2">
                <span>خیابان فرعی</span>
                <input id="geo_location2" v-model="formData.geo_location" type="radio" value="side_street" />
              </label>
              <label for="geo_location3">
                <span>کوچه</span>
                <input id="geo_location3" v-model="formData.geo_location" type="radio" value="alley" />
              </label>
              <label for="geo_location4">
                <span>داخل پاساژ</span>
                <input id="geo_location4" v-model="formData.geo_location" type="radio" value="inside_passage" />
              </label>
              <label for="geo_location5">
                <span>بر پاساژ</span>
                <input id="geo_location5" v-model="formData.geo_location" type="radio" value="outside_passage" />
              </label>
            </div>
            <p v-if="validation.geo_location">{{ validation.geo_location.msg }}</p>
          </div>

          <div class="formRow full" :class="validation.banner_info && 'err'">
            <label for="banner_info">
              <span>تعداد و ابعاد تابلو:</span>
              <input
                id="banner_info"
                v-model="formData.banner_info"
                type="text"
                name="banner_info"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.banner_info">{{ validation.banner_info.msg }}</p>
          </div>
        </form>

        <form class="form form_4">
          <div class="formRow" :class="validation.repair_technicians && 'err'">
            <label for="repair_technicians">
              <span>تعداد تکنسین های تعمیرگاه:</span>
              <input
                id="repair_technicians"
                v-model="formData.repair_technicians"
                type="text"
                name="repair_technicians"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.repair_technicians">{{ validation.repair_technicians.msg }}</p>
          </div>
          <div class="formRow" :class="validation.repair_masters && 'err'">
            <label for="repair_masters">
              <span>تعداد استادکار تعمیرگاه:</span>
              <input
                id="repair_masters"
                v-model="formData.repair_masters"
                type="text"
                name="repair_masters"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.repair_masters">{{ validation.repair_masters.msg }}</p>
          </div>
          <div class="formRow" :class="validation.office_workers && 'err'">
            <label for="office_workers">
              <span>تعداد کارکنان اداری:</span>
              <input
                id="office_workers"
                v-model="formData.office_workers"
                type="text"
                name="office_workers"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.office_workers">{{ validation.office_workers.msg }}</p>
          </div>
          <div class="formRow" :class="validation.bike_deliveries && 'err'">
            <label for="bike_deliveries">
              <span>تعداد پیک موتوری:</span>
              <input
                id="bike_deliveries"
                v-model="formData.bike_deliveries"
                type="text"
                name="bike_deliveries"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.bike_deliveries">{{ validation.bike_deliveries.msg }}</p>
          </div>
        </form>
      </div>

      <!-- experience info -->
      <div class="box">
        <div class="box-title">
          <p>سابقه فعالیت</p>
        </div>
        <form class="form form_4">
          <div class="formRow full" :class="validation.computer_repair_exp && 'err'">
            <label for="computer_repair_exp">
              <span>سابقه فعالیت در تعمیر ابزار جانبی موبایل و کامپیوتر (سال):</span>
              <input
                id="computer_repair_exp"
                v-model="formData.computer_repair_exp"
                type="text"
                name="computer_repair_exp"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.computer_repair_exp">{{ validation.computer_repair_exp.msg }}</p>
          </div>
          <div class="formRow full" :class="validation.multimedia_repair_exp && 'err'">
            <label for="multimedia_repair_exp">
              <span>سابقه فعالیت در تعمیر لوزام صوتی و تصویری (سال):</span>
              <input
                id="multimedia_repair_exp"
                v-model="formData.multimedia_repair_exp"
                type="text"
                name="multimedia_repair_exp"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.multimedia_repair_exp">{{ validation.multimedia_repair_exp.msg }}</p>
          </div>
          <div class="formRow full" :class="validation.business_exp && 'err'">
            <label for="business_exp">
              <span>سابقه در محل کسب (سال):</span>
              <input
                id="business_exp"
                v-model="formData.business_exp"
                type="text"
                name="business_exp"
                :placeholder="globalPlaceholder"
                autocomplete="false"
              />
            </label>
            <p v-if="validation.business_exp">{{ validation.business_exp.msg }}</p>
          </div>
        </form>
      </div>

      <!-- common questions -->
      <div class="box">
        <div class="box-title">
          <p>آشنایی با آسان سرویس</p>
        </div>
        <form class="form form_4">
          <div class="formRow selectable full" :class="validation.know_asanServ_from && 'err'">
            <span>نحوه آشنایی با شرکت:</span>
            <div class="options">
              <label for="know_asanServ_from1">
                <span>نماینده فروش</span>
                <input
                  id="know_asanServ_from1"
                  v-model="formData.know_asanServ_from"
                  type="radio"
                  value="company_agents"
                />
              </label>

              <label for="know_asanServ_from2">
                <span>وب سایت</span>
                <input id="know_asanServ_from2" v-model="formData.know_asanServ_from" type="radio" value="website" />
              </label>
              <label for="know_asanServ_from3">
                <span>پرسنل سازمان</span>
                <input
                  id="know_asanServ_from3"
                  v-model="formData.know_asanServ_from"
                  type="radio"
                  value="company_workers"
                />
              </label>
              <label for="know_asanServ_from4">
                <span>نمایشگاه</span>
                <input id="know_asanServ_from4" v-model="formData.know_asanServ_from" type="radio" value="exhibition" />
              </label>
              <label for="know_asanServ_from5">
                <span>معرفی</span>
                <input id="know_asanServ_from5" v-model="formData.know_asanServ_from" type="radio" value="introduced" />
              </label>
              <label for="know_asanServ_from6">
                <span>سایر</span>
                <input id="know_asanServ_from6" v-model="formData.know_asanServ_from" type="radio" value="other" />
              </label>
            </div>
            <p v-if="validation.know_asanServ_from">{{ validation.know_asanServ_from.msg }}</p>
          </div>

          <div class="formRow full textarea" :class="validation.introducer_info && 'err'">
            <label for="introducer_info">
              <span>در صورتیکه معرف دارید مشخصات ایشان را ذکر کنید:</span>
              <textarea
                id="introducer_info"
                v-model="formData.introducer_info"
                rows="10"
                :placeholder="globalPlaceholder"
              ></textarea>
            </label>
            <p v-if="validation.introducer_info">{{ validation.introducer_info.msg }}</p>
          </div>
          <div class="formRow selectable full" :class="validation.asanServ_products_knowledge && 'err'">
            <span>میزان آشنایی با محصولات آسان سرویس:</span>
            <div class="options">
              <label for="asanServ_products_knowledge1">
                <span>زیاد</span>
                <input
                  id="asanServ_products_knowledge1"
                  v-model="formData.asanServ_products_knowledge"
                  type="radio"
                  :value="4"
                />
              </label>

              <label for="asanServ_products_knowledge2">
                <span>نسبتاً خوب</span>
                <input
                  id="asanServ_products_knowledge2"
                  v-model="formData.asanServ_products_knowledge"
                  type="radio"
                  :value="3"
                />
              </label>
              <label for="asanServ_products_knowledge3">
                <span>متوسط</span>
                <input
                  id="asanServ_products_knowledge3"
                  v-model="formData.asanServ_products_knowledge"
                  type="radio"
                  :value="2"
                />
              </label>
              <label for="asanServ_products_knowledge4">
                <span>کم</span>
                <input
                  id="asanServ_products_knowledge4"
                  v-model="formData.asanServ_products_knowledge"
                  type="radio"
                  :value="1"
                />
              </label>
              <label for="asanServ_products_knowledge5">
                <span>خیلی کم</span>
                <input
                  id="asanServ_products_knowledge5"
                  v-model="formData.asanServ_products_knowledge"
                  type="radio"
                  :value="0"
                />
              </label>
            </div>
            <p v-if="validation.asanServ_products_knowledge">
              {{ validation.asanServ_products_knowledge.msg }}
            </p>
          </div>
          <div class="formRow selectable full" :class="validation.computer_saling_exp && 'err'">
            <span>آیا در زمینه فروش لوازم جانبی موبایل و کامپیوتر فعالیت دارید؟</span>
            <div class="options">
              <label for="have_computer_saling_exp">
                <span>بله</span>
                <input
                  id="have_computer_saling_exp"
                  v-model="formData.computer_saling_exp"
                  type="radio"
                  :value="true"
                />
              </label>

              <label for="not_have_computer_saling_exp">
                <span>خیر</span>
                <input
                  id="not_have_computer_saling_exp"
                  v-model="formData.computer_saling_exp"
                  type="radio"
                  :value="false"
                />
              </label>
            </div>
            <p v-if="validation.computer_saling_exp">{{ validation.computer_saling_exp.msg }}</p>
          </div>
          <div class="formRow full textarea" :class="validation.computer_saling_description && 'err'">
            <label for="computer_saling_description">
              <span>در صورت فعالیت فروش، نام شرکت و نوع محصول را نام ببرید:</span>
              <textarea
                id="computer_saling_description"
                v-model="formData.computer_saling_description"
                rows="10"
                :placeholder="globalPlaceholder"
              ></textarea>
            </label>
          </div>
          <p v-if="validation.computer_saling_description">{{ validation.computer_saling_description.msg }}</p>
        </form>
      </div>

      <!-- other representation data -->
      <h3 class="notic2">
        <span>در صورتی که نمایندگی خدمات یا نمایندگی تعمیرات نشان تجاری دیگری را هم دارید جدول زیر را تکمیل کنید.</span>
      </h3>
      <div class="box">
        <table>
          <thead>
            <tr>
              <th>ردیف</th>
              <th>نشان تجاری</th>
              <th>نام شرکت</th>
              <th>سابقه همکاری (سال)</th>
              <th>سال شروع همکاری</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in formData.other_representations" :key="'_rePre' + index">
              <td>{{ index + 1 }}</td>
              <td>{{ item.trademark }}</td>
              <td>{{ item.company_name }}</td>
              <td>{{ item.cooperation_history }}</td>
              <td>
                {{ item.cooperation_start_year }}
                <i class="fas fa-trash-alt" @click="removeOtherRepItem(index)"></i>
              </td>
            </tr>
            <tr>
              <td class="add-btn" colspan="5">
                <button @click="showRepresentationsModal = true">افزودن مورد جدید +</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <h3 class="notic2">
        <span>درصورتی که توضیحات بیشتری دارید میتوانید در باکس زیر بنویسید.</span>
      </h3>

      <div class="box">
        <div class="box-title">
          <p>سایر توضیحات</p>
        </div>
        <form class="form form_4">
          <div class="formRow full textarea" :class="validation.more_descriptions && 'err'">
            <label for="more_descriptions">
              <span>توضیحات:</span>
              <textarea
                id="more_descriptions"
                v-model="formData.more_descriptions"
                rows="10"
                :placeholder="globalPlaceholder"
              ></textarea>
            </label>
            <p v-if="validation.more_descriptions">{{ validation.more_descriptions.msg }}</p>
          </div>
        </form>
      </div>

      <div class="post-form">
        <el-button v-if="!data" class="btn btn-primary custom-el-button" :loading="waiting" @click="send">
          مرحله بعد
        </el-button>
        <el-button v-else class="btn btn-primary custom-el-button" :loading="waiting" @click="update">
          بروزرسانی
        </el-button>
      </div>
    </div>

    <!----------------------- modal ----------------------->
    <el-dialog
      title="افزودن اطلاعات نمایندگی"
      :visible.sync="showRepresentationsModal"
      width="30%"
      :before-close="closeRepresentationModal"
      append-to-body
    >
      <form class="form form_3">
        <div class="formRow">
          <label for="">نشان تجاری</label>
          <input v-model="newRepresentationData.trademark" type="text" />
        </div>
        <div class="formRow">
          <label for="">نام شرکت</label>
          <input v-model="newRepresentationData.company_name" type="text" />
        </div>
        <div class="formRow">
          <label for="">سابقه همکاری (سال)</label>
          <input v-model="newRepresentationData.cooperation_history" type="text" />
        </div>
        <div class="formRow">
          <label for="">سال شروع همکاری</label>
          <input v-model="newRepresentationData.cooperation_start_year" type="text" />
        </div>
      </form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showRepresentationsModal = false">لغو</el-button>
        <el-button type="primary" @click="addToRepresentations">افزودن</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'EnrollRepresentationForm',
  props: {
    data: {
      type: Object,
      required: false,
      default: null
    },
    isAdmin: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      newFormData: this.initForm(),
      showRepresentationsModal: false,
      newRepresentationData: {
        trademark: '',
        company_name: '',
        cooperation_history: '',
        cooperation_start_year: ''
      },
      globalPlaceholder: '. . .',
      disabledFieldTitle: 'نمیتوانید این فیلد را تغییر دهید',
      validation: {},
      waiting: false
    }
  },
  head() {
    return {
      title: 'آسان سرویس | ثبت درخواست نمایندگی'
    }
  },
  computed: {
    formData() {
      return this.data || this.newFormData
    },
    user() {
      return this.$auth.user
    },
    userFullName() {
      return this.user.first_name + ' ' + this.user.last_name
    }
  },
  methods: {
    initForm(){
      const rawForm = {
        representation_type: '',
        // personal info
        // full_name: '',
        birth_date: '',
        id_number: '',
        place_of_issue: '',
        // national_code: '',
        fathers_name: '',
        education_level: '',
        military_status: '',
        certificates: '',

        // contact info
        store_name: '',
        // province_name: '',
        // city_name: '',
        postal_code: '',
        // mobile_number: '',
        tel_number: '',
        fax_number: '',
        economic_code: '',
        email: '',
        address: '',

        // location info
        business_license: '',
        ownership_type: '',
        total_area: '',
        repair_area: '',
        stock_area: '',
        customer_reference_floor: '',
        place_location: '',
        geo_location: '',
        banner_info: '',
        repair_technicians: '',
        repair_masters: '',
        office_workers: '',
        bike_deliveries: '',

        // experience info
        computer_repair_exp: '',
        multimedia_repair_exp: '',
        business_exp: '',

        // common questions
        know_asanServ_from: '',
        introducer_info: '',
        asanServ_products_knowledge: '',
        computer_saling_exp: '',
        computer_saling_description: '',
        other_representations: [],
        more_descriptions: ''
      }
      return rawForm
    },
    removeOtherRepItem(number) {
      this.formData.other_representations = this.formData.other_representations.filter(
        (item, index) => index !== number
      )
    },
    resetNewRepresentationData() {
      this.newRepresentationData = {
        trademark: '',
        company_name: '',
        cooperation_history: '',
        cooperation_start_year: ''
      }
    },
    closeRepresentationModal() {
      this.resetNewRepresentationData()
      this.showRepresentationsModal = false
    },
    addToRepresentations() {
      if (
        this.newRepresentationData.trademark === '' ||
        this.newRepresentationData.company_name === '' ||
        this.newRepresentationData.cooperation_history === '' ||
        this.newRepresentationData.cooperation_start_year === ''
      ) {
        return this.$message({
          type: 'warning',
          message: 'تمام فیلد ها رو پر کنید'
        })
      }
      this.formData.other_representations.push(this.newRepresentationData)
      this.resetNewRepresentationData()
      this.showRepresentationsModal = false
    },
    send() {
      if (this.waiting) {
        return this.$message({
          type: 'warning',
          message: 'لطفا منتظر بمانید'
        })
      }
      this.waiting = true
      this.validation = {}

      const data = this.formData
      data.full_name = this.userFullName
      data.national_code = this.user.national_code
      data.province_name = this.user.province_name
      data.province_id = this.user.province_id
      data.city_name = this.user.city_name
      data.city_id = this.user.city_id
      

      this.$axios
        .post(`/api/user/representation`, data)
        .then(async res => {
          this.waiting = false
          // const titlt = 'ثبت موفق'
          // const message = res.data.message
          // this.$alert(message, titlt, {
          //   confirmButtonText: 'بستن'
          // })
          this.formData = this.initForm()
          await this.$auth.fetchUser()
          this.$router.push({
            name: 'enroll-representation-enrollCode',
            params: { enrollCode: this.$auth.user.representation_code }
          })
        })
        .catch(err => {
          this.waiting = false
          if (err.response.status === 422) {
            this.validation = err.response.data.validation
            this.$message({
              type: 'warning',
              message: 'پارامتر ها رو بررسی و دوباره تلاش کنید'
            })
          } else if (err.response.status === 406) {
            const titlt = 'خطا'
            const message = err.response.data.message
            this.$alert(message, titlt, {
              confirmButtonText: 'متوجه شدم'
            })
          } else {
            this.$message({
              type: 'error',
              message: err.response.data.message
            })
          }
        })
    },
    update() {
      if (this.waiting) {
        return this.$message({
          type: 'warning',
          message: 'لطفا منتظر بمانید'
        })
      }
      this.waiting = true
      this.validation = {}

      const data = this.formData
      if (!this.isAdmin) {
        data.full_name = this.userFullName
        data.national_code = this.user.national_code
        data.province_name = this.user.province_name
        data.province_id = this.user.province_id
        data.city_name = this.user.city_name
        data.city_id = this.user.city_id
        data.mobile_number = this.user.mobile_number
      }

      const url = this.isAdmin ? `/api/admin/updateAgent/${this.data._id}` : `/api/user/representation/${this.data._id}`
      this.$axios
        .put(url, data)
        .then(async res => {
          this.waiting = false
          this.$message({
            type: 'success',
            message: res.data.message
          })
          if (!this.isAdmin) {
            await this.$auth.fetchUser()
          }
        })
        .catch(err => {
          this.waiting = false
          if (err.response.status === 422) {
            this.validation = err.response.data.validation
            this.$message({
              type: 'warning',
              message: 'پارامتر ها رو بررسی و دوباره تلاش کنید'
            })
          } else if (err.response.status === 406) {
            const titlt = 'خطا'
            const message = err.response.data.message
            this.$alert(message, titlt, {
              confirmButtonText: 'متوجه شدم'
            })
          } else {
            this.$message({
              type: 'error',
              message: err.response.data.message
            })
          }
        })
    }
  }
}
</script>