<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin' }">برگشت به صفحه داشبورد</CButton>
    </CustomSubHeader>

    <CCard>
      <CCardBody>
        <CRow>
          <CCol>
            <nuxt-link :to="{name: 'admin-homePageManagement',query: {portal: 'ostandari'}}">
              <el-button :type="portalQuery === 'ostandari' ? 'success' : 'info'">استانداری</el-button>
            </nuxt-link>
            <nuxt-link :to="{name: 'admin-homePageManagement',query: {portal: 'election'}}">
              <el-button :type="portalQuery === 'election' ? 'success' : 'info'">انتخابات</el-button>
            </nuxt-link>
          </CCol>
        </CRow>
      </CCardBody>
    </CCard>

    <CCard>
      <CCardBody>
        <CRow>
          <CCol>
            <div class="homePageTemplate">

              <section class="s1">
                <div class="container">
                  <div class="row">
                    <div class="col-12">
                      <div class="imgBox">
                        <img src="~/assets/admin/img/homePageTemplate/s1.jpg" alt="">
                        <div class="elementTemp">
                          <div class="relativePos">
                            <div class="txtBox">
                              <h2>
                                <span> اسلایدر </span>
                                <span v-if="portalQuery === 'ostandari'">(استانداری)</span>
                                <span v-else>(انتخابات)</span>
                              </h2>
                              <p class="description">
                                <span>از منوی </span>
                                <nuxt-link :to="{name: 'admin-slider'}">"تنظیمات > مدیریت اسلایدر"</nuxt-link>
                                <span>برای تغییر این بخش استفاده کنید</span>
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </section>

              <div class="otherSections">
                <div class="container">
                  <div class="row">
                    <main class="col-10">

                      <section class="s2">
                        <div class="imgBox">
                          <img src="~/assets/admin/img/homePageTemplate/s2.jpg" alt="">
                          <div class="elementTemp">
                            <div class="relativePos">
                              <div class="txtBox">
                                <h2>
                                  <span> قسمت دوم </span>
                                  <span v-if="portalQuery === 'ostandari'">(استانداری)</span>
                                  <span v-else>(انتخابات)</span>
                                </h2>
                                <div class="list">
                                  <el-select v-model="homePage.s2" filterable :popper-append-to-body="false">
                                    <el-option value="" label="همه"></el-option>
                                    <el-option v-for="item in filteredCategories" :key="item._id + 1" :value="item._id" :label="item.title"></el-option>
                                  </el-select>
                                  <el-button size="small" class="mr-1" type="success" @click="update">بروزرسانی</el-button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </section>

                      <section class="s3">
                        <div class="imgBox">
                          <img src="~/assets/admin/img/homePageTemplate/s3.jpg" alt="">
                          <div class="elementTemp">
                            <div class="relativePos">
                              <div class="txtBox">
                                <h2>
                                  <span> قسمت سوم </span>
                                  <span v-if="portalQuery === 'ostandari'">(استانداری)</span>
                                  <span v-else>(انتخابات)</span>
                                </h2>
                                <div class="list">
                                  <el-select v-model="homePage.s3" filterable :popper-append-to-body="false">
                                    <el-option value="" label="همه"></el-option>
                                    <el-option v-for="item in filteredCategories" :key="item._id + 2" :value="item._id" :label="item.title"></el-option>
                                  </el-select>
                                  <el-button size="small" class="mr-1" type="success" @click="update">بروزرسانی</el-button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </section>

                      <section class="s4">
                        <div class="imgBox">
                          <img src="~/assets/admin/img/homePageTemplate/s4.jpg" alt="">
                          <div class="elementTemp">
                            <div class="relativePos">
                              <div class="txtBox">
                                <h2>
                                  <span> قسمت چهارم </span>
                                  <span v-if="portalQuery === 'ostandari'">(استانداری)</span>
                                  <span v-else>(انتخابات)</span>
                                </h2>
                                <div class="list">
                                  <el-select v-model="homePage.s4" filterable :popper-append-to-body="false">
                                    <el-option v-for="item in filteredRootParents" :key="item._id + 3" :value="item._id" :label="item.title"></el-option>
                                  </el-select>
                                  <el-button size="small" class="mr-1" type="success" @click="update">بروزرسانی</el-button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </section>

                      <section class="s5">
                        <div class="imgBox">
                          <img src="~/assets/admin/img/homePageTemplate/s5.jpg" alt="">
                          <div class="elementTemp">
                            <div class="relativePos">
                              <div class="txtBox">
                                <h2>
                                  <span> قسمت پنجم </span>
                                  <span v-if="portalQuery === 'ostandari'">(استانداری)</span>
                                  <span v-else>(انتخابات)</span>
                                </h2>
                                <div class="list">
                                  <el-select v-model="homePage.s5" filterable :popper-append-to-body="false" multiple>
                                    <el-option v-for="item in filteredRootParents" :key="item._id + 4" :value="item._id" :label="item.title"></el-option>
                                  </el-select>
                                  <el-button size="small" class="mr-1" type="success" @click="update">بروزرسانی</el-button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </section>

                      <section class="s6">
                        <div class="imgBox">
                          <img src="~/assets/admin/img/homePageTemplate/s6.jpg" alt="">
                          <div class="elementTemp">
                            <div class="relativePos">
                              <div class="txtBox">
                                <h2>
                                  <span> قسمت ششم </span>
                                  <span v-if="portalQuery === 'ostandari'">(استانداری)</span>
                                  <span v-else>(انتخابات)</span>
                                </h2>
                                <div class="list">
                                  <el-select v-model="homePage.s6" filterable :popper-append-to-body="false">
                                    <el-option value="" label="همه"></el-option>
                                    <el-option v-for="item in filteredCategories" :key="item._id + 5" :value="item._id" :label="item.title"></el-option>
                                  </el-select>
                                  <el-button size="small" class="mr-1" type="success" @click="update">بروزرسانی</el-button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </section>

                    </main>

                    <aside class="col-2">

                      <section class="s1-side">
                        <div class="imgBox">
                          <img src="~/assets/admin/img/homePageTemplate/s1-side.jpg" alt="">
                          <div class="elementTemp">
                            <div class="relativePos">
                              <div class="txtBox">
                                <h2>استاندار</h2>
                                <p class="description">
                                  <span>از منوی </span>
                                  <nuxt-link :to="{name: 'admin-contents-details',params: {details: 'manager'}}">"تنظیمات > استاندار"</nuxt-link>
                                  <span>برای تغییر این بخش استفاده کنید</span>
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </section>

                      <section class="s2-side">
                        <div class="imgBox">
                          <img src="~/assets/admin/img/homePageTemplate/s2-side.jpg" alt="">
                          <div class="elementTemp">
                            <div class="relativePos">
                              <div class="txtBox">
                                <h2>
                                  <span> گرازش تصویری </span>
                                  <span v-if="portalQuery === 'ostandari'">(استانداری)</span>
                                  <span v-else>(انتخابات)</span>
                                </h2>
                                <div class="list">
                                  <el-select v-model="homePage.s2Side" filterable :popper-append-to-body="false">
                                    <el-option value="" label="همه"></el-option>
                                    <el-option v-for="item in filteredCategories" :key="item._id + 6" :value="item._id" :label="item.title"></el-option>
                                  </el-select>
                                  <el-button size="small" class="mr-1" type="success" @click="update">بروزرسانی</el-button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </section>

                      <section class="s3-side">
                        <div class="imgBox">
                          <img src="~/assets/admin/img/homePageTemplate/s3-side.jpg" alt="">
                          <div class="elementTemp">
                            <div class="relativePos">
                              <div class="txtBox">
                                <h2>
                                  <span> فیلم ها </span>
                                  <span v-if="portalQuery === 'ostandari'">(استانداری)</span>
                                  <span v-else>(انتخابات)</span>
                                </h2>
                                <div class="list">
                                  <el-select v-model="homePage.s3Side" filterable :popper-append-to-body="false">
                                    <el-option value="" label="همه"></el-option>
                                    <el-option v-for="item in filteredCategories" :key="item._id + 7" :value="item._id" :label="item.title"></el-option>
                                  </el-select>
                                  <el-button size="small" class="mr-1" type="success" @click="update">بروزرسانی</el-button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </section>

                      <section class="s4-side">
                        <div class="imgBox">
                          <img src="~/assets/admin/img/homePageTemplate/s4-side.jpg" alt="">
                          <div class="elementTemp">
                            <div class="relativePos">
                              <div class="txtBox">
                                <h2>
                                  <span> گرافیک ها </span>
                                  <span v-if="portalQuery === 'ostandari'">(استانداری)</span>
                                  <span v-else>(انتخابات)</span>
                                </h2>
                                <div class="list">
                                  <el-select v-model="homePage.s4Side" filterable :popper-append-to-body="false">
                                    <el-option value="" label="همه"></el-option>
                                    <el-option v-for="item in filteredCategories" :key="item._id + 8" :value="item._id" :label="item.title"></el-option>
                                  </el-select>
                                  <el-button size="small" class="mr-1" type="success" @click="update">بروزرسانی</el-button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </section>

                      <section class="s5-side">
                        <div class="imgBox">
                          <img src="~/assets/admin/img/homePageTemplate/s5-side.jpg" alt="">
                          <div class="elementTemp">
                            <div class="relativePos">
                              <div class="txtBox">
                                <h2>
                                  <span> مطالب ویژه و اطلاعیه ها</span>
                                  <span v-if="portalQuery === 'ostandari'">(استانداری)</span>
                                  <span v-else>(انتخابات)</span>
                                </h2>
                                <div class="list">
                                  <el-select v-model="homePage.s5Side" filterable :popper-append-to-body="false">
                                    <el-option value="" label="همه"></el-option>
                                    <el-option v-for="item in filteredCategories" :key="item._id + 9" :value="item._id" :label="item.title"></el-option>
                                  </el-select>
                                  <el-button size="small" class="mr-1" type="success" @click="update">بروزرسانی</el-button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </section>


                      <section class="s6-side">
                        <div class="imgBox">
                          <img src="~/assets/admin/img/homePageTemplate/s6-side.jpg" alt="">
                          <div class="elementTemp">
                            <div class="relativePos">
                              <div class="txtBox">
                                <h2>
                                  <span> آخرین اخبار </span>
                                  <span v-if="portalQuery === 'ostandari'">(استانداری)</span>
                                  <span v-else>(انتخابات)</span>
                                </h2>
                                <div class="list">
                                  <el-select v-model="homePage.s6Side" filterable :popper-append-to-body="false">
                                    <el-option value="" label="همه"></el-option>
                                    <el-option v-for="item in filteredCategories" :key="item._id + 10" :value="item._id" :label="item.title"></el-option>
                                  </el-select>
                                  <el-button size="small" class="mr-1" type="success" @click="update">بروزرسانی</el-button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </section>

                      <section class="s7-side">
                        <div class="imgBox">
                          <img src="~/assets/admin/img/homePageTemplate/s7-side.jpg" alt="">
                          <div class="elementTemp">
                            <div class="relativePos">
                              <div class="txtBox">
                                <h2>پیوند ها</h2>
                                <p class="description">
                                  <span>از منوی </span>
                                  <nuxt-link :to="{name: 'admin-links'}">"تنظیمات > مدیریت پیوند ها"</nuxt-link>
                                  <span>برای تغییر این بخش استفاده کنید</span>
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </section>

                    </aside>
                  </div>
                </div>
              </div>
            </div>
          </CCol>
        </CRow>
      </CCardBody>
    </CCard>

  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'مدیریت صفحه اصلی سایت',
      categories: null,
      rootParents: null,
      homePage: null
    }
  },
  computed: {
    portalQuery() {
      return this.$route.query.portal
    },
    filteredCategories() {
      return this.categories.filter(item => item.modelType === this.portalQuery)
    },
    filteredRootParents() {
      return this.rootParents.categories.filter(item => item.modelType === this.portalQuery)
    }
  },
  watch: {
    portalQuery(newVal, oldVal) {
      this.$nuxt.refresh()
    }
  },
  methods: {
    update() {
      this.$axios
          .post(`/api/admin/homePageSettings?portal=${this.portalQuery}`, this.homePage)
          .then((response) => {
            this.$message({
              type: "success",
              message: "اطلاعات بروزرسانی شد.",
            });
          })
          .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.$message({
                type: 'warning',
                message: 'پارامترها رو بررسی کنید'
              })
              this.validation = err.response.data.validation;
            } else console.log(err.response.data);
          });
    }
  },
  head() {
    return {
      title: this.title,
    }
  },
  layout: "admin",
  async asyncData({$axios, error, query}) {
    try {
      const categories = await $axios.get('/api/admin/category/getParent')
      const rootParents = await $axios.get('/api/public/getMenu')
      const homePage = await $axios.get(`/api/admin/homePageSettings`, {params: {portal: query.portal}})
      return {
        categories: categories.data,
        rootParents: rootParents.data,
        homePage: homePage.data
      }
    } catch (e) {
      error({status: 500, message: ''})
    }
  }
}
</script>
