<template>
    <v-dialog
        v-model="dialog"
        max-width="500px"
        persistent
    >
        <v-card>
            <v-card-text>
                <v-layout row wrap mb-2 v-show="info_req.note_fo != ''">
                    <v-flex xs12>
                        <h5 class="caption">Catatan FO</h5>
                        <h3 class="title font-weight-regular">{{info_req.note_fo}}</h3>
                    </v-flex>
                </v-layout>

                <v-layout row wrap mb-2 v-show="info_req.note_sampling != ''">
                    <v-flex xs12>
                        <h5 class="caption">Catatan Specimen</h5>
                        <h3 class="title font-weight-regular">{{info_req.note_sampling}}</h3>
                    </v-flex>
                </v-layout>

                <v-layout row wrap mb-2 v-show="info_req.req_fo.length > 0">
                    <v-flex xs12>
                        <h5 class="caption">Requirement FO</h5>
                        <h3 class="title font-weight-regular">{{info_req.req_fo.join(', ')}}</h3>
                    </v-flex>
                </v-layout>

                <v-layout row wrap mb-2 v-show="info_req.req_spec_col.length > 0">
                    <v-flex xs12>
                        <h5 class="caption">Requirement Specimen Collection</h5>
                        <h3 class="title font-weight-regular">{{info_req.req_spec_col.join(', ')}}</h3>
                    </v-flex>
                </v-layout>

                <v-layout row wrap mb-2 v-show="info_req.req_spec_ver.length > 0">
                    <v-flex xs12>
                        <h5 class="caption">Requirement Specimen Verification</h5>
                        <h3 class="title font-weight-regular">{{info_req.req_spec_ver.join(', ')}}</h3>
                    </v-flex>
                </v-layout>

                <v-layout row wrap mb-2 v-show="info_req.req_samp_ver.length > 0">
                    <v-flex xs12>
                        <h5 class="caption">Requirement Sample Verification</h5>
                        <h3 class="title font-weight-regular">{{info_req.req_samp_ver.join(', ')}}</h3>
                    </v-flex>
                </v-layout>

                <v-layout row wrap mb-2 v-show="info_req.req_pre_an.length > 0">
                    <v-flex xs12>
                        <h5 class="caption">Requirement Pre Analitik</h5>
                        <h3 class="title font-weight-regular">{{info_req.req_pre_an.join(', ')}}</h3>
                    </v-flex>
                </v-layout>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" flat @click="dialog=!dialog">Tutup</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<style>
/* .v-overlay--active {
    z-index: 1005 !important;
}

.v-dialog__content--active {
    z-index: 1006 !important;
} */
</style>

<script>
module.exports = {
    data () {
        return {}
    },

    computed : {
        dialog : {
            get () { return this.$store.state.re_patient.dialog_req },
            set (v) { this.$store.commit('re_patient/update_dialog_req', v) }
        },

        info_req () {
            return this.$store.state.re_patient.info_req
        }
    },

    methods : {
    }
}
</script>