<script>
import { defineComponent, reactive, computed, ref } from 'vue';
import vueTable from '@/components/plugins/VueTable.vue';
import axios from 'axios';

const searchTerm = ref('');

export default {
    data () {
		const data = reactive([]);

    for (let i = 0; i < 126; i++) {
      data.push({
        id: i,
        name: "TEST" + i,
        email: "test" + i + "@example.com",
      });
    }

    // Table config
    const table = reactive({
      columns: [
        {
          label: "ID",
          field: "id",
          width: "3%",
          sortable: true,
          isKey: true,
        },
        {
          label: "Name",
          field: "name",
          width: "10%",
          sortable: true,
        },
        {
          label: "Email",
          field: "email",
          width: "15%",
          sortable: true,
        },
      ],
      rows: computed(() => {
        return data.filter(
          (x) =>
            x.email.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
            x.name.toLowerCase().includes(searchTerm.value.toLowerCase())
        );
      }),
      totalRecordCount: computed(() => {
        return table.rows.length;
      }),
      sortable: {
        order: "id",
        sort: "asc",
      },
    });

		return {
			code1: '',
			table,
			searchTerm
		}
	},
	components: {
		vueTable: vueTable
	},
}
</script>
<template>
	<card>
		<card-body>
			<div style="text-align: left">
				<label>SearchBy:</label><input v-model="searchTerm" />
			</div>
			<vue-table class="vue-table"
				:is-static-mode="true"
				:columns="table.columns"
				:rows="table.rows"
				:total="table.totalRecordCount"
				:sortable="table.sortable" />
		</card-body>
		<highlightjs :code="code1" />
	</card>
</template>