<template>
  <div class="page">
    <Nuxt v-if="ready" />
    <Modal @close="showmodal = undefined" v-bind="showmodal" v-if="showmodal"></Modal>
    <SnackBar @close="snackbar = undefined" v-bind="snackbar" v-if="snackbar" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      ready: false,
      company: this.$companyInfo(),
    };
  },
  head() {
    return {
      title: `${this.company.name}`,
    };
  },
  async created() {
    let connlist = this.$readyapi(['registermethod', 'authmethod', 'usertype', 'authstatus', 'common']);
    let filter = connlist.filter((v) => !v.ready);
    let result = filter.length > 0 ? await this.$getapi(filter) : undefined;
    if (this.result === 'error') {
      this.$dialog({
        width: '500px',
        icon: 'mdi mdi-alert-circle',
        content: 'Đã có lỗi xảy ra khi kết nối dữ liệu. Vui lòng thử lại sau ít phút',
        type: 'is-danger',
        progress: true,
        duration: 6,
      });
    } else this.ready = true;
  },
  mounted() {
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (this.$empty(this.ismobile)) this.ismobile = width < 1024 ? true : false;
    if (this.$empty(this.viewport)) {
      if (width <= 768) this.viewport = 1; //'mobile'
      else if (width >= 769 && width <= 1023) this.viewport = 2; //'tablet'
      else if (width >= 1024 && width <= 1215) this.viewport = 3; //'desktop'
      else if (width >= 1216 && width <= 1407) this.viewport = 4; //'widescreen'
      else if (width >= 1408) this.viewport = 5; //'fullhd'
    }
    if (this.$route.query.link) this.$store.commit('updateLink', { link: this.$route.query.link });
    if (this.$route.query.iframe) this.$store.commit('updateStore', { name: 'iframe', data: this.$route.query.iframe });
  },
  computed: {
    ismobile: {
      get: function () {
        return this.$store.state.ismobile;
      },
      set: function (val) {
        this.$store.commit('updateIsMobile', { ismobile: val });
      },
    },
    showmodal: {
      get: function () {
        return this.$store.state['showmodal'];
      },
      set: function (val) {
        this.$store.commit('updateStore', { name: 'showmodal', data: val });
      },
    },
    snackbar: {
      get: function () {
        return this.$store.state['snackbar'];
      },
      set: function (val) {
        this.$store.commit('updateStore', { name: 'snackbar', data: val });
      },
    },
    viewport: {
      get: function () {
        return this.$store.state.viewport;
      },
      set: function (val) {
        this.$store.commit('updateViewPort', { viewport: val });
      },
    },
  },
};
</script>
