<template>
    <v-layout class="mb-2" column>
        <v-card >
            <v-card-title style="background:#57c492">
                <v-layout row>
                    <v-flex xs12>
                        <v-text-field
                            color="teal"
                            label="Cari pasien"
                            v-model="xsearch"
                            @keyup.enter="searchPatientTable()"
                            outline
                            hide-details
                        ></v-text-field>
                    </v-flex>
                </v-layout>
            </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.Mcu_PreregisterDetailsPatientName }}</td>
                  <td class="text-xs-center">{{ props.item.dob }}</td>
                  <td class="text-xs-center">{{ props.item.Mcu_PreregisterDetailsM_SexCode }}</td>
                  <td class="text-xs-center">{{ props.item.Mcu_PreregisterDetailsNIK }}</td>
                  <td class="text-xs-left">{{ props.item.Mcu_PreregisterDetailsJabatan }}</td>
                  <td class="text-xs-center">
                    <v-btn small dark v-if="props.item.Mcu_PreregisterDetailsFlagAction === 'N'" @click="goToRegister(props.item)" color="#03989e">DAFTARKAN</v-btn>
                    <v-btn small dark v-if="props.item.Mcu_PreregisterDetailsFlagAction === 'R'" color="#57c492">SEDANG DIPROSES</v-btn>
                    <v-btn small  disabled v-if="props.item.Mcu_PreregisterDetailsFlagAction === 'S'" color="grey">TELAH SELESAI</v-btn>
                  </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: 'NAMA',width:'20%',align:'center',sortable: false},
          { text: 'TANGGAL LAHIR',width:'10%',align:'center',sortable: false},
          { text: 'JENIS KEL.',width:'10%',align:'center',sortable: false},
          { text: 'NIK',width:'10%',align:'center',sortable: false},
          { text: 'JABATAN',width:'18%',align:'center',sortable: false},
          { text: 'STATUS',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", {
                    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_PreregisterDetailsID
            var code = setup.McuOfflinePrepareCode
            location.replace("/one-ui/test/vuex/one-fo-registration-v8/" + "?pre_id=" +pre_id+"&code="+code)
        },
        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>