<template>
  <v-app>
    <v-card title="Devices" flat>
      <template #text>
        <v-text-field
          v-model="search"
          label="Search"
          prepend-inner-icon="mdi-magnify"
          variant="outlined"
          hide-details
          single-line
        />
      </template>

      <v-data-table
        v-model="checkedDevices"
        :items="devices"
        :items-per-page-options="[
          {value: 5, title: '5'},
          {value: 10, title: '10'},
          {value: 25, title: '25'},
          {value: -1, title: 'All'},
        ]"
        :search="search"
        density="compact"
        item-id="id"
        item-value="text"
        items-per-page="5"
        select-strategy="all"
        show-select
        sticky
      />
    </v-card>
  </v-app>
</template>

<script>
  export default {
    name: 'AddEditInitiatives',
    data () {
      return {
        search: '',
        devices: [],
        checkedDevices: [],
      }
    },

    /* watch: {
      checkedDevices: val => {
        console.log(`Watch: ${val.join(', ')}`)
      },
    }, */
    mounted () {
      this.getDevices()
    },

    methods: {
      getDevices () {
        for (let i = 0; i < 10000; i++) {
          this.devices.push({
            id: i + 1,
            text: `Device ${i + 1}`,
            info: {
              serial: `#123456789-${i + 1}`,
              type: 'Phone',
              os: Math.random() > 0.5 ? 'Android' : 'IPhone',
              version: 10 * Math.random(),
              status: Math.random() > 0.5 ? 'Active' : 'Inactive',
            },
          })
        }
      },
    },
  }
</script>