<template>
    <v-layout class="mb-2" column>
        <v-card >
            <v-card-title style="background:#57c492">
                &nbsp;
            </v-card-title>
            <v-card-text>
              <v-data-table
                  :headers="headers"
                  :items="patients"
                  hide-actions
                  class="elevation-1"
              >
                <template v-slot:items="props">
                  <td class="text-xs-left">{{ props.item.info.prepare_code }}</td>
                  <td class="text-xs-center">{{ props.item.info.mcu_nolab }}</td>
                  <td class="text-xs-center">{{ props.item.M_PatientName }}</td>
                  <td class="text-xs-center">{{ props.item.info.sample_name }}</td>
                  <td class="text-xs-center">{{ props.item.info.test_name }}</td>
                  <td class="text-xs-left">{{ props.item.info.session_code }}</td>
                </template>
              </v-data-table>
            </v-card-text>
            <v-card-actions>
                <v-pagination  style="margin-top:10px;margin-bottom:10px" 
                  color="#57c492"
                  :total-visible="15" 
                  v-model="curr_page" 
                  :length="xtotal_page">
                </v-pagination>
            </v-card-actions>
        </v-card>
    </v-layout>
</template>

<style scoped>
    table,
    td,
    th {
        border: 0px solid #ddd;
        text-align: left;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 8px;
        padding-right: 5px;
    }

    .mini-input .v-input {
        margin-top: 0px;
    }

    .mini-input .v-input,
    .mini-input .v-input--selection-controls,
    .mini-input .v-input__slot {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 3px;
    }

    .mini-input .v-messages {
        min-height: 0px;
    }

    input.fhm-input {
        border: 1px solid black;
        border-radius: 2px;
        -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
        0 0 4px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
        0 0 4px rgba(0, 0, 0, 0.1);
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1),
        0 0 4px rgba(0, 0, 0, 0.1);
        padding: 2px 4px;
        background: rgba(255, 255, 255, 0.5);
        margin: 0 0 1px 0;
        width: 30px;
        text-align: center;
    }
</style>

<script>
  module.exports = {
    data () {
      return {
        search: '',
        pagination: {},
        selected: [],
        headers: [
          { text: 'PREPARE KODE',width:'15%',align:'center',sortable: false},
          { text: 'NO LAB',width:'10%',align:'center',sortable: false},
          { text: 'NAMA PASIEN',width:'15%',align:'center',sortable: false},
          { text: 'SAMPLE',width:'10%',align:'center',sortable: false},
          { text: 'TEST',width:'18%',align:'center',sortable: false},
          { text: 'SESSION KODE',width:'10%',align:'center',sortable: false}
        ]
      }
    },
    computed: {
        patients() {
            return this.$store.state.patient.patients
        },
        totalpatient() {
            return this.$store.state.patient.total_patient
        },
        curr_page: {
            get() {
                return this.$store.state.patient.current_page
            },
            set(val) {
                this.$store.commit("patient/update_current_page", val)
                this.$store.dispatch("patient/search", {
                    current_page: val,
                    lastid: -1
                })
            }
        },
        xtotal_page: {
            get() {
                return this.$store.state.patient.total_patient
            },
            set(val) {
                this.$store.commit("patient/update_total_patient", val)
            }
        },
    },
    methods: {
      gotoReg(row) {
          this.$store.dispatch("patient/gotoreg", row)
      }, 
    }

  }
</script>