<template>
    <v-layout row wrap>
        <v-dialog
            v-model="dialog_pop_up_error"
            width="500"
            >

            <v-card>
                <v-card-title
                class="headline grey lighten-2"
                primary-title
                >
                Pesan Error
                </v-card-title>

                <v-card-text>
                    {{message_error}}
                </v-card-text>

                <v-divider></v-divider>

                <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                    color="primary"
                    flat
                    @click="dialog_pop_up_error = false"
                >
                    Saya mengerti
                </v-btn>
                </v-card-actions>
            </v-card>
            </v-dialog>
         <v-dialog
            v-model="dialog_cito"
            width="500"
            >

            <v-card >
                <v-card-title
                    class="subtitle-1"
                    color="#64b2cd"
                >
                PILIH CITO
                </v-card-title>

                <v-card-text>
                    <v-select
                            :items="citos"
                            item-text="Nat_CitoName"
                            item-value="Nat_CitoID"
                            return-object
                            
                            hide-details
                            dense
                            v-model="selected_cito"
                            height="30"
                            v-show="cito_show && is_cito == 'Y'"
                            class="mt-0 pt-0"
                            append-icon="clear"
                            @click:append="selected_cito = null"
                        ></v-select>
                </v-card-text>

                <v-divider></v-divider>

                <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                    color="black"
                    flat
                    @click="dialog_cito = false"
                >
                    Tutup
                </v-btn>
                </v-card-actions>
            </v-card>
            </v-dialog>
        <v-flex xs12 sm6 class="left" fill-height pa-1>
            <!-- komponen kiri -->	
            <one-mou-px-left></one-mou-px-left> 
        </v-flex>

        <v-flex xs12 sm6  class="right" fill-height pa-1>
            <!-- komponen kanan -->	
            <v-card class="pa-1">
            <v-layout column>
                <v-layout align-center row>
                    <v-flex xs12>
                    <v-card tile class="pa-2" flat color="#64b2cd">
                        <h5 class="subtitle-1 font-weight-bold" style="color:#fff">DETAIL ORDER</h5>
                    </v-card>
                    </v-flex>
                </v-layout>
            <v-layout column>
             
                    <v-layout style="background:#89CFF0" mb-0 mt-1 align-center row>
                            <v-flex v-if="!cito_show || is_cito !== 'Y'"  xs2>
        
                                    <h5 class="mono subtitle-1 pl-2 font-weight-bold">
                                        JANJI HASIL
                                    </h5>
                                   

                            </v-flex>
                            <v-flex v-if="!cito_show || is_cito !== 'Y'"  xs10 class="text-xs-right">
                                <p v-if="preregister_promise == ''" class="mb-0 pb-1 pt-1 pr-1">
                                    <span class="mr-1" v-for="schedule in appx_schedule_computed">
                                        <kbd v-if="schedule.ScheduleID">{{schedule.JanjiHasil}}</kbd>
                                        <code v-else>{{schedule.JanjiHasil}}</code>
                                    </span>
                                </p>
                                <p v-else class="mb-0 pb-1 pt-1 pr-1">
                                    <kbd class="mr-1">{{preregister_promise}}</kbd>
                                </p>
                            </v-flex>
                             <v-flex v-if="cito_show && is_cito == 'Y'" xs2>
                                    <v-btn  dark @click="dialog_cito = true" small color="#ee7777">{{selected_cito.Nat_CitoName}}</v-btn>
                                    <!--<span class="font-weight-black caption" style="color:#6a6a6a">JANJI HASIL</span>-->

                            </v-flex>
                            <v-flex v-if="cito_show && is_cito == 'Y'" xs10 class="text-xs-right">
                                <p class="mb-0 pb-1 pt-1 pr-1">
                                    <kbd class="mr-1" v-for="schedule in schedules">{{getTimeX(schedule)}}</kbd>
                                </p>
                            </v-flex>
      
                    </v-layout>
      
            </v-layout>
            <one-fo-registration-price-list></one-fo-registration-price-list>
            </v-layout>
            </v-card>
        </v-flex>
    </v-layout>
</template>
<style scoped>
.mini-select .v-select__selections {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    line-height: 10px;
}
</style>

<script>

module.exports = {
    components : {
        'one-mou-px-left' : httpVueLoader('./oneMouPxLeft.vue'),
        'one-fo-registration-price-list' : httpVueLoader('./oneFoRegistrationPriceList.vue?ts=' 
            + new Date().toISOString())
    },
    computed: {
        message_error() {
            return this.$store.state.order.message_error
        },
        dialog_pop_up_error : {
            get() {
                return this.$store.state.order.dialog_pop_up_error
            },
            set(val) {
                this.$store.commit('order/update_dialog_pop_up_error', val)
            }
        },
        appx_schedule_computed() {
            return this.$store.state.px.appx_schedule
        },
        preregister_promise() {
            return this.$store.state.order.preregister_promise
        },
        schedules() {
            var xvar = this.$store.state.px.appx_schedule
            if(xvar)
                xvar = xvar.split(",")
            else 
                xvar = []
            return xvar
        },
        citos () {
            return this.$store.state.px.citos
        },

        selected_cito : {
            get () { return this.$store.state.px.selected_cito },
            set (v) { this.$store.commit('px/update_selected_cito', v) }
        },

        is_cito () {
            return this.$store.state.px.is_cito
        }
    },
    methods: {
        getTimeX(xtime) {
            if(xtime)
                return moment(xtime).format('DD-MM-YYYY HH:mm')
            else
                return
        }
    },
    data () {
        return {
            cito_show : true,
            dialog_cito:false
        }
    },
    mounted () {
        this.$store.dispatch('px/search_cito')
    },

    watch : {
        is_cito(val, old) {
            // if (val == "Y" && old == "N")
            //     this.cito_show = false
        }
    }

}
</script>

