var listPxComponent = {
    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 blue lighten-5">{{ props.item.code }}</td>
        <td class="text-xs-left pa-2 blue lighten-5">{{ 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>
      
    </v-data-table>
  </v-card>
  `,
    mounted() {
        this.doSearch();
    },
    data() {
        return {
            query: "",
            headers: [
                {
                    text: "CODE",
                    align: "left",
                    sortable: false,
                    value: "code",
                    width: "30%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "NAME",
                    align: "left",
                    sortable: false,
                    value: "name",
                    width: "70%",
                    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("px/searchPx", {
                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.px.isLoading,
            isError: state => state.px.isError,
            errorMessage: state => state.px.errorMessage,
            patients: state => state.px.rows,
            totalRecord: state => state.px.totalRecord,
            page: state => state.px.page,
            totalPage: state => state.px.totalPage
        })
    },
    updated() {
        console.log("Component Updated");
    }
};

export { listPxComponent };