<template>
  <div v-if="loading">
    <div class="row">
      <div class="col-9 col-md-9 col-sm-12 col-xs-12">
        <q-skeleton height="90px" class="q-ma-md q-ml-xl rounded-borders" />

        <div class="q-ma-lg q-ml-xl">
          <q-skeleton width="40%" height="30px" />
        </div>
        <div class="column skeleton q-ml-xl">
          <q-skeleton type="text" width="80%" />
          <q-skeleton type="text" width="78%" />
          <q-skeleton type="text" width="65%" />
          <q-skeleton type="text" width="55%" />
          <q-skeleton type="text" width="80%" />
          <q-skeleton type="text" width="70%" />
          <q-skeleton type="text" width="67%" />
          <q-skeleton type="text" width="78%" />
          <q-skeleton type="text" width="65%" />
          <q-skeleton type="text" width="55%" />
          <q-skeleton type="text" width="80%" />
          <q-skeleton type="text" width="70%" />
          <q-skeleton type="text" width="67%" />
          <q-skeleton type="text" width="78%" />
          <q-skeleton type="text" width="65%" />
          <q-skeleton type="text" width="55%" />
        </div>
      </div>
      <div class="col-3 col-md-3 col-sm-12 col-xs-12">
        <div class="flex flex-center q-my-xs">
          <q-skeleton width="95%" height="540px" class="bg-white">
            <div class="column skeleton">
              <q-skeleton height="160px" width="250px" class="q-ma-md q-ml-xl" />
              <br />
              <q-skeleton type="text" width="80%" />
              <q-skeleton type="text" width="78%" />
              <q-skeleton type="text" width="65%" />
              <q-skeleton type="text" width="67%" />
              <q-skeleton type="text" width="40%" />
              <q-skeleton type="rect" width="70%" />
              <br />
              <q-skeleton height="110px" width="200px" class="q-ma-md q-ml-xl" />
            </div>
          </q-skeleton>
        </div>
      </div>
    </div>
    <div style="height: 46px;"></div>
  </div>
  <q-page v-else>
    <section>
      <div class="row">
        <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12">
          <left-contents :page="page"/>
          <comments :page="page"/>
        </div>
        <!-- end of col-9 -->
        <div class="col-3 col-md-3 col-sm-12 col-xs-12">
          <right-contents :right_content="page.right_content" :qbank="page.qbank"/>
        </div>
      </div>
      <!-- end of row -->
    </section>
  </q-page>
</template>

<script>
import { skeleton } from "../mixins/SkeletonMixin.js";
export default {
  mixins: [skeleton],
  props: ["slug"],
  data() {
    return {
      page: {
        comments: [],
        right_content: {
          id: null,
          name: "",
          content: "",
        },
        qbank:{
          slug:'',
          name:'',
          image:'',
          description:''
        },
        archive:{
          name:'',
          content:''
        }
      },
      timezone: "",
    };
  },
  computed:{
    pageSlug(){
      return this.slug.split('.')[0];
    }
  },
  mounted() {
    this.getPageDetails();
  },
  components: {
    "left-contents": () => import("components/LeftContents.vue"),
    "right-contents": () => import("components/RightContents.vue"),
    comments: () => import("components/Comments.vue"),
  },
  methods: {
    getLocalTimezone() {
      var timezone = moment.tz.guess();
      if (!timezone) {
        return "Asia/Dubai";
      }
      return timezone;
    },

    getLocalTime: function (date) {
      return moment
        .utc(date, "YYYY-MM-DD HH:mm:ss")
        .clone()
        .tz(this.timezone)
        .format("HH:mm:ss");
    },
    parseDateTime: function (date) {
      let t = moment.utc(date, "YYYY-MM-DD HH:mm:ss").clone().tz(this.timezone);
      let now = moment();
      return t.from(now);
    },
    getPageDetails: function () {
      axios.get("/page/" + this.pageSlug).then((res) => {
        this.page = res.data.page;
       this.hideSkeletonLoader();
      })
      .catch((e) => {
        this.hideSkeletonLoader();
        this.$router.replace({name:'notFound'});
        
      });
    },
    truncate(str, no_words) {
      return str.split(" ").splice(0, no_words).join(" ");
    },
  },
};
</script>
<style lang="css" scoped>
.borders {
  border: 1px solid red;
}

.links-blue a {
  text-decoration: none;
  color: #0059ff;
  font-weight: bold;
}
.links-blue a:hover {
  color: #000bac;
  text-decoration: underline;
}

.ul-style {
  list-style-type: none;
  margin-left: 0px;
}
.ul-style li {
  padding: 2px 0px;
}
.ul-style a {
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  color: #29589e;
}
.ul-style a:hover {
  text-decoration: underline;
}
.font-size {
  font-size: 18px;
}

.line-height .q-skeleton {
  margin: 12px 0;
}

.fix-top {
  position: fixed;
}
.width {
  width: 60%;
}
.skeleton .q-skeleton {
  padding: 5px 0px;
  margin: 0 10px;
}
.info-card {
  width: 100%;
  max-width: 30vw;
  max-height: auto;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .font-size {
    font-size: 14px;
  }

  .fix-top {
    position: relative !important;
  }
  .width {
    width: 90%;
  }
  .info-card {
    width: 100%;
    max-width: 96%;
    max-height: 320px;
  }
}
</style>
