<script setup>
import API from '@/api';
import { PATIENT_FILTER_LIST_API } from '@/constants';
import debounce from 'lodash.debounce';
import { onBeforeMount, onMounted, onUnmounted } from 'vue';

import AddPatient from '@/pages/patients/AddPatient.vue';
import EditPatient from '@/pages/patients/EditPatient.vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
// DataTable.use(DataTablesCore);
const store = useStore()
// const route = useRoute()
const isAddCustomerDrawerOpen = ref(false)
const isEditCustomerDrawerOpen = ref(false)
const router = useRouter()
const editDialog = ref(false)
const deleteDialog = ref(false)
// const search = ref('')
const patientRexord = ref([]);
const patientTotalRexord = ref([]);
const search = ref('');
const serverItems = ref([]);
const loading = ref(true);
const totalItems = ref(0);
const first_name1 = ref('');
const defaultItem = ref({
  id: -1,
  avatar: '',
  name: '',
  email: '',
  dob: '',
  phone_no: '',
  address: '',
  city: '',
  state: '',
  country: '',
})

const editedItem = ref(defaultItem.value)
const editedIndex = ref(-1)
const patientList = ref([])
const subcriptionLists = ref(['All'])
const isLoading = ref(false)

const filter = ref({
  gender: 'All',
  state: 'all',
  plan: 'all',
})
// const gender =ref();
// const city =ref();
// const plan =ref();
// status options
const selectedOptions = [
  {
    text: 'Active',
    value: 1,
  },
  {
    text: 'InActive',
    value: 2,
  },

]

const refVForm = ref(null)

onBeforeMount(async () => { });
onMounted(async () => {
  store.dispatch('updateIsLoading', true)
  await store.dispatch('getSubcriptions')
  // await store.dispatch('patientListDataTable')
  await store.dispatch('patientList')

  // console.log('getPatientDataTable',store.getters.getPatientDataTable);
  // patientRexord.value = store.getters.getPatientDataTable.data;
  // patientTotalRexord.value = store.getters.getPatientDataTable.recordsTotal;
  // console.log("patientRexord",patientRexord.value,patientTotalRexord.value );
  // patientList.value = store.getters.getPatientList
  store.dispatch('updateIsLoading', false)

  // loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });

  // document.addEventListener('click', (event) => {
  //   if (event.target.matches('.edit-btn')) {
  //     const id = event.target.getAttribute('data-id');
  //     const item = patientList.value.find(patient => patient.id === parseInt(id));
  //     editItem(item);
  //   } else if (event.target.matches('.delete-btn')) {
  //     const id = event.target.getAttribute('data-id');
  //     const item = patientList.value.find(patient => patient.id === parseInt(id));
  //     deleteItem(item);
  //   }
  // });

});
const handlePatientAdded = async (msg) => {
  if (msg == 'success') {
    store.dispatch('updateIsLoading', true)
    loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
    store.dispatch('updateIsLoading', false)
  }
  // You can also trigger a toast or snackbar here to show the message
  // For example, if using Vuetify:
  // showSnackbar(msg)
}
// const getPatientFilter = async () => {
//   console.log("filter", filter.value.plan, filter.value.gender, filter.value.state);


//   await store.dispatch('PatientFilter', {
//     plan: filter.value.plan,
//     gender: filter.value.gender.toLowerCase(),
//     state: filter.value.state,
//   })
//   store.dispatch('updateIsLoading', false)

// }

const getPatientList = computed(async () => {
  subcriptionLists.value = [];
  patientList.value = [];
  subcriptionLists.value = store.getters.getSubcriptions;
  const allIndex = subcriptionLists.value.findIndex(sub => sub.title.toLowerCase() === 'all');

  // If "All" exists, move it to the beginning
  if (allIndex !== -1) {
    const all = subcriptionLists.value.splice(allIndex, 1)[0];
    subcriptionLists.value.unshift(all);
  } else {
    // If "All" doesn't exist, create it and prepend it
    subcriptionLists.value.unshift({ title: 'All', slug: 'all' });
  }
  console.log("subcriptin", subcriptionLists.value);
  patientList.value = store.getters.getPatientList.map(history => ({
    ...history,
    dob: changeFormat(history.dob),
  }));
  patientList.value.sort((a, b) => {
    return b.id - a.id;
  });
  console.log("patientList",patientList.value);
  return patientList.value

});

onUnmounted(async () => { });
const formatPhoneNumber = () => {
  console.log(editedItem.value)
  // Remove non-numeric characters from the input
  const numericValue = editedItem.value.phone_no.replace(/\D/g, '');

  // Apply formatting logic
  if (numericValue.length <= 10) {
    editedItem.value.phone_no = numericValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
  } else {
    // Limit the input to a maximum of 14 characters
    const truncatedValue = numericValue.slice(0, 10);
    editedItem.value.phone_no = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
  }
};

const resolveStatusVariant = status => {
  if (status === 1)
    return {
      color: 'primary',
      text: 'Current',
    }
  else if (status === 2)
    return {
      color: 'success',
      text: 'Professional',
    }
  else if (status === 3)
    return {
      color: 'error',
      text: 'Rejected',
    }
  else if (status === 4)
    return {
      color: 'warning',
      text: 'Resigned',
    }
  else
    return {
      color: 'info',
      text: 'Applied',
    }
}

const editItem = async (item) => {
  isEditCustomerDrawerOpen.value = true

  await store.dispatch('patientGETBYID', {
    id: item.id,
  })

  editedItem.value = store.getters.getSinglePatient
  console.log(store.getters.getSinglePatient)
  //editDialog.value = true
}

const deleteItem = item => {
  
  console.log('del', item)
  editedIndex.value = patientList.value.indexOf(item)
  editedItem.value = { ...item }
  deleteDialog.value = true
  
}

const close = () => {
  editDialog.value = false
  editedIndex.value = -1
  editedItem.value = { ...defaultItem.value }
}

const closeDelete = () => {
  
  deleteDialog.value = false
  editedIndex.value = -1
  editedItem.value = { ...defaultItem.value }
  loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
}

const getMettings = (Item) => {
  router.push('/admin/patient/meetings/' + Item.id);
}

const save = async () => {
  const { valid } = await refVForm.value.validate()
  console.log(valid)
  if (valid) {
    console.log('editedItem.value', editedItem.value);
    // if (editedIndex.value > -1) {
      await store.dispatch('patientUpdate', {
        id: editedItem.value.id,
        first_name: editedItem.value.first_name,
        last_name: editedItem.value.last_name,
        email: editedItem.value.email,
        phone_no: editedItem.value.phone_no,
        dob: editedItem.value.dob,
      })
      loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
      close();
      // Object.assign(patientList.value[editedIndex.value], editedItem.value)
      
    // } else {
    //   patientList.value.push(editedItem.value)
    // }
     
  }


}

const states = ref([
  { name: 'Alabama', abbreviation: 'AL' },
  { name: 'Alaska', abbreviation: 'AK' },
  { name: 'Arizona', abbreviation: 'AZ' },
  { name: 'Arkansas', abbreviation: 'AR' },
  { name: 'Howland Island', abbreviation: 'UM-84' },
  { name: 'Delaware', abbreviation: 'DE' },
  { name: 'Maryland', abbreviation: 'MD' },
  { name: 'Baker Island', abbreviation: 'UM-81' },
  { name: 'Kingman Reef', abbreviation: 'UM-89' },
  { name: 'New Hampshire', abbreviation: 'NH' },
  { name: 'Wake Island', abbreviation: 'UM-79' },
  { name: 'Kansas', abbreviation: 'KS' },
  { name: 'Texas', abbreviation: 'TX' },
  { name: 'Nebraska', abbreviation: 'NE' },
  { name: 'Vermont', abbreviation: 'VT' },
  { name: 'Jarvis Island', abbreviation: 'UM-86' },
  { name: 'Hawaii', abbreviation: 'HI' },
  { name: 'Guam', abbreviation: 'GU' },
  { name: 'United States Virgin Islands', abbreviation: 'VI' },
  { name: 'Utah', abbreviation: 'UT' },
  { name: 'Oregon', abbreviation: 'OR' },
  { name: 'California', abbreviation: 'CA' },
  { name: 'New Jersey', abbreviation: 'NJ' },
  { name: 'North Dakota', abbreviation: 'ND' },
  { name: 'Kentucky', abbreviation: 'KY' },
  { name: 'Minnesota', abbreviation: 'MN' },
  { name: 'Oklahoma', abbreviation: 'OK' },
  { name: 'Pennsylvania', abbreviation: 'PA' },
  { name: 'New Mexico', abbreviation: 'NM' },
  { name: 'American Samoa', abbreviation: 'AS' },
  { name: 'Illinois', abbreviation: 'IL' },
  { name: 'Michigan', abbreviation: 'MI' },
  { name: 'Virginia', abbreviation: 'VA' },
  { name: 'Johnston Atoll', abbreviation: 'UM-67' },
  { name: 'West Virginia', abbreviation: 'WV' },
  { name: 'Mississippi', abbreviation: 'MS' },
  { name: 'Northern Mariana Islands', abbreviation: 'MP' },
  { name: 'United States Minor Outlying Islands', abbreviation: 'UM' },
  { name: 'Massachusetts', abbreviation: 'MA' },
  { name: 'Connecticut', abbreviation: 'CT' },
  { name: 'Florida', abbreviation: 'FL' },
  { name: 'District of Columbia', abbreviation: 'DC' },
  { name: 'Midway Atoll', abbreviation: 'UM-71' },
  { name: 'Navassa Island', abbreviation: 'UM-76' },
  { name: 'Indiana', abbreviation: 'IN' },
  { name: 'Wisconsin', abbreviation: 'WI' },
  { name: 'Wyoming', abbreviation: 'WY' },
  { name: 'South Carolina', abbreviation: 'SC' },
  { name: 'Arkansas', abbreviation: 'AR' },
  { name: 'South Dakota', abbreviation: 'SD' },
  { name: 'Montana', abbreviation: 'MT' },
  { name: 'North Carolina', abbreviation: 'NC' },
  { name: 'Palmyra Atoll', abbreviation: 'UM-95' },
  { name: 'Puerto Rico', abbreviation: 'PR' },
  { name: 'Colorado', abbreviation: 'CO' },
  { name: 'Missouri', abbreviation: 'MO' },
  { name: 'New York', abbreviation: 'NY' },
  { name: 'Maine', abbreviation: 'ME' },
  { name: 'Tennessee', abbreviation: 'TN' },
  { name: 'Georgia', abbreviation: 'GA' },
  { name: 'Louisiana', abbreviation: 'LA' },
  { name: 'Nevada', abbreviation: 'NV' },
  { name: 'Iowa', abbreviation: 'IA' },
  { name: 'Idaho', abbreviation: 'ID' },
  { name: 'Rhode Island', abbreviation: 'RI' },
  { name: 'Washington', abbreviation: 'WA' },
  { name: 'Ohio', abbreviation: 'OH' },
  { name: 'All', abbreviation: 'all' },
  // ... (add the rest of the states)
]);

const sortedStates = computed(() => {
  const sorted = states.value.slice().sort((a, b) => {
    // Move "All" to the beginning
    if (a.name === 'All') return -1;
    if (b.name === 'all') return 1;
    // Sort other states alphabetically
    return a.name.localeCompare(b.name);
  });
  return sorted;
});

const deleteItemConfirm = async () => {
  console.log('editedIndex.value', editedIndex.value, editedItem.value.id)
  await store.dispatch('patientDelete', {
    id: editedItem.value.id
  })
  closeDelete()
}



const LabKit = (item) => {
  router.push('/admin/patients/labkit/' + item.id);
}

const onSubcriptionChange = async (newvalue) => {
  filter.value.plan = newvalue;
  console.log("Plan", filter.value.plan);
   loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
}
const onGenderChange = async (newvalue) => {
  filter.value.gender = newvalue;
  console.log("gender", filter.value.gender);
  loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
}
// const tableKey = ref(0);
// const dataTableRef = ref(null);
// watch(
//   () => filter.value.gender,
//   (newGender) => {
//     console.log('Gender changed:', newGender);
//     if (dataTableRef.value) {
//       tableKey.value += 1;
//       console.log('dataTableRef:', dataTableRef.value);
//     } else {
//       console.warn('dataTableRef.value is null');
//     }
//   }
// );

// watch(
//   () => filter.value.plan,
//   (newPlan) => {
//     console.log('Plan changed:', newPlan);
//     if (dataTableRef.value) {
//       tableKey.value += 1;
//       console.log('dataTableRef:', dataTableRef.value);
//     } else {
//       console.warn('dataTableRef.value is null');
//     }
//   }
// );
// const onStateChange = async(newvalue)=> {
//   filter.value.state = newvalue;
//   console.log("state",filter.value.state);
//   loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });

// }

const itemsPerPage = ref(30);
const headers = [
  { title: 'ID',  key: 'id' },
  { title: 'NAME',  key: 'first_name' },
  { title: 'Gender',  key: 'gender', align: 'end' },
  { title: 'EMAIL',  key: 'email', align: 'start' },
  { title: 'Date Of Birth',  key: 'dob', align: 'start' },
  { title: 'Last Order',   key: 'last_order_date', searchable:false },
  { title: 'Register Date',   key: 'created_at', align: 'start' },
  { title: 'Total Orders',   key: 'total_orders', align: 'start' ,searchable:false},
  { title: 'Total Subcriptions',   key: 'total_subscriptions', align: 'start',searchable:false },
  {
    title: 'Action',
    key: 'actions',
    searchable:false
  },
];

const loadItems = debounce( async ( { page,  itemsPerPage, sortBy }) =>  {
  const formattedSortBy = sortBy.map(sort => ({
    key: sort.key,
    order: 'desc' // Force descending order
  }));
  const payload = {
    page,
    itemsPerPage,
    sortBy:formattedSortBy,
    filters:{
      gender:filter.value.gender.toLowerCase(),
      plan:filter.value.plan,
      state: 'all'
    },
    search:search.value,
  }
  console.log("records",page, itemsPerPage, sortBy , PATIENT_FILTER_LIST_API);
  loading.value = true;
  const data = await API.getDataTableRecord(PATIENT_FILTER_LIST_API, payload, headers);
  console.log('patientData',data);
  serverItems.value   = data.items;
  totalItems.value = data.total;
  loading.value = false;  
  
},500);




function changeFormat(dateFormat) {
  const dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format
  const year = parseInt(dateParts[0]);
  const month = parseInt(dateParts[1]); // No need for padding
  const day = parseInt(dateParts[2]); // No need for padding

  // Create a new Date object with the parsed values
  const date = new Date(year, month - 1, day); // Month is zero-based in JavaScript Date object

  // Format the date as mm-dd-yyyy
  const formattedDate = month + '-' + day + '-' + date.getFullYear();

  return formattedDate;
}

function formatDate(dateTime) {
      if (!dateTime) return '';

      // Split date and time parts
      const [datePart, timePart] = dateTime.split(' ');

      // Split date into parts
      const [year, month, day] = datePart.split('-').map(Number);

      // Split time into parts
      const [hour, minute, second] = timePart.split(':').map(Number);

      // Format the date and time
      return `${month}-${day}-${year}`;
    }

    function ConvertDateFormate(dateTime) {
      if (!dateTime) return '';

      // Create a Date object from the ISO date string
      const date = new Date(dateTime);

      // Extract day, month, year, hours, and minutes
      const day = String(date.getUTCDate()).padStart(2, '0');
      const month = String(date.getUTCMonth() + 1).padStart(2, '0'); // Months are zero-based
      const year = date.getUTCFullYear();
      const hours = String(date.getUTCHours()).padStart(2, '0');
      const minutes = String(date.getUTCMinutes()).padStart(2, '0');

      // Format the date and time
      return `${month}-${day}-${year}`;
    }

function changeDateFormat(dateFormat) {
  if (!dateFormat) {
    throw new Error('Invalid date format input');
  }

  const dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format
  if (dateParts.length !== 3) {
    throw new Error('Invalid date format');
  }

  const year = parseInt(dateParts[0], 10);
  const month = parseInt(dateParts[1], 10); // No need for padding
  const day = parseInt(dateParts[2], 10); // No need for padding

  // Create a new Date object with the parsed values
  const date = new Date(year, month - 1, day); // Month is zero-based in JavaScript Date object

  // Format the date as mm-dd-yyyy
  const formattedDate = (month < 10 ? '0' : '') + month + '-' +
                        (day < 10 ? '0' : '') + day + '-' +
                        date.getFullYear();

  return formattedDate;
}




</script>

<style scoped>
/* Add your styles here */
</style>

<template>
  <v-row>
    <v-col cols="12" md="12" v-if="getPatientList">
      <v-card title="Patients">
        <VCardText>
          <VRow>
            <VCol cols="12" md="3">
              <VAutocomplete v-model="filter.plan" label="Subcription" placeholder="Subcription" density="compact"
                :items="subcriptionLists" item-title="title" item-value="slug"
                @update:model-value="onSubcriptionChange" />


            </VCol>
            <VCol cols="12" md="3">

              <VAutocomplete v-model="filter.gender" label="Gender" placeholder="Gender" density="compact"
                :items="['All', 'Male', 'Female']" @update:model-value="onGenderChange" />

            </VCol>
            <!--<VCol
              cols="12"
              
              md="3"
            >
             <VAutocomplete
                  v-model="filter.state"
                  label="State"
                  density="compact"
                  :items="sortedStates"
                  item-title="name"
                  item-value="abbreviation"
                  @update:model-value="onStateChange"
                  
          />
          
           </VCol>-->
            <VCol
              cols="12"
              
              md="3"
            >
              <!-- <VTextField
                v-model="search"
                label="Search"
                placeholder="Search ..."
                append-inner-icon="ri-search-line"
                single-line
                density="compact"
                hide-details
                dense
                outlined
              /> -->
              <VTextField
                v-model="search"
                density="compact"
                label="Search"
                placeholder="Search ..."
                append-inner-icon="ri-search-line"
                single-line
                hide-details
                dense
                outlined
              />
            </VCol>
             
           
            <VCol cols="12" md="3" v-if="$can('read', 'Patient Add')">
              <VBtn prepend-icon="ri-add-line" @click="isAddCustomerDrawerOpen = !isAddCustomerDrawerOpen">
                Add Patient
              </VBtn>
            </VCol>
          </VRow>
        </VCardText>

        <v-data-table-server
        v-model:items-per-page="itemsPerPage"
        :headers="headers"
        :items="serverItems"
        :items-length="totalItems"
        :loading="loading"
        :search="search"
        :item-value="first_name"
        @update:options="loadItems">
        
         <template #item.id="{ item }">
          {{ item.id }}
        </template>

          <template #item.first_name="{ item }">
          <div class="d-flex align-center">
           
            <VAvatar
              size="32"
              :color="item.avatar ? '' : 'primary'"
              :class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
              :variant="!item.avatar ? 'tonal' : undefined"
            >
              <VImg
                v-if="item.avatar"
                :src="item.avatar"
              />
              <span
                v-else
                class="text-sm"
              >{{ avatarText(item.first_name) }}</span>
            </VAvatar>
            
            <div class="d-flex flex-column ms-3">
                <router-link
                  :to="{ name: 'admin-patient-profile', params: { id: item.id } }"
                  class="highlighted"
                >
              <span class="d-block font-weight-medium  text-truncate">{{ item.first_name }} {{ item.last_name }}</span>
               </router-link>
              <small>{{ item.post }}</small>
            </div>
          </div>
        </template>




<template #item.status="{ item }">
          <VChip
            :color="resolveStatusVariant(item.status).color"
            density="comfortable"
          >
            {{ resolveStatusVariant(item.status).text }}
          </VChip>
        </template>     
        <template #item.dob="{ item }">
          <span class="d-flex align-center" style="width: 100px;"> {{  changeFormat (item.dob) }}</span>
        </template>
        <template #item.last_order_date="{ item }">
          <span class="d-flex align-center" style="width: 100px;"> {{  formatDate(item.last_order_date) }}</span>
        </template>
        <template #item.created_at="{ item }">
          <span class="d-flex align-center" style="width: 100px;"> {{  ConvertDateFormate(item.created_at) }}</span>
        </template>
        
<template #item.labkit="{ item }">
          <div class="text-primary cursor-pointer" @click="LabKit(item)"> LabKits</div>
        </template>


<template #item.actions="{ item }">
          <div class="d-flex gap-1">
            <IconBtn
              size="small"
              
              @click="editItem(item)"
              v-if="$can('read', 'Patient Edit')"
            >
            
              <VIcon icon="ri-pencil-line" />
            </IconBtn>
            <IconBtn
              size="small"
              @click="deleteItem(item)"
              v-if="$can('read', 'Patient Delete')"
            >
              <VIcon icon="ri-delete-bin-line" />
            </IconBtn>
            <IconBtn
                size="small"
                @click="getMettings(item)"
                style="display: none;"
              >
              <VIcon icon="ri-time-line" />
            </IconBtn>
          </div>
        </template>
        </v-data-table-server> 
      </v-card>
    </v-col>
  </v-row>
  <AddPatient v-model:is-drawer-open="isAddCustomerDrawerOpen" @patientAdded="handlePatientAdded" />
  <EditPatient v-model:is-drawer-open="isEditCustomerDrawerOpen" :user-data="store.getters.getSinglePatient"
    @patientAdded="handlePatientAdded" />
  <!-- 👉 Edit Dialog  -->
  <VDialog v-model="editDialog" max-width="600px">
    <VForm ref="refVForm">
      <VCard>
        <VCardTitle>
          <span class="headline">Edit Patient</span>
        </VCardTitle>

        <VCardText>
          <VContainer>

            <VRow>
              <!-- fullName -->
              <VCol cols="12" md="6">
                <VTextField v-model="editedItem.first_name" label="First Name" :rules="[requiredFirstName]" />
              </VCol>
              <VCol cols="12" md="6">
                <VTextField v-model="editedItem.last_name" label="Last Name" :rules="[requiredLastName]" />
              </VCol>

              <!-- email -->
              <VCol cols="12" sm="6" md="12">
                <VTextField v-model="editedItem.email" label="Email" :rules="[requiredEmail, emailValidator]" />
              </VCol>


              <VCol cols="12" sm="6" md="12">
                <VTextField v-model="editedItem.dob" type="date" label="Date Of Birth" />
              </VCol>
              <VCol cols="12" sm="6" md="12">
                <VTextField v-model="editedItem.phone_no" label="Phone Number" pattern="^\(\d{3}\) \d{3}-\d{4}$"
                  :rules="[requiredPhone, validUSAPhone]" placeholder="i.e. (000) 000-0000" @input="formatPhoneNumber"
                  max="14" density="comfortable" />
              </VCol>




              <!-- status -->
              <VCol cols="12" md="12">
                <VSelect v-model="editedItem.status" :items="selectedOptions" item-title="text" item-value="value"
                  label="Status" variant="outlined" />
              </VCol>
            </VRow>
          </VContainer>
        </VCardText>

        <VCardActions>
          <VSpacer />

          <VBtn color="error" variant="outlined" @click="close">
            Cancel
          </VBtn>

          <VBtn color="success" variant="elevated" @click="save">
            Save
          </VBtn>

        </VCardActions>
      </VCard>
    </VForm>
  </VDialog>

  <!-- 👉 Delete Dialog  -->
  <VDialog v-model="deleteDialog" max-width="500px">
    <VCard>
      <VCardTitle>
        Are you sure you want to delete this item?
      </VCardTitle>

      <VCardActions>
        <VSpacer />

        <VBtn color="error" variant="outlined" @click="closeDelete">
          Cancel
        </VBtn>

        <VBtn color="success" variant="elevated" @click="deleteItemConfirm">
          OK
        </VBtn>

        <VSpacer />
      </VCardActions>
    </VCard>
  </VDialog>


</template>
<style>
table>thead>tr>th {
  height: 56px;
  font-weight: 500;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
  padding: 0 20px;
  transition-duration: .28s;
  transition-property: height;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
  /* background: rgb(var(--v-table-header-color)) !important; */
  border-block-end: none !important;
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
  font-size: .8125rem;
  letter-spacing: .2px;
  line-height: 24px;
  text-transform: uppercase;
}

table>tbody>tr>td {
  text-align: center;
  height: 50px;
  border-bottom: 1px solid #e2dfdf;
}

.dt-layout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.dt-layout-table {
  display: block !important;
  width: 100%;
}

.dt-layout-cell {
  display: flex;
  align-items: center;
}

.dt-input {
  border: 1px solid silver;
  border-radius: 5px;
  padding: 7px;
  text-align: center;
  margin-left: 5px;
  background: rgb(var(--v-table-header-color)) !important;
}

.dt-length,
.dt-search {
  display: flex;
  align-items: center;
}

.dt-length label,
.dt-search label {
  margin-left: 5px;
}

.dt-layout-start {
  flex: 1;
}

.dt-layout-end {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.dt-paging-button {
  cursor: pointer;
  border: 1px solid silver;
  border-radius: 22px;
  padding: 9px 15px 6px 15px;
  margin-left: 3px;
}

.first,
.previous,
.next,
.last {
  cursor: pointer;
  border: 0px solid silver;
  border-radius: 22px;
  padding: 9px 5px 6px 5px;
  margin-left: 3px;
}

.current {
  background: #8c57ff;
  color: white;
}
</style>
