<template>
  <div class="panel upload-assets">
    <div class="title">
      <h3>
        <span>درخواست نمایندگی شما با کد</span>
        <b>{{ user.representation_code }}</b>
        <span>ثبت شده است.</span>
      </h3>
    </div>

    <el-skeleton v-if="loading" class="mt-5" :rows="6" />

    <template v-else>
      <template v-if="lastRepresentation.upload">
        <div class="level-description">
          <h3>مرحله دوم ثبت درخواست:</h3>
          <p>اطلاعات شما تا این مرجله در سیستم ثبت شده است، لطفا از طریق این صفحه اقدام به بارگذاری مدارک خود کنید.</p>
          <p>
            تا زمانی که درخواست شما تعیین وضعیت نشده است در هر زمانی میتوانید با مراجعه به همین صفحه مدارک بیشتری
            بارگذاری کنید یا مدارک قبلی را ویرایش کنید.
          </p>
        </div>
        <div class="upload-description">
          <h3>نکاتی درباره بارگذاری مدارک:</h3>
          <ul>
            <li>
              <span>در هر بخش تصاویر مدارک مربوطه را بارگذاری نمایید.</span>
            </li>
            <li>
              <span>فیلدهای بارگذاری عکس در این صفحه هیچ کدام اجباری نیست.</span>
            </li>
            <li>
              <span>فرمت مجاز تصاور jpeg میباشد.</span>
            </li>
            <li>
              <span>نهایت حجم مجاز برای هر تصویر 2 مگابایت میباشد.</span>
            </li>
          </ul>
        </div>

        <div class="upload">
          <section v-for="item in agentAssetCategories" :key="item.title">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
            <RepresentationImageUploader
              :name="item.fieldName"
              :files-list="lastRepresentation[item.fieldName] || []"
              :representation_code="lastRepresentation.representation_code"
            />
          </section>
        </div>
      </template>

      <div v-else class="mt-5" style="text-align: center; color: red">
        <h1>شما دسترسی آپلود مدارک ندارید</h1>
      </div>
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'EnrollRepresentationAssets',
  data() {
    return {
      lastRepresentation: {},
      loading: true
    }
  },
  head() {
    return {
      title: 'آسان سرویس | آپلود مدارک'
    }
  },
  computed: {
    ...mapGetters({
      agentAssetCategories: 'front/agentAssetCategories'
    }),
    user() {
      return this.$auth.user
    },
    userFullName() {
      return this.user.first_name + ' ' + this.user.last_name
    }
  },
  async mounted() {
    try {
      const lastRep = await this.$axios.$get(`/api/user/representation/${this.user.representation_code}`)
      this.lastRepresentation = lastRep
    } catch (err) {
      console.log('err', err)
    }
    this.loading = false
  }
}
</script>
