<template>
  <div class="vn-pp row justify-center">
    <toolbar>
      <q-badge
        v-if="count != null"
        class="text-subtitle1 q-mr-sm"
        color="secondary">
        {{$t('visitsCount', [count, newCount])}}
      </q-badge>
    </toolbar>
    <q-drawer
      v-model="$state.rightDrawerOpen"
      side="right"
      elevated>
      <div class="q-pa-md">
        <q-input
          :label="$t('fromDate')"
          v-model="from"
          :rules="['date']"
          mask="date">
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy ref="qDateProxyFrom" anchor="bottom left" self="top middle">
                <q-date
                  v-model="from"
                  @input="() => $refs.qDateProxyFrom.hide()"
                  :options="optionsFn"/>
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
        <q-input
          :label="$t('toDate')"
          v-model="to"
          :rules="['date']"
          mask="date">
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy ref="qDateProxyTo" anchor="bottom left" self="top middle">
                <q-date
                  v-model="to"
                  @input="() => $refs.qDateProxyTo.hide()"
                  :options="optionsFn"/>
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </div>
    </q-drawer>
    <div>
      <lb-scroll
        ref="scroll"
        :request="request"
        @data="data = arguments[0]">
        <q-card class="vn-w-md">
          <q-list bordered separator>
            <q-item
              v-for="visit in data"
              :key="visit.browser">
              <q-item-section>
                <q-item-label>
                  {{visit.browser}} {{visit.minVersion}} - {{visit.maxVersion}}
                </q-item-label>
                <q-item-label caption>
                  {{$t('visitsCount', [visit.visits, visit.newVisits])}}
                </q-item-label>
                <q-item-label caption>
                  {{visit.lastVisit | relTime}}
                </q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-card>
      </lb-scroll>
    </div>
    <q-page-sticky position="bottom-right" :offset="[18, 18]">
      <q-btn
        fab
        icon="refresh"
        color="accent"
        @click="$refs.scroll.reload()"
        :title="$t('refresh')"/>
    </q-page-sticky>
  </div>
</template>

<script>
import Page from 'components/Page'
import { date } from 'quasar'

export default {
  name: 'Visits',
  mixins: [Page],
  data () {
    let today = date.formatDate(new Date(), 'YYYY/MM/DD')
    return {
      from: today,
      to: today,
      count: null,
      newCount: null,
      today
    }
  },
  created () {
    this.$state.useRightDrawer = true
  },
  methods: {
    request () {
      return {
        url: 'Visits/listByBrowser',
        params: {
          from: new Date(this.from),
          to: new Date(this.to)
        }
      }
    },
    optionsFn (date) {
      return date <= this.today
    }
  },
  watch: {
    from () {
      this.$refs.scroll.reload()
    },
    to () {
      this.$refs.scroll.reload()
    },
    data () {
      if (this.data) {
        this.count = this.data.reduce((a, i) => a + i.visits, 0)
        this.newCount = this.data.reduce((a, i) => a + i.newVisits, 0)
      } else {
        this.count = null
        this.newCount = null
      }
    }
  }
}
</script>
