<script setup>
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';

const store = useStore();
const router = useRouter()
const route = useRoute()
const itemsPrescriptions = ref([]);
const patientId = route.params.patient_id;
const props = defineProps({
  prescriptionData: {
    type: Object,
    required: true,
  },
})
const prescription = computed(async () => {
    console.log('computed=====')
    await getprescriptionList()
   
});

const getprescriptionList = async () => {
 
    let prescriptions = props.prescriptionData.prescriptionData
    console.log("BeforeOverviewItem", prescriptions);
    // itemsPrescriptions.value = store.getters.getPrescriptionList
    for (let data of prescriptions) {
      let dataObject = {}
         dataObject.name = data.name
          dataObject.brand = data.brand
          dataObject.from = data.from
          dataObject.direction_quantity = data.direction_quantity
          dataObject.dosage = data.dosage
          dataObject.quantity = data.quantity
          dataObject.refill_quantity = data.refill_quantity
          dataObject.actions = ''
          dataObject.id = data.id
          dataObject.comments = data.comments
          dataObject.direction_one = data.direction_one
          dataObject.direction_two= data.direction_two
          dataObject.status = data.status
  
        dataObject.date = formatDateDate(data.created_at)
        
        itemsPrescriptions.value.push(dataObject)
    }
    console.log(itemsPrescriptions.value)
    itemsPrescriptions.value.sort((a, b) => {
        return b.id - a.id;
    });
    console.log("OverviewItem", itemsPrescriptions.value);
};
const formatDateDate = (date) => {
    const messageDate = new Date(date);
    const options = {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    };
    return messageDate.toLocaleDateString('en-US', options).replace(/\//g, '-');
};
const getStatusColor = (status) => {
    switch (status) {
        case 'pending':
            return 'warning'; // Use Vuetify's warning color (typically yellow)
        case 'shipped':
            return '#45B8AC'; // Use Vuetify's primary color (typically blue)
        case 'delivered':
            return 'success';
        case 'returned':
            return 'red';
        case 'results':
            return 'blue';
        default:
            return 'grey'; // Use Vuetify's grey color for any other status
    }
};
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 headers = [
 
  {
    title: 'Name',
    key: 'name',
  },
  {
    title: 'Date',
    key: 'date',
  },
  {
    title: 'Status',
    key: 'status',
  },
]
const prescriptionIndex = ref([]);
const prescriptionItem = ref(-1)
const prescriptionDialog = ref(false)
const selectedItem = ref(null);
const showDetail = item => {
    // console.log("id",item);
  prescriptionIndex.value = item
  selectedItem.value = item;
//   console.log("index",prescriptionIndex.value);
//   prescriptionItem.value = { ...item }
  prescriptionDialog.value = true
}
const close = () => {
  prescriptionDialog.value = false
  prescriptionIndex.value = -1
  prescriptionItem.value = { ...defaultItem.value }
}

</script>
<template>
  
    <v-row>
    <v-col cols="12" md="12" v-if="itemsPrescriptions">
      <v-card title="Prescriptions" v-if="prescription">
      <VCardText >
          
        </VCardText>
      <VDataTable
        :headers="headers"
        :items="itemsPrescriptions"
        :items-per-page="5"
        class="text-no-wrap"
      >
            
        <!-- full name -->
        <!-- status -->
        <template #item.status="{ item }">
          <VChip
            :color="getStatusColor(item.status)"
            density="comfortable"
          >
            {{ item.status}}
          </VChip>
        </template>

        <!-- Actions -->
        <template #item.name="{ item }">
        <router-link
                  :to="{ name: 'admin-patient-profile', params: { id: item.id } }"
                  class="text-high-emphasis  "
                  @click.prevent=showDetail(item)
                >
                {{ item.name }} 
                </router-link>
       
        </template>
      </VDataTable>
      </v-card>
    </v-col>
  </v-row>
    <VDialog
    v-model="prescriptionDialog"
    max-width="600px"
  >
    <VCard :title=prescriptionIndex.name>
    <DialogCloseBtn
        variant="text"
        size="default"
        @click="[prescriptionDialog = false,selectedItem = '']"
      />
      <VCardText>
            <v-row class='mt-0'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Brand:</b></p>
                        </v-col>
                        <v-col cols="12" md="4" sm="6">
                            <p>{{ prescriptionIndex.brand }}</p>
                        </v-col>
                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>From:</b></p>
                        </v-col>
                        <v-col cols="12" md="4" sm="6">
                            <p>{{ prescriptionIndex.from }}</p>
                        </v-col>
                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Dosage:</b></p>
                        </v-col>
                        <v-col cols="12" md="4" sm="6">
                            <p>{{ prescriptionIndex.dosage }}</p>
                        </v-col>
                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Quantity:</b></p>
                        </v-col>
                        <v-col cols="12" md="4" sm="6">
                            <p>{{ prescriptionIndex.quantity }}</p>
                        </v-col>
                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Direction Quantity:</b></p>
                        </v-col>
                        <v-col cols="12" md="8" sm="6">
                            <p>{{ prescriptionIndex.direction_quantity }}</p>
                        </v-col>
                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Direction One:</b></p>
                        </v-col>
                        <v-col cols="12" md="8" sm="6">
                            <p>{{ prescriptionIndex.direction_one }} </p>
                        </v-col>
                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Direction Two:</b></p>
                        </v-col>
                        <v-col cols="12" md="8" sm="6">
                            <p>{{ prescriptionIndex.direction_two }} </p>
                        </v-col>
                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Refill Quantity:</b></p>
                        </v-col>
                        <v-col cols="12" md="8" sm="6">
                            <p>{{ prescriptionIndex.refill_quantity }}</p>
                        </v-col>

                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Status:</b></p>
                        </v-col>
                        <v-col cols="12" md="8" sm="6">
                            <p v-if="prescriptionIndex.status == null" class="text-warning">Pending</p>
                            <p v-else>{{ prescriptionIndex.status }}</p>
                        </v-col>
                    </v-row>
                     <VDivider></VDivider>
                    <v-row class='mt-1 pb-0'>
                        <v-col cols="12" md="4" sm="6">
                            <p class='heading mb-0 text-right'><b>Comments:</b></p>
                        </v-col>
                        <v-col cols="12" md="8" sm="8">
                            <p>{{ prescriptionIndex.comments }} </p>
                        </v-col>

                    </v-row>
                    
      </VCardText>
    </VCard>
    
  </VDialog>
</template>

<style lang="scss">
button.v-expansion-panel-title {
  background-color: #003152 !important;
  color: #fff;
}

button.v-expansion-panel-title.bg-secondary {
  background-color: #003152 !important;
  color: #fff;
}

button.v-expansion-panel-title {
  background-color: #003152 !important;
  color: #fff;
}

span.v-expansion-panel-title__icon {
  color: #fff
}

// button.v-expansion-panel-title.bg-secondary {
//     background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
// }

// button.v-expansion-panel-title {
//     background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
// }

// button.v-expansion-panel-title.v-expansion-panel-title--active {
//     background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
// }

.v-expansion-panel {
  overflow: hidden;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 10%);
  margin-block-end: 10px;
  transition: box-shadow 0.3s ease;
}

.details {
  position: relative;
  box-sizing: content-box;
  border: 2px solid #fff;
  border-radius: 1em;
  background-color: #696cff;
  block-size: 0.85em;
  box-shadow: 0 0 3px rgba(67, 89, 113, 80%);
  color: #fff;
  content: "+";
  font-family: "Courier New", Courier, monospace;
  font-weight: 500;
  inline-size: 0.85em;
  inset-block-start: 50%;
  inset-block-start: 0.7em;
  inset-inline-start: 50%;
  line-height: 0.9em;
  text-align: center;
  transform: translate(-50%, -50%);
}
</style>
