<template>
  <CHeader fixed with-subheader light>
    <CToggler
        in-header
        class="ml-3 d-lg-none"
        @click="$store.commit('admin/toggleSidebarMobile')"
    />
    <CToggler
        in-header
        class="ml-3 d-md-down-none"
        @click="$store.commit('admin/toggleSidebarDesktop')"
    />
<!--    <CHeaderNav class="">-->
<!--      <CHeaderNavItem class="px-3">-->
<!--        <Branches/>-->
<!--      </CHeaderNavItem>-->
<!--    </CHeaderNav>-->
    <CHeaderNav class="mr-4 mr-auto">
      <TheHeaderDropdownAccnt/>
    </CHeaderNav>
  </CHeader>
</template>

<script>
import Branches from "./widgets/Branches.vue";

export default {
  name: 'TheHeader',
  components: {Branches},
  data() {
    return {
      breadcrumb: [
        {
          text: 'صفحه اصلی',
          to: '/admin'
        },
        {
          text: 'لیست دانلود ها',
          to: {name: 'admin-downloads'}
        },
        {
          text: 'This is a span'
        }
      ]
    }
  },
  methods: {
    playSound() {
      const audio = new Audio(require('@/assets/admin/mp3/bell.mp3').default);
      audio.volume = 1.0;
      audio.play();
    }
  },
  mounted() {
    window.addEventListener('load', function() {
      var audio = new Audio(require('@/assets/admin/mp3/bell.mp3').default);
      audio.muted = true
      audio.play();
    });


    const self = this
    const socket = io('/admin')
    // this.$axios.$get('/api/admin/pager')
    //     .then(resp => {
    //
    //     })


    socket.on('order', function (msg) {
      if (msg?.branchId === self.$route?.params?.branch){
        self.playSound()
        self.$notify({
          title: `سفارش جدید`,
          message: `یک سفارش جدید ثبت شد`,
          duration: 0,
          position: 'top-left'
        });
      }
    });
  }
}
</script>
