<template>
    <v-layout class="mb-2" column>
        <v-card >
            <v-card-title>LISTING PASIEN TIDAK MATCH</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.REG_NO }}</td>
                  <td class="text-xs-center">
                    <p class="mb-0">{{ props.item.PATIENT_NAME }}</p>
                    <kbd>{{props.item.PATIENT_ID}}</kbd>
                    </td>
                  <td class="text-xs-center">{{ props.item.DOB }}</td>
                  <td class="text-xs-center">{{ props.item.NPK }}</td>
                  <td class="text-xs-left">{{ props.item.OTHER_ID }}</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: 'REG NO',width:'10%',align:'center',sortable: false},
          { text: 'PATIENT',width:'35%',align:'center',sortable: false},
          { text: 'DOB',width:'10%',align:'center',sortable: false},
          { text: 'NPK',width:'10%',align:'center',sortable: false},
          { text: 'OTHER_ID',width:'15%',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", {
                    search:this.$store.state.patient.search,
                    xid:this.$store.state.patient.data_setup.McuOfflinePrepareID,
                    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)
            }
        },
        xsearch: {
            get() {
                return this.$store.state.patient.search
            },
            set(val) {
                this.$store.commit("patient/update_search", val)
            }
        },
    },
    methods: {
      gotoReg(row) {
          this.$store.dispatch("patient/gotoreg", row)
      }, 
      goToRegister(row){
            var prm = this.$store.state.patient.selected_patient_listing
            var setup = this.$store.state.patient.data_setup
            var pre_id = row.Mcu_PreregisterPatientsID
            // var code = setup.McuOfflinePrepareCode
            location.replace("/one-ui/test/vuex/one-fo-registration-v8/" + "?pre_id=" +pre_id)
        },
        searchPatientTable(){
            this.curr_page = 1
            this.$store.dispatch("patient/search", {
                search: this.xsearch,
                current_page: this.curr_page,
                xid:this.$store.state.patient.data_setup.McuOfflinePrepareID,
                lastid: -1
            })
        },
    }

  }
</script>