<template>
  <div class="container-fluid">
    <div class="row">
      <admin-title-bar :title="title"></admin-title-bar>
      <div class="col-12">
        <admin-panel>
          <h2>افزودن یا بروزرسانی کاتالوگ:</h2>
        </admin-panel>
      </div>
      <div class="col-6">
        <admin-panel>
          <h2>کاتالوگ فارسی:</h2>
          <el-divider></el-divider>
          <el-form>
            <input type="file" ref="file_fa">
            <el-button @click="upload('fa')" type="success">افزودن</el-button>
            <p style="color: red;" v-if="validation.pdf && locale === 'fa'">{{ validation.pdf.msg }}</p>
          </el-form>
          <el-divider></el-divider>
          <a v-if="catalog && catalog.file && catalog.file.fa" :href="catalog.file.fa" target="_blank">
            <el-button>دانلود و مشاهده کاتالوگ فعلی</el-button>
          </a>
        </admin-panel>
      </div>
      <div class="col-6">
        <admin-panel>
          <h2>کاتالوگ انگلیسی:</h2>
          <el-divider></el-divider>
          <el-form>
            <input type="file" ref="file_en">
            <el-button @click="upload('en')" type="success">افزودن</el-button>
            <p style="color: red;" v-if="validation.pdf && locale === 'en'">{{ validation.pdf.msg }}</p>
          </el-form>
          <el-divider></el-divider>
          <a v-if="catalog && catalog.file && catalog.file.en" :href="catalog.file.en" target="_blank">
            <el-button>دانلود و مشاهده کاتالوگ فعلی</el-button>
          </a>
        </admin-panel>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      catalog: null,
      locale: null,
      validation: {},
      uploading: false,
      uploadProgress: null
    }
  },
  head() {
    return {
      title: this.title,
    }
  },
  computed: {
    title() {
      if (!this.uploading) {
        return 'آپلود کاتالوگ اصلی سایت'
      } else {
        return this.uploadProgress
      }
    }
  },
  methods: {
    upload(locale) {
      this.locale = locale
      this.validation = {}
      locale === 'fa' ? this.$refs.file_en.value = null : this.$refs.file_fa.value = null
      const data = new FormData()
      data.append('locale', locale)
      locale === 'fa' ? data.append('pdf', this.$refs.file_fa.files[0]) : data.append('pdf', this.$refs.file_en.files[0])

      const axiosConfig = {
        onUploadProgress: progressEvent => {
          this.uploading = true
          this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'

          if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
            this.uploading = false
          }
        }
      }

      this.$axios.post(`/api/private/catalog`, data, axiosConfig)
          .then(res => {
            this.$message({
              type: 'success',
              message: 'کاتالوگ با موفقیت آپلود شد'
            })
            this.$refs.file_fa.value = null
            this.$refs.file_en.value = null
            this.catalog = res.data
          })
          .catch(err => {
            if (err.response.status === 422) this.validation = err.response.data.validation
            else console.log(err.response.data)
          })
    }
  },
  layout: 'admin',
  async asyncData({$axios}) {
    let catalog = await $axios.get('/api/public/catalog')
    return {
      catalog: catalog.data
    }
  }
}
</script>

