<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-gallery' }">برگشت به صفحه قبل</CButton>
      <CButton v-if="$route.params.details === 'new'" size="sm" color="success" class="mr-1" @click="post">افزودن
      </CButton>
      <CButton v-else size="sm" color="success" class="mr-1" @click="update">بروزرسانی</CButton>
    </CustomSubHeader>
    <CRow style="flex-direction: column;">
      <CCol>
        <CCard>
          <CCardBody>
            <CRow>
              <CCol lg="6">
                <h6>
                  قسمت انتخابی
                  <i v-c-tooltip="
                      'شما باید تعیین کنید که این رسانه برای کدام قسمت پرتال می باشد'
                    " class="fas fa-question-circle"></i>
                </h6>
                <el-select :disabled="$auth.user.portals.length === 1" v-model="gallery.modelType"
                           @change="changePortalVal"
                           placeholder="انتخاب کنید" style="width: 100%;">
                  <el-option v-for="item in portals" :key="item.value" :label="item.name" :value="item.value">
                  </el-option>
                </el-select>
                <p style="margin-top : 5px !important ; color : red" class="form-err" v-if="validation.modelType">
                  {{ validation.modelType.msg }}
                </p>
                <template v-if="gallery.modelType">
                  <el-divider></el-divider>
                  <h6>
                    {{
                      this.$route.params.details !== "new"
                          ? "دسته بندی"
                          : "انتخاب دسته بندی"
                    }}
                  </h6>
                  <el-select
                      filterable
                      clearable
                      style="width : 100%"
                      v-model="catId"
                      placeholder="انتخاب دسته بندی">
                    <el-option
                        v-for="item in filterParent"
                        v-if="availableCategory(item._id)"
                        :key="item._id"
                        :label="item.title"
                        :value="item._id"
                    >
                      <!-- <span>{{setTitle(item)}}</span> -->
                    </el-option>
                  </el-select>
                  <p style="margin-top : 5px !important ; color : red" class="form-err" v-if="validation.catId">
                    {{ validation.catId.msg }}
                  </p>
                </template>
                <el-divider/> <!--- details --->
                <CTextarea :class="validation.summaryTitle ? 'err' : null" label="رو تیتر"
                           :description="validation.summaryTitle ? validation.summaryTitle.msg : null"
                           v-model="gallery.summaryTitle"/>
                <CTextarea
                    :class="validation.title ? 'err' : null"
                    label="تیتر"
                    :description="
                      validation.title
                        ? validation.title.msg
                        : null
                    "
                    v-model="gallery.title"
                />
                <CTextarea
                    :class="validation.leadTitle ? 'err' : null"
                    label="لید"
                    :description="validation.leadTitle? validation.leadTitle.msg: null "
                    v-model="gallery.leadTitle"
                    rows="3"
                />
                <CTextarea
                    :class="validation.metaTagDesc ? 'err' : null"
                    label="توضیحات برای موتورهای جست و جو"
                    placeholder="در صورتی که این کادر را خالی بگذارید از متن لید استفاده خواهد شد."
                    :description="validation.metaTagDesc? validation.metaTagDesc.msg: null"
                    v-model="gallery.metaTagDesc"
                    rows="3"
                />
                <p>کلمات کلیدی</p>
                <div>
                  <el-input
                      class="input-new-tag mb-3"
                      v-if="inputVisible"
                      v-model="inputValue"
                      ref="saveTagInput"
                      size="small"
                      @keyup.enter.native="handleInputConfirm"
                      @blur="handleInputConfirm"
                  >
                  </el-input>
                  <el-button
                      v-else
                      class="button-new-tag mb-3"
                      size="small"
                      @click="showInput"
                  >کلمه جدید
                  </el-button
                  >
                </div>
                <div class="mb-3">
                  <el-tag
                      class="ml-1"
                      :key="tag"
                      v-for="tag in gallery.keywords"
                      closable
                      :disable-transitions="false"
                      @close="handleClose(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </CCol>
<!--              <CCol lg="6">-->
<!--                <h6>-->
<!--                  قسمت انتخابی-->
<!--                  <i v-c-tooltip="-->
<!--                      'شما باید تعیین کنید که این رسانه برای کدام قسمت پرتال می باشد'-->
<!--                    " class="fas fa-question-circle"></i>-->
<!--                </h6>-->
<!--                <el-select :disabled="$auth.user.portals.length === 1" v-model="gallery.modelType"-->
<!--                           @change="changePortalVal"-->
<!--                           placeholder="انتخاب کنید" style="width: 100%;">-->
<!--                  <el-option v-for="item in portals" :key="item.value" :label="item.name" :value="item.value">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--                <p style="margin-top : 5px !important ; color : red" class="form-err" v-if="validation.modelType">-->
<!--                  {{ validation.modelType.msg }}-->
<!--                </p>-->
<!--                <template v-if="gallery.modelType">-->
<!--                  <el-divider></el-divider>-->
<!--                  <h6>-->
<!--                    {{-->
<!--                      this.$route.params.details !== "new"-->
<!--                          ? "دسته بندی"-->
<!--                          : "انتخاب دسته بندی"-->
<!--                    }}-->
<!--                  </h6>-->
<!--                  <el-select-->
<!--                      filterable-->
<!--                      clearable-->
<!--                      style="width : 100%"-->
<!--                      v-model="catId"-->
<!--                      placeholder="انتخاب دسته بندی">-->
<!--                    <el-option-->
<!--                        v-for="item in filterParent"-->
<!--                        v-if="availableCategory(item._id)"-->
<!--                        :key="item._id"-->
<!--                        :label="item.title"-->
<!--                        :value="item._id"-->
<!--                    >-->
<!--                      &lt;!&ndash; <span>{{setTitle(item)}}</span> &ndash;&gt;-->
<!--                    </el-option>-->
<!--                  </el-select>-->
<!--                  <p style="margin-top : 5px !important ; color : red" class="form-err" v-if="validation.catId">-->
<!--                    {{ validation.catId.msg }}-->
<!--                  </p>-->
<!--                </template>-->
<!--                <el-divider/> &lt;!&ndash;- details -&ndash;&gt;-->
<!--                <CTextarea :class="validation.summaryTitle ? 'err' : null" label="رو تیتر"-->
<!--                           :description="validation.summaryTitle ? validation.summaryTitle.msg : null"-->
<!--                           v-model="gallery.summaryTitle"/>-->
<!--                <CTextarea-->
<!--                    :class="validation.title ? 'err' : null"-->
<!--                    label="تیتر"-->
<!--                    :description="-->
<!--                      validation.title-->
<!--                        ? validation.title.msg-->
<!--                        : null-->
<!--                    "-->
<!--                    v-model="gallery.title"-->
<!--                />-->
<!--                <CTextarea-->
<!--                    :class="validation.leadTitle ? 'err' : null"-->
<!--                    label="لید"-->
<!--                    :description="validation.leadTitle? validation.leadTitle.msg: null "-->
<!--                    v-model="gallery.leadTitle"-->
<!--                    rows="3"-->
<!--                />-->
<!--                <CTextarea-->
<!--                    :class="validation.metaTagDesc ? 'err' : null"-->
<!--                    label="توضیحات برای موتورهای جست و جو"-->
<!--                    placeholder="در صورتی که این کادر را خالی بگذارید از متن لید استفاده خواهد شد."-->
<!--                    :description="validation.metaTagDesc? validation.metaTagDesc.msg: null"-->
<!--                    v-model="gallery.metaTagDesc"-->
<!--                    rows="3"-->
<!--                />-->
<!--                <p>کلمات کلیدی</p>-->
<!--                <div>-->
<!--                  <el-input-->
<!--                      class="input-new-tag mb-3"-->
<!--                      v-if="inputVisible"-->
<!--                      v-model="inputValue"-->
<!--                      ref="saveTagInput"-->
<!--                      size="small"-->
<!--                      @keyup.enter.native="handleInputConfirm"-->
<!--                      @blur="handleInputConfirm"-->
<!--                  >-->
<!--                  </el-input>-->
<!--                  <el-button-->
<!--                      v-else-->
<!--                      class="button-new-tag mb-3"-->
<!--                      size="small"-->
<!--                      @click="showInput"-->
<!--                  >کلمه جدید-->
<!--                  </el-button-->
<!--                  >-->
<!--                </div>-->
<!--                <div class="mb-3">-->
<!--                  <el-tag-->
<!--                      class="ml-1"-->
<!--                      :key="tag"-->
<!--                      v-for="tag in gallery.keywords"-->
<!--                      closable-->
<!--                      :disable-transitions="false"-->
<!--                      @close="handleClose(tag)"-->
<!--                  >-->
<!--                    {{ tag }}-->
<!--                  </el-tag>-->
<!--                </div>-->
<!--              </CCol>-->
              <CCol lg="6">
                <h6>
                  نوع رسانه
                  <i v-c-tooltip="
                      'شما باید تعیین کنید که این رسانه از چه نوعی می باشد'
                    " class="fas fa-question-circle"></i>
                </h6>
                <el-select @change="changeGalleryType" v-model="gallery.galleryType" placeholder="انتخاب کنید"
                           style="width: 100%;">
                  <el-option v-for="item in selectType" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <p style="margin-top : 5px !important ; color : red" class="form-err" v-if="validation.galleryType">
                  {{ validation.galleryType.msg }}
                </p>
                <template v-if="$route.params.details !== 'new'">
                  <el-divider/>
                  <h6>
                    تغییر زمان ثبت خبر
                  </h6>
                  <date-picker clearable input-format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"
                               display-format="jYYYY/jMM/jDD HH:mm"
                               v-model="gallery.customDate" type="datetime"/>
                  <p
                      style="margin-top : 5px !important ; color : red"
                      class="form-err"
                      v-if="validation.customDate"
                  >
                    {{ validation.customDate.msg }}
                  </p>
                </template>
<!--                <el-divider/>-->
<!--                <h6>-->
<!--                  انتخاب موضوع پرونده خبری-->
<!--                  <i-->
<!--                      v-c-tooltip="-->
<!--                          'شما می توانید در صورت تمایل این خبر را در یکی از موضوعات پرونده های خبری قرار دهید'-->
<!--                        "-->
<!--                      class="fas fa-question-circle"-->
<!--                  ></i>-->
<!--                </h6>-->
<!--                <el-select-->
<!--                    v-model="gallery.newsFileId"-->
<!--                    placeholder="انتخاب کنید"-->
<!--                    style="width: 100%;"-->
<!--                    filterable-->
<!--                    clearable-->
<!--                >-->
<!--                  <el-option-->
<!--                      v-for="item in filteredSetNewsFile"-->
<!--                      :key="item._id"-->
<!--                      :label="item.title"-->
<!--                      :value="item._id"-->
<!--                  >-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--                <p-->
<!--                    style="margin-top : 5px !important ; color : red"-->
<!--                    class="form-err"-->
<!--                    v-if="validation.newsFileId"-->
<!--                >-->
<!--                  {{ validation.newsFileId.msg }}-->
<!--                </p>-->
                <el-divider/>
                <CCol sm="12">
                  <el-checkbox v-model="gallery.favorite" label="نمایش در قسمت برگزیده ها"/>
                </CCol>
                <CCol sm="12">
                  <el-checkbox v-model="gallery.special" label="نمایش در بالای صفحه"/>
                </CCol>
                <CCol sm="12">
                  <el-checkbox v-model="gallery.publish" label="انتشار رسانه"/>
                </CCol>
                <CCol sm="12">
                  <el-checkbox v-if="gallery.galleryType === 'video'" v-model="gallery.isEmbedded"
                               label="استفاده از فیلمی بارگزاری شده در آپارات"/>
                </CCol>
                <CCol sm="12">
                  <el-checkbox v-model="gallery.showInHome" label="نمایش رسانه در صفحه اصلی"/>
                </CCol>
              </CCol>
            </CRow>
<!--            <CRow>-->
<!--              <CCol lg="6">-->
<!--                -->
<!--              </CCol>-->
<!--              <CCol lg="6">-->
<!--                <el-divider/>-->
<!--                -->
<!--              </CCol>-->
<!--            </CRow>-->
          </CCardBody>
        </CCard>
      </CCol>
      <template v-if="$route.params.details !== 'new'">
        <CCol>
          <CCard>
            <CCardBody>
              <CRow style="text-align: center;">
                <h6 class="mb-3 mr-1">کاور رسانه</h6>
                <el-upload :show-file-list="false" action="/api/admin/gallery/uploadCover" class="avatar-uploader"
                           :headers="{'Authorization' : `Bearer ${$auth.user.token}`}"
                           :data="{galleryId : gallery._id}"
                           :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                           :on-success="fileUploadSuccess"
                           :on-progress="handleProcess" :on-error="fileUploadError">
                  <img v-if="gallery.cover" :src="gallery.thumbCover" class="avatar" alt="">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </CRow>
            </CCardBody>
          </CCard>
        </CCol>
      </template>
      <template v-if="$route.params.details !== 'new' && showSectionUpload">
        <CCol>
          <CCard>
            <CCardBody>
              <CRow style="text-align: center;" v-if="!gallery.isEmbedded">
                <h6 class="mb-3 mr-1">
                  {{ this.gallery.galleryType === 'video' ? 'بارگزاری فیلم' : 'بارگزاری عکس' }}</h6>
                <el-upload :show-file-list="false" action="/api/admin/gallery/uploadFile" class="upload-demo" drag
                           :headers="{'Authorization' : `Bearer ${$auth.user.token}`}"
                           :data="{galleryId : gallery._id , fileType : gallery.galleryType}"
                           :multiple="this.gallery.galleryType!=='video'"
                           :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                           :on-success="fileUploadSuccess" :on-progress="handleProcess" :on-error="fileUploadError">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">یک فایل را بکشید یا <em>برای آپلود کلیک کنید</em></div>
                  <div class="el-upload__tip" slot="tip">
                    {{
                      this.gallery.galleryType === 'video' ? 'فیلم نباید بیشتر از 20 مگابایت باشد و دارای فرمت mp4 باشد' : 'عکس 600*300 باشد. در غیر این صورت اتوماتیک بریده می شود'
                    }}
                  </div>
                </el-upload>
              </CRow>
              <CRow style="text-align: center;" v-else>
                <CTextarea
                    :class="validation.embeddedCode ? 'err' : null"
                    label="کد امبدد از سایت آپارات را اینجا وارد کنید (کدآی فریم)"
                    placeholder="کد آی فریم را جای گزاری کنید"
                    :description="validation.embeddedCode ? validation.embeddedCode.msg : null"
                    v-model="gallery.embeddedCode"
                    rows="10"
                />
              </CRow>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
              <template v-if="gallery.embeddedCode">
                <div v-html="gallery.embeddedCode"></div>
              </template>
              <template v-if="gallery.video && !gallery.isEmbedded">
                <el-divider/>
                <video class="mt-3" :poster="gallery.cover" width="100%" height="400" muted controls
                       :src="gallery.video">
                </video>
              </template>
              <template v-else>
                <el-divider/>
                <template v-if="gallery.galleryType === 'image'">
                  <ul class="el-upload-list el-upload-list--picture-card">
                    <li v-for="(image , index) in gallery.thumbImages" :key="index"
                        class="el-upload-list__item is-success"><img
                        :src="image" :alt="image.split('/')[4]"
                        class="el-upload-list__item-thumbnail"><a class="el-upload-list__item-name"><i
                        class="el-icon-document"></i>{{ image.split('/')[4] }}
                    </a><label class="el-upload-list__item-status-label"><i
                        class="el-icon-upload-success el-icon-check"></i></label><i class="el-icon-close"></i>
                      <span class="el-upload-list__item-actions"><span class="el-upload-list__item-preview"
                                                                       @click="handlePictureCardPreview(gallery.images[index])"><i
                          class="el-icon-zoom-in"></i></span><span class="el-upload-list__item-delete"
                                                                   @click="handleRemove(gallery.images[index])"><i
                          class="el-icon-delete"></i></span></span></li>
                  </ul>
                </template>
                <template v-else>
                  <img width="100%" :src="gallery.graphic" alt="" class="">
                </template>
              </template>
              <p style="color : red" class="form-err mt-2" v-if="validation.file">
                {{ validation.file.msg }}
              </p>
            </CCardBody>
          </CCard>
        </CCol>
      </template>
    </CRow>
  </div>
</template>

<script>
import axiosUploadProcess from "@/mixins/axiosUploadProcess";

export default {
  data() {
    return {
      playsinline: true,
      fileList: [],
      selectType: [
        {
          label: "عکس",
          value: "image",
        },
        {
          label: "گرافیک",
          value: "graphic",
        },
        {
          label: "فیلم",
          value: "video",
        }
      ],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      gallery: null,
      validation: {},
      editorConfig: {
        language: "en",
        extraPlugins: ["bidi", "justify"],
      },
      filterParent: null,
      portals: null,
      newsFile: null,
      showSectionUpload: false,
      checkGalleryType: null,
      loading: false,
      inputVisible: false,
      inputValue: ''
    };
  },
  mixins: [axiosUploadProcess],
  computed: {
    title() {
      return this.$route.params.details === "new" ? "افزودن رسانه جدید" : "مشاهده جزئیات رسانه"
    },
    catId: {
      get() {
        if (this.$route.params.details === 'new') {
          return this.gallery.catId
        } else {
          return this.gallery.catId._id
        }
      },
      set(value) {
        if (this.$route.params.details === 'new') {
          this.gallery.catId = value
        } else {
          this.gallery.catId._id = value
        }
      }
    },
    filteredSetNewsFile() {
      return this.newsFile.filter(item => item.modelType === this.gallery.modelType && (this.$route.params.details === 'new' ? item.catId === this.gallery.catId : item.catId === this.gallery.catId._id))
    }
  },
  methods: {
    handleClose(tag) {
      this.gallery.keywords.splice(this.gallery.keywords.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    changePortalVal(value) {
      this.catId = null;
      if (this.$auth.user.specialPermissions.length) {
        this.filterParent = this.parents.filter(
            (item) => item.modelType === value
        ).filter((item) => {
          return this.$auth.user.specialPermissions.includes(item._id)
        });
      } else {
        this.filterParent = this.parents.filter(
            (item) => item.modelType === value
        );
      }
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.gallery.keywords.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    fileUploadSuccess(res, file, fileList) {
      this.loading = false;
      this.$nuxt.refresh();
    },
    handleProcess(err, file, fileList) {
      this.loading = true;
    },
    fileUploadError(err, file, fileList) {
      this.validation = JSON.parse(err.message).validation;
    },
    changeGalleryType(value) {
      this.showSectionUpload = value === this.checkGalleryType;
    },
    handleRemove(file) {
      this.loading = true;
      this.validation = {};
      const data = new FormData();
      data.append("galleryId", this.gallery._id);
      data.append("name", file.split('/')[4]);

      this.$axios
          .post(`/api/admin/gallery/deleteFile`, data, this.axiosConfig)
          .then((response) => {
            this.loading = false;
            this.$message({
              type: "success",
              message: "فایل با موفقیت حذف شد",
            });
            this.$nuxt.refresh();
          })
          .catch((err) => {
            this.loading = false;
            if (err.response.status === 401) {
              return this.$message({
                type: "error",
                message: "لطفا دوباره وارد سیستم شوید.",
              });
            }
            if (err.response.status === 403) {
              return this.$message({
                type: "error",
                message: err.response.data.message,
              });
            }
            if (err.response.status === 500) {
              return this.$message({
                type: "error",
                message: "مشکلی در ارسال درخواست پیش آمده",
              });
            }
            if (err.response.status === 422)
              this.validation = err.response.data.validation;
            else console.log(err.response.data);
          });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file;
      this.dialogVisible = true;
    },
    imagePreview(e) {
      this.gallery.cover = URL.createObjectURL(e.target.files[0]);
    },
    availableCategory(id) {
      return this.$auth.user.permissions.includes('superAdmin') || this.$auth.user.specialPermissions.includes(id)
    },
    post() {
      this.validation = {};
      const data = new FormData();
      data.append("title", this.gallery?.title?.trim());
      data.append("summaryTitle", this.gallery?.summaryTitle?.trim());
      data.append("leadTitle", this.gallery.leadTitle);
      data.append("isEmbedded", this.gallery.isEmbedded);
      data.append("catId", this.catId);
      data.append("priority", this.gallery.priority);
      data.append("showInHome", this.gallery.showInHome);
      data.append("publish", this.gallery.publish);
      data.append("special", this.gallery.special);
      data.append("galleryType", this.gallery.galleryType);
      data.append("modelType", this.gallery.modelType);
      data.append("favorite", this.gallery.favorite);
      data.append("keywords", JSON.stringify(this.gallery.keywords));
      data.append("metaTagDesc", this.gallery?.metaTagDesc || this.gallery?.leadTitle);
      if (this.gallery.newsFileId) {
        data.append("newsFileId", this.gallery.newsFileId);
      }
      this.$axios
          .post(`/api/admin/gallery`, data, this.axiosConfig)
          .then((response) => {
            this.$message({
              type: "success",
              message: "رسانه با موفقیت ایجاد شد.",
            });
            this.$router.push({
              name: "admin-gallery-details",
              params: {
                details: `${response.data._id}`
              },
            });
          })
          .catch((err) => {
            if (err.response.status === 401) {
              return this.$message({
                type: "error",
                message: "لطفا دوباره وارد سیستم شوید.",
              });
            }
            if (err.response.status === 403) {
              return this.$message({
                type: "error",
                message: err.response.data.message,
              });
            }
            if (err.response.status === 500) {
              return this.$message({
                type: "error",
                message: "مشکلی در ارسال درخواست پیش آمده",
              });
            }
            if (err.response.status === 422)
              this.validation = err.response.data.validation;
            else console.log(err.response.data);
          });
    },
    update() {
      this.validation = {};

      const data = new FormData();
      data.append("title", this.gallery?.title?.trim());
      data.append("summaryTitle", this.gallery?.summaryTitle?.trim());
      data.append("leadTitle", this.gallery?.leadTitle?.trim());
      data.append("catId", this.catId);
      data.append("isEmbedded", this.gallery.isEmbedded);
      if (this.gallery.embeddedCode) data.append("embeddedCode", this.gallery.embeddedCode);
      data.append("priority", this.gallery.priority);
      data.append("showInHome", this.gallery.showInHome);
      data.append("publish", this.gallery.publish);
      data.append("special", this.gallery.special);
      data.append("galleryType", this.gallery.galleryType);
      data.append("modelType", this.gallery.modelType);
      data.append("favorite", this.gallery.favorite);
      data.append("keywords", JSON.stringify(this.gallery.keywords));
      data.append("metaTagDesc", this.gallery.metaTagDesc || this.gallery.leadTitle);
      data.append("customDate", this.gallery.customDate);
      if (this.gallery.newsFileId) {
        data.append("newsFileId", this.gallery.newsFileId);
      }
      this.$axios
          .put(`/api/admin/gallery/${this.gallery._id}`, data, this.axiosConfig)
          .then((response) => {
            this.$message({
              type: "success",
              message: "اطلاعات بروزرسانی شد.",
            });
            this.$nuxt.refresh();
          })
          .catch((err) => {
            if (err.response.status === 401) {
              return this.$message({
                type: "error",
                message: "لطفا دوباره وارد سیستم شوید.",
              });
            }
            if (err.response.status === 403) {
              return this.$message({
                type: "error",
                message: err.response.data.message,
              });
            }
            if (err.response.status === 500) {
              return this.$message({
                type: "error",
                message: "مشکلی در ارسال درخواست پیش آمده",
              });
            }
            if (err.response.status === 422)
              this.validation = err.response.data.validation;
            else console.log(err.response.data);
          });
    },
  },
  head() {
    return {
      title: this.title,
    };
  },
  layout: "admin",
  async asyncData({$axios, $auth, params, query, error}) {
    try {
      const portals = await $axios.get("/api/admin/portals" , {process : false});
      const parents = await $axios.get("/api/admin/category/getParent" , {
        params: {
          type: "news",
        }
      });
      const newsFile = await $axios.get(`/api/admin/newsFile`, {progress: false})

      var setModelType =
          $auth.user.portals.length !== 1 ?
              $auth.user.portals :
              $auth.user.portals[0];

      const setFilterParent =
          $auth.user.portals.length !== 1
              ? null
              : parents.data.filter(
              (item) => item.modelType === $auth.user.portals[0]
              );

      if (params.details !== "new") {
        const gallery = await $axios.get(`/api/admin/gallery/${params.details}`);

        return {
          portals: portals.data,
          gallery: gallery.data,
          parents: parents.data,
          filterParent: parents.data,
          newsFile: newsFile.data,
          showSectionUpload: true,
          checkGalleryType: gallery.data.galleryType
        };
      } else {
        return {
          portals: portals.data,
          parents: parents.data,
          newsFile: newsFile.data,
          filterParent: setFilterParent,
          gallery: {
            title: '',
            summaryTitle: '',
            leadTitle: '',
            catId: $auth.user.specialPermissions,
            priority: 0,
            isEmbedded: false,
            embeddedCode: '',
            showInHome: true,
            siteMap: true,
            special: false,
            publish: true,
            galleryType: '',
            keywords: [],
            favorite: false,
            galleryStatus: false,
            modelType: setModelType,
          },
        };
      }
    } catch (e) {
      if (e?.response?.status === 401) {
        error({
          status: 401,
          message: "لطفا دوباره وارد سیستم شوید.",
        });
      }
      if (e?.response?.status === 403) {
        error({
          status: 403,
          message: e?.response?.data?.message,
        });
      }
      if (e?.response?.status === 500) {
        error({
          status: 500,
          message: "مشکلی در گرفتن اطلاعات پیش آمده",
        });
      } else
        error({
          status: 404,
          message: "رسانه مورد نظر پیدا نشد",
        });
    }
  },
};
</script>
