<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_name ? 'is-error' : ''" label="نام فارسی">
							<el-input v-model="formData.category_details.fa.name"></el-input>
							<p class="err" v-if="validation.fa_name">{{validation.fa_name.msg}}</p>
						</el-form-item>
						
						<el-form-item prop="title" :class="validation.en_name ? 'is-error' : ''" label="نام انگلیسی">
							<el-input v-model="formData.category_details.en.name"></el-input>
							<p class="err" v-if="validation.en_name">{{validation.en_name.msg}}</p>
						</el-form-item>
					
					</el-form>
				</admin-panel>
			</div>
		
		</div>
	</div>
</template>


<script>
   export default {
      data() {
         return {
            formData: null,
            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_name', this.formData.category_details.fa.name)
            data.append('en_name', this.formData.category_details.en.name)

            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.put(`/api/private/productCategories/${this.formData._id}`, data, axiosConfig)
               .then(response => {
                  this.$message({
                     message: 'دسته بندی با موفقیت بروزرسانی شد.',
                     type: 'success'
                  })
               }).catch(error => {
               if (error.response.status === 422) {
                  this.validation = error.response.data.validation
                  this.$message({
                     type: 'error',
                     message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
                  })
               } else {
                  this.$alert(error.response.data.message, 'خطا', {
                     confirmButtonText: 'باشه',

                  })
               }
            })
         }
      },
      head() {
         return {
            title: this.title
         }
      },
      layout: 'admin',
      async asyncData({$axios, params}) {
         const category = await $axios.get(`/api/public/productCategories/${params.category}`)
         return {
            formData: category.data
         }
      }
   }
</script>
