<template>
  <user-dashboard-container page-class="agent-requests" panel-title="ویرایش مدارک نمایندگی">
    <div class="upload-assets">
      <el-skeleton v-if="loading" class="mt-5" :rows="6" />

      <template v-else>
        <template v-if="lastRepresentation.upload">
          <div class="upload-description mt-0">
            <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">
          <h3>شما دسترسی ویرایش مدارک ندارید</h3>
        </div>
      </template>
    </div>
  </user-dashboard-container>
</template>

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