var listPatientComponent = {
    template: `
  <v-card class="xs12 md12 mt-2" >
    
    <v-data-table :headers="headers" :items="patients" 
    :loading="isLoading"
    hide-actions class="elevation-1">
      <template slot="items" slot-scope="props">
        <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.nolab }}</td>
        <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.mr }}</td>
        <td class="pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.name }}</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: "LAB NUMBER",
                    align: "left",
                    sortable: false,
                    value: "nolab",
                    width: "25%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "MR",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "25%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "NAME",
                    align: "left",
                    sortable: false,
                    value: "name",
                    class: "pa-2 blue lighten-3 white--text"
                }
            ]
        };
    },
    methods: {
        clearSearch() {
            this.query = "";
            this.doSearch();
        },
        doSearch(page = 1, rowPerPage = 8) {
            if (this.query == null) this.query = "";
            this.$store.dispatch("patient/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);
        },

        selectMe(item) {

            this.$store.dispatch('patient/selectMe', item);
            // let rows = this.$store.state.patient.rows;

            // for (let i in rows) {
            //     // console.log(i);
            //     rows[i].selected = false;
            //     if (i.mr == item.mr) {
            //         rows[i].selected = true;
            //     }
                    
            // }

            // this.$store.state.patient.rows = rows;
        }
    },
    computed: {
        ...Vuex.mapState({
            isLoading: state => state.patient.isLoading,
            isError: state => state.patient.isError,
            errorMessage: state => state.patient.errorMessage,
            patients: state => state.patient.rows,
            totalRecord: state => state.patient.totalRecord,
            page: state => state.patient.page,
            totalPage: state => state.patient.totalPage
        }),

        isSelected() {
            
            // for(let i of rows) {
            //     if (i.mr == "MR-18107238");
            //         return true;
            // }

            return false;
        }
    },
    updated() {
        console.log("Component Updated");
    }
};

export { listPatientComponent };