<template>
    <v-dialog
        v-model="dialog"
        width="500px"
        >

        <v-card>
            <v-card-title
            class="headline grey lighten-2 pt-2 pb-2"
            primary-title
            >
            Kirim Rujukan
            </v-card-title>
        <v-card-text class="pt-2 pb-2">

            <v-layout row wrap>
                <v-flex xs3 mb-1>
                    <strong>Nomor Lab</strong>
                </v-flex>
                <v-flex xs9 mb-1>
                    {{ labno }}
                </v-flex>

                <v-flex xs3 mb-3>
                    <strong>Nama</strong>
                </v-flex>
                <v-flex xs9 mb-3>
                    {{ name }}
                </v-flex>

                <v-flex xs12>
                    <v-data-table
                        :headers="headers" :items="pxs"
                        :loading="isLoading"
                        hide-actions class="xelevation-1">
                        <template slot="items" slot-scope="props">
                        <td class="text-xs-left pa-2 green--text" v-bind:class="is_selected(props.item)"
                            @click="select(props.item)">
                            {{ props.item.T_TestCode }}
                        </td>
                        <td class="text-xs-left pa-2 green--text" v-bind:class="is_selected(props.item)"
                            @click="select(props.item)">
                            {{ props.item.T_TestName }}
                        </td>
                        <td class="text-xs-left pa-2" v-bind:class="is_selected(props.item)"
                            @click="select(props.item)">
                            {{ props.item.M_CompanyName }}
                        </td>
                        </template>

                    </v-data-table>
                    <!-- <v-pagination
                        v-model="curr_px_page"
                        :length="total_px_page"
                        :total-visible="5"
                        @input="change_page"
                    ></v-pagination> -->
                </v-flex>
            </v-layout>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>

          <v-btn
            color="primary"
            @click="dialog = false"
            flat
          >
            Tutup
          </v-btn>

          <v-btn
            color="primary"
            @click="save"
            
          >
            Kirim
          </v-btn>

        </v-card-actions>
    </v-dialog>
</template>

<script>
module.exports = {
    components : {
    },

    data () {
        return {
            headers: [
                {
                text: "TEST CODE",
                align: "left",
                sortable: false,
                value: "mr",
                width: "20%",
                class: "pa-2 blue lighten-3 white--text"
                },
                {
                text: "TEST NAME",
                align: "left",
                sortable: false,
                value: "mr",
                width: "20%",
                class: "pa-2 blue lighten-3 white--text"
                },
                {
                text: "KIRIM KE",
                align: "left",
                sortable: false,
                value: "mr",
                width: "60%",
                class: "pa-2 blue lighten-3 white--text"
                }
            ],

            isLoading : false
        }
    },

    computed : {
        dialog : {
            get () { return this.$store.state.ro_send.dialog_main },
            set (v) { this.$store.commit('ro_send/update_dialog_main', v) }
        },

        pxs () {
            return this.$store.state.ro_patient.selected_patient.T_TestName
        },

        labno () {
            return this.$store.state.ro_patient.selected_patient.T_OrderHeaderLabNumber
        },

        name () {
            return this.$store.state.ro_patient.selected_patient.M_PatientName
        }
    },

    methods : {
        save () {
            this.$store.dispatch('ro_send/send')
        },

        is_selected(x) {
            return
        }
    },

    watch : {
        
    }
}
</script>