<template>
  <div class="container-fluid">
    <div class="row">
      <admin-title-bar :title="title">
        <el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
        <el-button type="success" @click="upload">ایجاد</el-button>
      </admin-title-bar>

      <div class="col-6">
        <admin-panel>
          <el-form>
            <el-form-item prop="title" :class="validation.fa_title ? 'is-error' : ''" label="عنوان فارسی">
              <el-input v-model="formData.fa_title"></el-input>
              <p class="err" v-if="validation.fa_title">{{ validation.fa_title.msg }}</p>
            </el-form-item>

            <el-form-item prop="title" :class="validation.en_title ? 'is-error' : ''" label="عنوان انگلیسی">
              <el-input v-model="formData.en_title"></el-input>
              <p class="err" v-if="validation.en_title">{{ validation.en_title.msg }}</p>
            </el-form-item>

            <el-form-item prop="title" :class="validation.fa_caption ? 'is-error' : ''" label="توضیحات فارسی">
              <el-input v-model="formData.fa_caption"></el-input>
              <p class="err" v-if="validation.fa_caption">{{ validation.fa_caption.msg }}</p>
            </el-form-item>

            <el-form-item prop="title" :class="validation.en_caption ? 'is-error' : ''" label="توضیحات انگلیسی">
              <el-input v-model="formData.en_caption"></el-input>
              <p class="err" v-if="validation.en_caption">{{ validation.en_caption.msg }}</p>
            </el-form-item>
          </el-form>
        </admin-panel>
      </div>
      <div class="col-6">
        <admin-panel>
          <h2 class="secondTitle">تصویر</h2>
          <el-divider></el-divider>
          <img :src="formData.image" alt="" style="width: 100%">
          <input type="file" ref="image" @change="preview">
          <p class="err" v-if="validation.image">{{ validation.image.msg }}</p>
        </admin-panel>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      formData: {
        fa_title: '',
        en_title: '',
        fa_caption: '',
        en_caption: '',
        image: ''
      },
      validation: {},
      uploading: false,
      uploadProgress: null
    }
  },
  computed: {
    title() {
      if (!this.uploading) {
        return 'افزودن اسلاید'
      } else {
        return this.uploadProgress
      }
    }
  },
  methods: {
    upload() {
      this.validation = ''
      const data = new FormData()
      data.append('fa_title', this.formData.fa_title)
      data.append('en_title', this.formData.en_title)
      data.append('fa_caption', this.formData.fa_caption)
      data.append('en_caption', this.formData.en_caption)
      data.append('image', this.$refs.image.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/slider`, data, axiosConfig)
          .then(response => {
            if (response.data) {
              this.$message({
                message: 'اسلاید با موفقیت ثبت شد.',
                type: 'success'
              });
              this.$router.push({name: 'admin-slider'})
            }
          }).catch(error => {
        if (error.response.status === 422) {
          this.validation = error.response.data.validation
          this.$message({
            type: 'error',
            message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
          })
        } else {
          this.$alert(error.response.data.error.message, 'خطا', {
            confirmButtonText: 'باشه'
          })
        }
      })
    },
    preview(event) {
      this.formData.image = URL.createObjectURL(event.target.files[0])
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  layout: 'admin'
}
</script>
