var listPatientComponent = {
  template: `
  <v-card class="xs12 md12" >
    <v-card-title>
      <v-layout>
        <v-flex xs12 sm8>
          <v-toolbar-title>Patient Listing</v-toolbar-title>
        </v-flex>
        <v-flex xs12 sm4>
          <v-spacer></v-spacer>
          <v-text-field
            v-model="query"
            append-icon="search"
            @click:clear="clearSearch"
            @keydown.enter="doSearch"
            @click:append="doSearch"
            label="Search"
            single-line
            hide-details
            clearable
            class="xs12 md3"
          ></v-text-field>
        </v-flex>
      </v-layout>
    </v-card-title>
    <v-data-table :headers="headers" :items="patients" 
    :loading="isLoading"
    hide-actions class="elevation-1">
      <template slot="items" slot-scope="props">
        <td>{{ props.item.M_PatientNoReg }}</td>
        <td>{{ props.item.M_PatientName }}</td>
        <td class="text-xs-center">{{ props.item.M_PatientDOB }}</td>
        <td>{{ props.item.M_PatientHP }}</td>
        <td>{{ props.item.M_PatientAddress }}</td>
      </template>
      <template slot="no-data">
        <v-alert :value="isError" color="error" icon="warning">
          {{errorMessage}}
        </v-alert>
        <v-spacer></v-spacer>
      </template>
      <template slot="footer">
        <td colspan="2" class="text-xs-left">
          Total Records : {{totalRecord}}, page {{page}} of {{totalPage}}.
        </td>
        <td colspan="3" class="text-xs-right">
            <v-pagination :length="totalPage" :value="page" :total-visible="10" 
            @next="nextPage" @prev="prevPage" 
            @input="gotoPage" >
            </v-pagination>
        </td>
      </template>
    </v-data-table>
  </v-card>
  `,
  mounted() {
    this.doSearch();
  },
  data() {
    return {
      query: "",
      headers: [
        {
          text: "No. Reg",
          align: "left",
          sortable: false,
          value: "M_PatientNoReg"
        },
        {
          text: "Name",
          align: "left",
          sortable: false,
          value: "M_PatientName"
        },
        {
          text: "DOB",
          align: "center",
          sortable: false,
          value: "M_PatientDOB"
        },
        {
          text: "HP",
          value: "M_PatientHP",
          sortable: false,
          align: "left"
        },
        {
          text: "Address",
          value: "M_PatientAddress",
          sortable: false,
          align: "left"
        }
      ]
    };
  },
  methods: {
    clearSearch() {
      this.query = "";
      this.doSearch();
    },
    doSearch(page = 1, rowPerPage = 8) {
      if (this.query == null) this.query = "";
      this.$store.dispatch("searchPatient", {
        query: this.query,
        page,
        rowPerPage
      });
    },
    prevPage() {
      let c_page = this.page - 1;
      this.doSearch(c_page);
    },
    nextPage() {
      let c_page = this.page + 1;
      this.doSearch(c_page);
    },
    gotoPage(e) {
      let c_page = e;
      this.doSearch(c_page);
    }
  },
  computed: {
    ...Vuex.mapState({
      isLoading: state => state.isLoading,
      isError: state => state.isError,
      errorMessage: state => state.errorMessage,
      patients: state => state.rows,
      totalRecord: state => state.totalRecord,
      page: state => state.page,
      totalPage: state => state.totalPage
    })
  },
  updated() {
    console.log("Component Updated");
  }
};

export { listPatientComponent };