<template>
  <div class="representation--page page">
    <hero title="اخذ نمایندگی" />
    <section class="s1">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="panel">
              <div class="txtBox">
                <h3>نکات مهم قبل از ثبت درخواست:</h3>
                <ul>
                  <li>
                    <p>
                      <span>برای ثبت درخواست، آپلود مدارک و پیگیری درخواست ابتدا باید </span>
                      <nuxt-link :to="{ name: 'auth-login-register', query: { path: 'representation' } }"
                        >وارد حساب کاربری</nuxt-link
                      >
                      <span>خود شوید.</span>
                    </p>
                  </li>
                  <li>
                    <p>
                      فرم درخواست را با دقت پر کرده و قبل از ارسال اطلاعات خود را بررسی کنید. امکان ویرایش فرم بعد از
                      ارسال وجود ندارد.
                    </p>
                  </li>
                  <li>
                    <p>شماره تلفن ثابت و فکس شرکت را با پیش شماره شهر و به صورت کامل وارد کنید.</p>
                  </li>
                  <li>
                    <p>
                      درصورتی که قبلا فرم درخواست ارسال کرده اید تا مشخص شدن وضعیت درخواست قبلی قادر به ثبت درخواست جدید
                      نمیباشید.
                    </p>
                  </li>
                  <li>
                    <p>
                      بعد از ارسال فرم و مشاهده درخواست توسط کارشناسان درصورتی که نیاز به آپلود مدارک باشد، دسترسی آپلود
                      مدارک به شما داده خواهد شد و لیست مدارک مورد نیاز به اطلاع شما خواهد رسید.
                    </p>
                  </li>
                  <li>
                    <p>مدارک را فقط به صورت فایل فشرده و با فرمت zip میتوانید آپلود کنید.</p>
                  </li>
                  <li>
                    <p>
                      محدودیت حجم آپلود هر فایل 20 مگابایت میباشد، لذا اگر حجم مدارک زیاد است آن را طی چند مرحله آپلود
                      کنید.
                    </p>
                  </li>
                </ul>
              </div>
              <div class="links">
                <div class="item">
                  <nuxt-link :to="{ name: 'enroll-representation' }"> ثبت درخواست و آپلود مدارک</nuxt-link>
                </div>

                <div class="item">
                  <button @click="checkRepCode = true">پیگیری وضعیت درخواست</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <CheckRepAndUploadDocs :key="checkUploadModalKey" :show="checkRepCode" @closeModal="closeModal" />
  </div>
</template>

<script>
export default {
  name: 'RepresentationPage',
  data() {
    return {
      checkRepCode: false,
      checkUploadModalKey: 0
    }
  },
  head() {
    return {
      title: 'آسان سرویس | اخذ نمایندگی'
    }
  },
  computed: {
    user() {
      return this.$auth.user
    }
  },
  mounted() {
    if (this.$route.query?.action === 'check') this.checkRepCode = true
  },
  methods: {
    closeModal() {
      this.checkRepCode = false
      this.checkUploadModalKey = Math.random()
    }
  }
}
</script>
