<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="success" class="mr-auto" @click="update">بروزرسانی</CButton>
    </CustomSubHeader>
    <CCard>
      <CCardBody>
        <CRow>
          <CCol>
            <img :src="yearBanner.mainCover" alt="" style="width: 100%;">
            <p v-if="validation.mainCover">{{ validation.mainCover.msg }}</p>
            <input type="file" ref="file" @change="imagePreview">
            <el-divider></el-divider>
            <el-checkbox label="نمایش پرچم ایران" v-model="yearBanner.iranFlag"/>
          </CCol>
        </CRow>
      </CCardBody>
    </CCard>
  </div>
</template>

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

export default {
  data() {
    return {
      title: 'تغییر تصویر شعار سال در هدر',
      yearBanner: null,
      validation: {}
    }
  },
  mixins: [axiosUploadProcess],
  methods: {
    imagePreview(e) {
      this.yearBanner.mainCover = URL.createObjectURL(e.target.files[0]);
    },
    update() {
      this.validation = {}
      const data = new FormData()
      data.append('mainCover', this.$refs.file.files[0])
      data.append('iranFlag', this.yearBanner.iranFlag)
      data.append('electionBtn', this.yearBanner.electionBtn)
      // socialLinks
      data.append('hasEmail', this.yearBanner.hasEmail)
      data.append('hasGPlus', this.yearBanner.hasGPlus)
      data.append('hasTweeter', this.yearBanner.hasTweeter)
      data.append('hasInstagram', this.yearBanner.hasInstagram)
      data.append('email', this.yearBanner.email)
      data.append('gPlus', this.yearBanner.gPlus)
      data.append('tweeter', this.yearBanner.tweeter)
      data.append('instagram', this.yearBanner.instagram)

      this.$axios.post('/api/admin/yearBanner', data, this.axiosConfig)
          .then(res => {
            this.$message({
              type: 'success',
              message: 'تغییرات با موفقیت انجام شد'
            })
            this.$refs.file.value = null
            this.$nuxt.refresh()
          })
          .catch(err => {
            if (err.response?.status === 422) {
              this.validations = err.response.data.validation
              this.$message({
                type: 'warning',
                message: 'پارامترها را بررسی کنید'
              })
            } else console.log(e)
          })
    }
  },
  head() {
    return {
      title: this.title,
    };
  },
  layout: "admin",
  async asyncData({$axios, error}) {
    try {
      const yearBanner = await $axios.get('/api/public/yearBanner')
      return {
        yearBanner: yearBanner.data
      }
    } 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>
