<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
    </CustomSubHeader>

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

    <!--------------------------------------------- section s2 --------------------------------------------->
    <CCard>
      <CCardHeader>
        <slot name="header">
          <i class="fal fa-bars"></i>
          <span>اخبار قسمت دوم</span>
        </slot>
        <slot></slot>
      </CCardHeader>
      <CCardBody>
        <el-table
            :data="homeItems.s2"
            :default-sort="{ prop: 'date', order: 'descending' }"
            key="tableS2"
            style="width: 100%">
          <el-table-column
              type="index"
              label="#">
          </el-table-column>

          <el-table-column
              label="تصویر"
              width="200">
            <template slot-scope="scope">
              <img :src="scope.row.thumbCover" alt="" style="width: 100%;">
            </template>
          </el-table-column>

          <el-table-column
              prop="title"
              label="عنوان">
          </el-table-column>

          <el-table-column
              label="تاریخ ایجاد"
              width="">
            <template slot-scope="scope">
              <span>{{ jDate(scope.row.created_at) }}</span>
            </template>
          </el-table-column>

          <el-table-column
              label="ویرایش"
              width="75"
              align="center">
            <template slot-scope="scope">
              <CButton color="warning" variant="outline" @click="removeFromHome('news',scope.row._id)">
                <i class="far fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
    <!--------------------------------------------- section s2 --------------------------------------------->


    <!--------------------------------------------- section s3 --------------------------------------------->
    <CCard>
      <CCardHeader>
        <slot name="header">
          <i class="fal fa-bars"></i>
          <span>پرونده های خبری قسمت سوم</span>
        </slot>
        <slot></slot>
      </CCardHeader>
      <CCardBody>
        <el-table
            :data="homeItems.s3"
            key="tableS3"
            style="width: 100%"
        >
          <el-table-column
              type="index"
              label="#">
          </el-table-column>

          <el-table-column
              prop="title"
              label="عنوان">
          </el-table-column>

          <el-table-column
              label="تاریخ ایجاد"
              width="">
            <template slot-scope="scope">
              <span>{{ jDate(scope.row.created_at) }}</span>
            </template>
          </el-table-column>

          <el-table-column
              label="ویرایش"
              width="75"
              align="center">
            <template slot-scope="scope">
              <CButton color="warning" variant="outline" @click="removeFromHome('newsFile',scope.row._id)">
                <i class="far fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
    <!--------------------------------------------- section s3 --------------------------------------------->


    <!--------------------------------------------- section s4 --------------------------------------------->
    <CCard>
      <CCardHeader>
        <slot name="header">
          <i class="fal fa-bars"></i>
          <span>اخبار قسمت چهارم</span>
        </slot>
        <slot></slot>
      </CCardHeader>
      <CCardBody>
        <el-table
            :data="homeItems.s4.news"
            style="width: 100%"
            key="tableS4"
        >
          <el-table-column
              type="index"
              label="#">
          </el-table-column>

          <el-table-column
              label="تصویر"
              width="200">
            <template slot-scope="scope">
              <img :src="scope.row.thumbCover" alt="" style="width: 100%;">
            </template>
          </el-table-column>

          <el-table-column
              prop="title"
              label="عنوان">
          </el-table-column>

          <el-table-column
              label="تاریخ ایجاد"
              width="">
            <template slot-scope="scope">
              <span>{{ jDate(scope.row.created_at) }}</span>
            </template>
          </el-table-column>

          <el-table-column
              label="ویرایش"
              width="75"
              align="center">
            <template slot-scope="scope">
              <CButton color="warning" variant="outline" @click="removeFromHome('news',scope.row._id)">
                <i class="far fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
    <!--------------------------------------------- section s4 --------------------------------------------->


    <!--------------------------------------------- section s5 --------------------------------------------->
    <CCard
        v-for="(item,index) in homeItems.s5"
        :key="'CCardItem'+index"
    >
      <CCardHeader>
        <slot name="header">
          <i class="fal fa-bars"></i>
          <span>اخبار قسمت پنجم ({{ item.nameTag }}) </span>
        </slot>
        <slot></slot>
      </CCardHeader>
      <CCardBody>
        <el-table
            :data="item.news"
            style="width: 100%"
            :key="'tableS5'+index"
        >
          <el-table-column
              type="index"
              label="#">
          </el-table-column>

          <el-table-column
              prop="title"
              label="عنوان">
          </el-table-column>

          <el-table-column
              label="تاریخ ایجاد"
              width="">
            <template slot-scope="scope">
              <span>{{ jDate(scope.row.created_at) }}</span>
            </template>
          </el-table-column>

          <el-table-column
              label="ویرایش"
              width="75"
              align="center">
            <template slot-scope="scope">
              <CButton color="warning" variant="outline" @click="removeFromHome('news',scope.row._id)">
                <i class="far fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
    <!--------------------------------------------- section s5 --------------------------------------------->


    <!--------------------------------------------- section s6 --------------------------------------------->
    <CCard>
      <CCardHeader>
        <slot name="header">
          <i class="fal fa-bars"></i>
          <span>اخبار قسمت ششم</span>
        </slot>
        <slot></slot>
      </CCardHeader>
      <CCardBody>
        <el-table
            :data="homeItems.s6"
            key="tableS6"
            style="width: 100%"
        >
          <el-table-column
              type="index"
              label="#">
          </el-table-column>

          <el-table-column
              label="تصویر"
              width="200">
            <template slot-scope="scope">
              <img :src="scope.row.thumbCover" alt="" style="width: 100%;">
            </template>
          </el-table-column>

          <el-table-column
              prop="title"
              label="عنوان">
          </el-table-column>

          <el-table-column
              label="تاریخ ایجاد"
              width="">
            <template slot-scope="scope">
              <span>{{ jDate(scope.row.created_at) }}</span>
            </template>
          </el-table-column>

          <el-table-column
              label="ویرایش"
              width="75"
              align="center">
            <template slot-scope="scope">
              <CButton color="warning" variant="outline" @click="removeFromHome('news',scope.row._id)">
                <i class="far fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
    <!--------------------------------------------- section s6 --------------------------------------------->


    <!--------------------------------------------- section s2Side --------------------------------------------->
    <CCard>
      <CCardHeader>
        <slot name="header">
          <i class="fal fa-bars"></i>
          <span>خبر گزارش تصویری سایدبار</span>
        </slot>
        <slot></slot>
      </CCardHeader>
      <CCardBody>
        <el-table
            :data="homeItems.s2Side"
            key="tableS6"
            style="width: 100%"
        >
          <el-table-column
              type="index"
              label="#">
          </el-table-column>

          <el-table-column
              label="تصویر"
              width="200">
            <template slot-scope="scope">
              <img :src="scope.row.thumbCover" alt="" style="width: 100%;">
            </template>
          </el-table-column>

          <el-table-column
              prop="title"
              label="عنوان">
          </el-table-column>

          <el-table-column
              label="تاریخ ایجاد"
              width="">
            <template slot-scope="scope">
              <span>{{ jDate(scope.row.created_at) }}</span>
            </template>
          </el-table-column>

          <el-table-column
              label="ویرایش"
              width="75"
              align="center">
            <template slot-scope="scope">
              <CButton color="warning" variant="outline" @click="removeFromHome('media',scope.row._id)">
                <i class="far fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
    <!--------------------------------------------- section s2Side --------------------------------------------->


    <!--------------------------------------------- section s3Side --------------------------------------------->
    <CCard>
      <CCardHeader>
        <slot name="header">
          <i class="fal fa-bars"></i>
          <span>خبر فیلم سایدبار</span>
        </slot>
        <slot></slot>
      </CCardHeader>
      <CCardBody>
        <el-table
            :data="homeItems.s3Side"
            key="tableS6"
            style="width: 100%"
        >
          <el-table-column
              type="index"
              label="#">
          </el-table-column>

          <el-table-column
              label="تصویر"
              width="200">
            <template slot-scope="scope">
              <img :src="scope.row.thumbCover" alt="" style="width: 100%;">
            </template>
          </el-table-column>

          <el-table-column
              prop="title"
              label="عنوان">
          </el-table-column>

          <el-table-column
              label="تاریخ ایجاد"
              width="">
            <template slot-scope="scope">
              <span>{{ jDate(scope.row.created_at) }}</span>
            </template>
          </el-table-column>

          <el-table-column
              label="ویرایش"
              width="75"
              align="center">
            <template slot-scope="scope">
              <CButton color="warning" variant="outline" @click="removeFromHome('media',scope.row._id)">
                <i class="far fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
    <!--------------------------------------------- section s3Side --------------------------------------------->


    <!--------------------------------------------- section s4Side --------------------------------------------->
    <CCard>
      <CCardHeader>
        <slot name="header">
          <i class="fal fa-bars"></i>
          <span>خبر گرافیک سایدبار</span>
        </slot>
        <slot></slot>
      </CCardHeader>
      <CCardBody>
        <el-table
            :data="homeItems.s4Side"
            key="tableS6"
            style="width: 100%"
        >
          <el-table-column
              type="index"
              label="#">
          </el-table-column>

          <el-table-column
              label="تصویر"
              width="200">
            <template slot-scope="scope">
              <img :src="scope.row.thumbCover" alt="" style="width: 100%;">
            </template>
          </el-table-column>

          <el-table-column
              prop="title"
              label="عنوان">
          </el-table-column>

          <el-table-column
              label="تاریخ ایجاد"
              width="">
            <template slot-scope="scope">
              <span>{{ jDate(scope.row.created_at) }}</span>
            </template>
          </el-table-column>

          <el-table-column
              label="ویرایش"
              width="75"
              align="center">
            <template slot-scope="scope">
              <CButton color="warning" variant="outline" @click="removeFromHome('media',scope.row._id)">
                <i class="far fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
    <!--------------------------------------------- section s4Side --------------------------------------------->


    <!--------------------------------------------- section s5Side --------------------------------------------->
    <CCard>
      <CCardHeader>
        <slot name="header">
          <i class="fal fa-bars"></i>
          <span>اخبار مطالب ویژه سایدبار</span>
        </slot>
        <slot></slot>
      </CCardHeader>
      <CCardBody>
        <el-table
            :data="homeItems.s5Side"
            key="tableS6"
            style="width: 100%"
        >
          <el-table-column
              type="index"
              label="#">
          </el-table-column>

          <el-table-column
              label="تصویر"
              width="200">
            <template slot-scope="scope">
              <img :src="scope.row.thumbCover" alt="" style="width: 100%;">
            </template>
          </el-table-column>

          <el-table-column
              prop="title"
              label="عنوان">
          </el-table-column>

          <el-table-column
              label="تاریخ ایجاد"
              width="">
            <template slot-scope="scope">
              <span>{{ jDate(scope.row.created_at) }}</span>
            </template>
          </el-table-column>

          <el-table-column
              label="ویرایش"
              width="75"
              align="center">
            <template slot-scope="scope">
              <CButton color="warning" variant="outline" @click="removeFromHome('news',scope.row._id)">
                <i class="far fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
    <!--------------------------------------------- section s5Side --------------------------------------------->


    <!--------------------------------------------- section s6Side --------------------------------------------->
    <CCard>
      <CCardHeader>
        <slot name="header">
          <i class="fal fa-bars"></i>
          <span>آخرین اخبار سایدبار</span>
        </slot>
        <slot></slot>
      </CCardHeader>
      <CCardBody>
        <el-table
            :data="homeItems.s6Side"
            key="tableS6"
            style="width: 100%"
        >
          <el-table-column
              type="index"
              label="#">
          </el-table-column>

          <el-table-column
              prop="title"
              label="عنوان">
          </el-table-column>

          <el-table-column
              label="تاریخ ایجاد"
              width="">
            <template slot-scope="scope">
              <span>{{ jDate(scope.row.created_at) }}</span>
            </template>
          </el-table-column>

          <el-table-column
              label="ویرایش"
              width="75"
              align="center">
            <template slot-scope="scope">
              <CButton color="warning" variant="outline" @click="removeFromHome('news',scope.row._id)">
                <i class="far fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
    <!--------------------------------------------- section s6Side --------------------------------------------->

  </div>
</template>

<script>
import moment from "moment-jalaali"

export default {
  data() {
    return {
      title: "لیست اخباری روی صفحه اصلی",
      list_title: "لیست",
      links: null,
      homeItems: null
    }
  },
  computed: {
    portalQuery() {
      return this.$route.query.portal
    }
  },
  methods: {
    jDate(date) {
      return moment(date).format("jYYYY/jMM/jDD")
    },
    removeFromHome(type, id) {
      this.$confirm("این مورد از صفحه اصلی قابل مشاهده نباشد؟", "هشدار", {
        confirmButtonText: "بله",
        cancelButtonText: "لغو",
        type: "warning",
      })
          .then(async () => {
            this.$axios.put(`/api/admin/changeShowInHome`, {
              id: id,
              modelName: type
            })
                .then((res) => {
                  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 === 422) {
                    return this.$message({
                      type: "error",
                      message: err.response.data.message,
                    })
                  }
                  console.log(err.response.data);
                })
          })
          .catch(() => {
            this.$message({
              type: "warning",
              message: "عملیات لغو شد",
            })
          })
    },
  },
  watch: {
    portalQuery(newVal, oldVal) {
      this.$nuxt.refresh()
    }
  },
  head() {
    return {
      title: this.title,
    }
  },
  layout: "admin",
  async asyncData({$axios, error, query}) {
    try {
      const homeItems = await $axios.get('/api/public/home', {params: {portal: query.portal}})
      const links = await $axios.get(`/api/admin/links`)
      return {
        links: links.data,
        homeItems: homeItems.data
      }
    } catch (e) {
      if (e?.response?.status === 401) error({status: 401, message: 'شما اجازه دسترسی به این صفحه را ندارید'})
      else error({status: 500, message: "مشکلی در گرفتن اطلاعات بوجود آمده است"})
    }
  },
};
</script>
