<template>
  <div class="container-fluid">
    <div class="row">
      <admin-title-bar :title="title">
        <el-button @click="$router.push({name: 'admin-products'})" 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="category" :class="validation.category ? 'is-error' : ''" label="دسته بندی">
              <el-select v-model="formData.category" placeholder="انتخاب کنید">
                <el-option
                    v-for="item in productCategories"
                    :key="item._id"
                    :label="item.category_details.fa.name"
                    :value="item._id">
                </el-option>
              </el-select>
              <p class="err" v-if="validation.category">{{ validation.category.msg }}</p>
            </el-form-item>

            <el-form-item prop="published" label="بخش دوم نمایش داده شود">
              <el-switch v-model="formData.more_section" style="margin-right: 15px;"></el-switch>
            </el-form-item>

            <el-form-item prop="published" label="دارای فایل های قابل دانلود باشد">
              <el-switch v-model="formData.download_section" style="margin-right: 15px;"></el-switch>
            </el-form-item>

            <el-form-item prop="published" label="در صفحه اصلی باشد">
              <el-switch v-model="formData.favorite" style="margin-right: 15px;"></el-switch>
            </el-form-item>

          </el-form>
        </admin-panel>
      </div>

      <div class="col-6">
        <admin-panel>
          <h2>کاور</h2>
          <el-divider></el-divider>
          <img :src="formData.cover" alt="" style="width: 100%;max-width: 300px;display: block">
          <input type="file" ref="cover" @change="previewCover">
          <p class="err" v-if="validation.cover">{{ validation.cover.msg }}</p>
          <p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 1010px عرض و 534px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
        </admin-panel>
      </div>

      <div class="col-6">
        <admin-panel>
          <el-form>

            <h2 style="color: #000;font-weight: bold;font-size: 30px;">فارسی</h2>
            <el-divider></el-divider>

            <el-form-item prop="title" :class="validation.fa_name ? 'is-error' : ''" label="نام">
              <el-input v-model="formData.product_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.fa_short_description ? 'is-error' : ''" label="توضیح کوتاه">
              <el-input type="textarea" v-model="formData.product_details.fa.short_description"></el-input>
              <p class="err" v-if="validation.fa_short_description">{{ validation.fa_short_description.msg }}</p>
            </el-form-item>

            <h3>بخش اول صفحه</h3>
            <el-divider></el-divider>

            <el-form-item prop="title" :class="validation.fa_page_title ? 'is-error' : ''" label="عنوان">
              <el-input type="textarea" v-model="formData.product_details.fa.page_title"></el-input>
              <p class="err" v-if="validation.fa_page_title">{{ validation.fa_page_title.msg }}</p>
            </el-form-item>

            <el-form-item prop="title" :class="validation.fa_page_description ? 'is-error' : ''" label="توضیحات">
              <el-input type="textarea" v-model="formData.product_details.fa.page_description"></el-input>
              <p class="err" v-if="validation.fa_page_description">{{ validation.fa_page_description.msg }}</p>
            </el-form-item>

            <h3>بخش دوم صفحه</h3>
            <el-divider></el-divider>

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

            <el-form-item prop="title" :class="validation.fa_more_description1 ? 'is-error' : ''" label="توضیح اول">
              <el-input type="textarea" v-model="formData.product_details.fa.more_description1"></el-input>
              <p class="err" v-if="validation.fa_more_description1">{{ validation.fa_more_description1.msg }}</p>
            </el-form-item>

            <el-form-item prop="title" :class="validation.fa_more_title2 ? 'is-error' : ''" label="عنوان دوم">
              <el-input v-model="formData.product_details.fa.more_title2"></el-input>
              <p class="err" v-if="validation.fa_more_title2">{{ validation.fa_more_title2.msg }}</p>
            </el-form-item>

            <el-form-item prop="title" :class="validation.fa_more_description2 ? 'is-error' : ''" label="توضیح دوم">
              <el-input type="textarea" v-model="formData.product_details.fa.more_description2"></el-input>
              <p class="err" v-if="validation.fa_more_description2">{{ validation.fa_more_description2.msg }}</p>
            </el-form-item>


            <h3>بخش سوم صفحه (جدول و توضیحات)</h3>
            <el-divider></el-divider>

            <el-form-item prop="title" :class="validation.fa_chart_title ? 'is-error' : ''" label="عنوان جدول">
              <el-input v-model="formData.product_details.fa.chart_title"></el-input>
              <p class="err" v-if="validation.fa_chart_title">{{ validation.fa_chart_title.msg }}</p>
            </el-form-item>

            <el-form-item prop="title" :class="validation.fa_chart_description ? 'is-error' : ''" label="توضیحات جدول">
              <el-input type="textarea" v-model="formData.product_details.fa.chart_description"></el-input>
              <p class="err" v-if="validation.fa_chart_description">{{ validation.fa_chart_description.msg }}</p>
            </el-form-item>

          </el-form>
        </admin-panel>
      </div>

      <div class="col-6">
        <admin-panel>
          <el-form>

            <h2 style="color: #000;font-weight: bold;font-size: 30px;">انگلیسی</h2>
            <el-divider></el-divider>

            <el-form-item prop="title" :class="validation.en_name ? 'is-error' : ''" label="نام">
              <el-input v-model="formData.product_details.en.name"></el-input>
              <p class="err" v-if="validation.en_name">{{ validation.en_name.msg }}</p>
            </el-form-item>


            <el-form-item prop="title" :class="validation.en_short_description ? 'is-error' : ''" label="توضیح کوتاه">
              <el-input type="textarea" v-model="formData.product_details.en.short_description"></el-input>
              <p class="err" v-if="validation.en_short_description">{{ validation.en_short_description.msg }}</p>
            </el-form-item>

            <h3>بخش اول صفحه</h3>
            <el-divider></el-divider>

            <el-form-item prop="title" :class="validation.en_page_title ? 'is-error' : ''" label="عنوان">
              <el-input type="textarea" v-model="formData.product_details.en.page_title"></el-input>
              <p class="err" v-if="validation.en_page_title">{{ validation.en_page_title.msg }}</p>
            </el-form-item>

            <el-form-item prop="title" :class="validation.en_page_description ? 'is-error' : ''" label="توضیحات">
              <el-input type="textarea" v-model="formData.product_details.en.page_description"></el-input>
              <p class="err" v-if="validation.en_page_description">{{ validation.en_page_description.msg }}</p>
            </el-form-item>

            <h3>بخش دوم صفحه</h3>
            <el-divider></el-divider>

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

            <el-form-item prop="title" :class="validation.en_more_description1 ? 'is-error' : ''" label="توضیح اول">
              <el-input type="textarea" v-model="formData.product_details.en.more_description1"></el-input>
              <p class="err" v-if="validation.en_more_description1">{{ validation.en_more_description1.msg }}</p>
            </el-form-item>

            <el-form-item prop="title" :class="validation.en_more_title2 ? 'is-error' : ''" label="عنوان دوم">
              <el-input v-model="formData.product_details.en.more_title2"></el-input>
              <p class="err" v-if="validation.en_more_title2">{{ validation.en_more_title2.msg }}</p>
            </el-form-item>

            <el-form-item prop="title" :class="validation.en_more_description2 ? 'is-error' : ''" label="توضیح دوم">
              <el-input type="textarea" v-model="formData.product_details.en.more_description2"></el-input>
              <p class="err" v-if="validation.en_more_description2">{{ validation.en_more_description2.msg }}</p>
            </el-form-item>


            <h3>بخش سوم صفحه (جدول و توضیحات)</h3>
            <el-divider></el-divider>

            <el-form-item prop="title" :class="validation.en_chart_title ? 'is-error' : ''" label="عنوان جدول">
              <el-input v-model="formData.product_details.en.chart_title"></el-input>
              <p class="err" v-if="validation.en_chart_title">{{ validation.en_chart_title.msg }}</p>
            </el-form-item>

            <el-form-item prop="title" :class="validation.en_chart_description ? 'is-error' : ''" label="توضیحات جدول">
              <el-input type="textarea" v-model="formData.product_details.en.chart_description"></el-input>
              <p class="err" v-if="validation.en_chart_description">{{ validation.en_chart_description.msg }}</p>
            </el-form-item>

          </el-form>
        </admin-panel>
      </div>

      <div class="col-6">
        <admin-panel>
          <h2>عکس اول بخش دوم</h2>
          <el-divider></el-divider>
          <img :src="formData.more_section_image1" alt="" style="width: 100%;max-width: 300px;display: block">
          <input type="file" ref="more_section_image1" @change="previewMore_section_image1">
          <p class="err" v-if="validation.more_section_image1">{{ validation.more_section_image1.msg }}</p>
          <p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 778px عرض و 395px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>

          <h2 class="secondTitle">عکس دوم بخش دوم</h2>
          <el-divider></el-divider>
          <img :src="formData.more_section_image2" alt="" style="width: 100%;max-width: 300px;display: block">
          <input type="file" ref="more_section_image2" @change="previewMore_section_image2">
          <p class="err" v-if="validation.more_section_image2">{{ validation.more_section_image2.msg }}</p>
          <p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 778px عرض و 395px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>

          <!--  -->
          <h2 class="secondTitle">عکس اول شماتیک بخش سوم</h2>
          <el-divider></el-divider>
          <img :src="formData.render_image1" alt="" style="width: 100%;max-width: 300px;display: block">
          <input type="file" ref="render_image1" @change="previewRender_image1">
          <p class="err" v-if="validation.render_image1">{{ validation.render_image1.msg }}</p>
          <p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 300px عرض و 300px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>

          <el-form style="margin-top: 30px;">
            <el-form-item prop="title" :class="validation.fa_render_caption1 ? 'is-error' : ''" label="کپشن فارسی">
              <el-input v-model="formData.product_details.fa.render_caption1"></el-input>
              <p class="err" v-if="validation.fa_render_caption1">{{ validation.fa_render_caption1.msg }}</p>
            </el-form-item>

            <el-form-item prop="title" :class="validation.en_render_caption1 ? 'is-error' : ''" label="کپشن انگلیسی">
              <el-input v-model="formData.product_details.en.render_caption1"></el-input>
              <p class="err" v-if="validation.en_render_caption1">{{ validation.en_render_caption1.msg }}</p>
            </el-form-item>
          </el-form>

          <!--  -->
          <h2 class="secondTitle">عکس دوم شماتیک بخش سوم</h2>
          <el-divider></el-divider>
          <img :src="formData.render_image2" alt="" style="width: 100%;max-width: 300px;display: block">
          <input type="file" ref="render_image2" @change="previewRender_image2">
          <p class="err" v-if="validation.render_image2">{{ validation.render_image2.msg }}</p>
          <p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 300px عرض و 300px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>

          <el-form style="margin-top: 30px;">
            <el-form-item prop="title" :class="validation.fa_render_caption2 ? 'is-error' : ''" label="کپشن فارسی">
              <el-input v-model="formData.product_details.fa.render_caption2"></el-input>
              <p class="err" v-if="validation.fa_render_caption2">{{ validation.fa_render_caption2.msg }}</p>
            </el-form-item>

            <el-form-item prop="title" :class="validation.en_render_caption2 ? 'is-error' : ''" label="کپشن انگلیسی">
              <el-input v-model="formData.product_details.en.render_caption2"></el-input>
              <p class="err" v-if="validation.en_render_caption2">{{ validation.en_render_caption2.msg }}</p>
            </el-form-item>
          </el-form>

          <!--  -->
          <h2 class="secondTitle">عکس جدول مشخصات محصول</h2>
          <el-divider></el-divider>
          <img :src="formData.chart_image" alt="" style="width: 100%;max-width: 300px;display: block">
          <input type="file" ref="chart_image" @change="previewChart_image">
          <p class="err" v-if="validation.chart_image">{{ validation.chart_image.msg }}</p>

        </admin-panel>
      </div>

      <div class="col-6">
        <admin-panel>
          <h2>تصاویر دیگر محصول</h2>
          <el-divider></el-divider>
          <div class="newImg">
            <img :src="productImage" alt="" style="width: 100%;max-width: 300px;display: block">
            <input type="file" ref="gallery" @change="previewGallery">
            <p class="err" v-if="validation.images && validation.images.image">{{ validation.images.image.msg }}</p>
            <p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 1010px عرض و 534px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
            <el-button type="primary" @click="addImage" style="margin-top: 10px;">افزودن</el-button>
          </div>
          <div class="images">
            <div class="imgBox" v-for="item in formData.images" :key="item._id">
              <img :src="item.image" alt="">
              <el-button type="danger" plain icon="el-icon-delete" class="dlt" v-if="item._id" @click="delImage(item._id)"></el-button>
            </div>
          </div>
        </admin-panel>
      </div>

      <div class="col-6">
        <admin-panel>
          <h2>افزودن فایل PDF</h2>
          <el-divider></el-divider>
          <div class="pdf">
            <p>نسخه فارسی:</p>
            <input type="file" ref="pdf_fa">
            <p class="err" style="display: inline-block" v-if="validation.file_fa">{{ validation.file_fa.msg }}</p>
            <el-divider></el-divider>
            <p>نسخه انگلیسی:</p>
            <input type="file" ref="pdf_en">
            <p class="err" style="display: inline-block" v-if="validation.file_en">{{ validation.file_en.msg }}</p>

            <el-form style="margin-top: 30px;">
              <el-form-item prop="title" :class="validation.fa_pdf ? 'is-error' : ''" label="عنوان فارسی">
                <el-input v-model="fa_pdf"></el-input>
                <p class="err" v-if="validation.fa_pdf">{{ validation.fa_pdf.msg }}</p>
              </el-form-item>
              <el-form-item prop="title" :class="validation.en_pdf ? 'is-error' : ''" label="عنوان انگلیسی">
                <el-input v-model="en_pdf"></el-input>
                <p class="err" v-if="validation.en_pdf">{{ validation.en_pdf.msg }}</p>
              </el-form-item>
            </el-form>
            <br>
            <el-button type="primary" @click="addPDF" style="margin-top: 10px;">افزودن</el-button>
          </div>

          <div class="PDF_Files">
            <div class="file" v-for="item in formData.pdf_files" :key="item._id">
              <a :href="item.file.fa" download target="_blank">
                <i class="fas fa-file-pdf"></i>
                <b>فارسی: </b>
                <span>{{ item.pdf_details.fa.name }}</span>
              </a>
              <br>
              <a :href="item.file.en" download target="_blank">
                <i class="fas fa-file-pdf"></i>
                <b>انگلیسی: </b>
                <span>{{ item.pdf_details.en.name }}</span>
              </a>
              <el-button type="danger" plain icon="el-icon-delete" @click="delPDF(item._id)"></el-button>
            </div>
          </div>

        </admin-panel>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      formData: null,
      productImage: '',
      fa_pdf: '',
      en_pdf: '',
      productCategories: 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.product_details.fa.name)
      data.append('fa_short_description', this.formData.product_details.fa.short_description)
      data.append('fa_page_title', this.formData.product_details.fa.page_title)
      data.append('fa_page_description', this.formData.product_details.fa.page_description)
      data.append('fa_more_title1', this.formData.product_details.fa.more_title1)
      data.append('fa_more_description1', this.formData.product_details.fa.more_description1)
      data.append('fa_more_title2', this.formData.product_details.fa.more_title2)
      data.append('fa_more_description2', this.formData.product_details.fa.more_description2)
      data.append('fa_render_caption1', this.formData.product_details.fa.render_caption1)
      data.append('fa_render_caption2', this.formData.product_details.fa.render_caption2)
      data.append('fa_chart_title', this.formData.product_details.fa.chart_title)
      data.append('fa_chart_description', this.formData.product_details.fa.chart_description)


      data.append('en_name', this.formData.product_details.en.name)
      data.append('en_short_description', this.formData.product_details.en.short_description)
      data.append('en_page_title', this.formData.product_details.en.page_title)
      data.append('en_page_description', this.formData.product_details.en.page_description)
      data.append('en_more_title1', this.formData.product_details.en.more_title1)
      data.append('en_more_description1', this.formData.product_details.en.more_description1)
      data.append('en_more_title2', this.formData.product_details.en.more_title2)
      data.append('en_more_description2', this.formData.product_details.en.more_description2)
      data.append('en_render_caption1', this.formData.product_details.en.render_caption1)
      data.append('en_render_caption2', this.formData.product_details.en.render_caption2)
      data.append('en_chart_title', this.formData.product_details.en.chart_title)
      data.append('en_chart_description', this.formData.product_details.en.chart_description)

      data.append('category', this.formData.category)
      data.append('download_section', this.formData.download_section)
      data.append('more_section', this.formData.more_section)
      data.append('favorite', this.formData.favorite)

      if (this.$refs.cover.files[0]) data.append('cover', this.$refs.cover.files[0])
      if (this.$refs.more_section_image1.files[0]) data.append('more_section_image1', this.$refs.more_section_image1.files[0])
      if (this.$refs.more_section_image2.files[0]) data.append('more_section_image2', this.$refs.more_section_image2.files[0])
      if (this.$refs.render_image1.files[0]) data.append('render_image1', this.$refs.render_image1.files[0])
      if (this.$refs.render_image2.files[0]) data.append('render_image2', this.$refs.render_image2.files[0])
      if (this.$refs.chart_image.files[0]) data.append('chart_image', this.$refs.chart_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.put(`/api/private/products/${this.formData._id}`, data, axiosConfig)
          .then(response => {
            this.formData = response.data
            this.$message({
              message: 'محصول با موفقیت بروزرسانی شد.',
              type: 'success'
            })
            // clear file inputs
            this.$refs.cover.value = null
            this.$refs.more_section_image1.value = null
            this.$refs.more_section_image2.value = null
            this.$refs.render_image1.value = null
            this.$refs.render_image2.value = null
            this.$refs.chart_image.value = null
          }).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: 'باشه',
          })
        }
      })
    },
    addImage() {
      this.validation.images = {}
      const data = new FormData()
      data.append('product_id', this.formData._id)
      data.append('image', this.$refs.gallery.files[0])

      this.$axios.post(`/api/private/productImage`, data)
          .then(res => {
            this.$message({
              type: 'success',
              message: 'تصویر جدید با موفقیت افزوده شد.'
            })
            this.$refs.gallery.value = null
            this.productImage = ''
            this.formData = res.data
          })
          .catch(err => {
            if (err.response.status === 422) {
              this.validation = err.response.data.validation
              this.$message({
                type: 'error',
                message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
              })
            } else {
              this.$message({
                type: 'error',
                message: err.response.data.message
              })
            }
          })
    },
    delImage(id) {
      this.$confirm('این آیتم حذف شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`/api/private//productImage/${id}`)
            .then(res => {
              this.$message({
                type: 'success',
                message: 'تصویر با موفقیت حذف شد.'
              })
              this.formData.images = this.formData.images.filter(item => {
                return item._id !== id
              })
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: err.response.data.message
              })
            })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: 'عملیات لغو شد'
        })
      })
    },
    addPDF() {
      this.validation = {}
      const data = new FormData()
      data.append('product_id', this.formData._id)
      data.append('fa_pdf', this.fa_pdf)
      data.append('en_pdf', this.en_pdf)
      data.append('file_fa', this.$refs.pdf_fa.files[0])
      data.append('file_en', this.$refs.pdf_en.files[0])

      this.$axios.post(`/api/private/productPDF`, data)
          .then(res => {
            this.$message({
              type: 'success',
              message: 'فایل جدید با موفقیت افزوده شد.'
            })
            this.fa_pdf = ''
            this.en_pdf = ''
            this.$refs.pdf_fa.value = null
            this.$refs.pdf_en.value = null
            this.formData = res.data
          })
          .catch(err => {
            if (err.response.status === 422) {
              this.validation = err.response.data.validation
              this.$message({
                type: 'error',
                message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
              })
            } else {
              this.$message({
                type: 'error',
                message: err.response.data.message
              })
            }
          })
    },
    delPDF(id) {
      this.$confirm('این آیتم حذف شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`/api/private//productPDF/${id}`)
            .then(res => {
              this.$message({
                type: 'success',
                message: 'فایل با موفقیت حذف شد.'
              })
              this.formData.pdf_files = this.formData.pdf_files.filter(item => {
                return item._id !== id
              })
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: err.response.data.message
              })
            })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: 'عملیات لغو شد'
        })
      })
    },
    previewCover(event) {
      this.formData.cover = URL.createObjectURL(event.target.files[0])
    },
    previewMore_section_image1(event) {
      this.$set(this.formData, 'more_section_image1', URL.createObjectURL(event.target.files[0]))
    },
    previewMore_section_image2(event) {
      this.$set(this.formData, 'more_section_image2', URL.createObjectURL(event.target.files[0]))
    },
    previewRender_image1(event) {
      this.$set(this.formData, 'render_image1', URL.createObjectURL(event.target.files[0]))
    },
    previewRender_image2(event) {
      this.$set(this.formData, 'render_image2', URL.createObjectURL(event.target.files[0]))
    },
    previewGallery(event) {
      this.productImage = URL.createObjectURL(event.target.files[0])
    },
    previewChart_image(event) {
      this.$set(this.formData, 'chart_image', URL.createObjectURL(event.target.files[0]))
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  layout: 'admin',
  async asyncData({$axios, params, error}) {
    try {
      let product = await $axios.get(`/api/public/product/${params.product}`)
      let productCategories = await $axios.get(`/api/public/productCategories`)
      return {
        formData: product.data,
        productCategories: productCategories.data
      }
    } catch (e) {
      error({status: 404, message: 'Page not found'})
    }
  }
}
</script>


<style scoped lang="scss">
.features {
  ul {
    li {
      padding: 45px 15px 15px;
      background: #e7e7e7;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      position: relative;
      margin-bottom: 10px;

      h6 {
        margin-top: 10px;
      }

      p {
        margin-top: 5px;
      }

      .dlt {
        position: absolute;
        left: 15px;
        top: 15px;
      }
    }
  }

  .el-divider__text {
    background: #e7e7e7;
  }

  .el-divider {
    background: #c8cad0;
  }
}


.images {
  width: 100%;
  margin-top: 30px;

  .imgBox {
    border: 1px solid rgba(0, 0, 0, 0.05);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    width: 200px;
    position: relative;
    display: inline-block;
    margin: 5px;

    img {
      width: 100%;
    }

    .dlt {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}

.PDF_Files {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 15px;
  margin-top: 30px;

  .file {
    margin-bottom: 20px;
    background: rgba(#000, 0.03);
    padding: 5px;
    padding-left: 80px;
    position: relative;

    &:last-child {
      margin-bottom: 0;
    }

    a {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 5px;
      transition: 0.3s;

      &:hover {
        background-color: rgba(#000, 0.1);
      }

      i {
        font-size: 25px;
        margin-left: 10px;
      }
    }

    .el-button {
      display: block;
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
    }
  }
}

</style>
