<template>
   <div>

      <v-layout column pb-2>
         <v-card class="one-fo-requirement">
            <v-subheader red--text text--lighten-1>
                <v-layout row wrap>
                    <v-flex xs3>
                        <span>JANJI HASIL :</span>
                    </v-flex>
                    <v-flex xs3>
                        <span v-show="!cito_show && is_cito == 'Y'" class="mr-4 blue--text"><a href="javascript:;" class=" blue--text" @click="cito_show=!cito_show"><v-icon small>priority_high</v-icon> {{ selected_cito ? selected_cito.Nat_CitoName : '' }}</a></span>
                        <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-flex>
                    <v-flex xs6 class="text-xs-right">
                        <span class="red--text">Perkiraan Janji Hasil : {{ appx_schedule }}</span>
                    </v-flex>
                </v-layout>
            </v-subheader>
            <!-- <v-layout row wrap v-show="cito_show">
                <v-flex xs3>
                    &nbsp;
                </v-flex>
                <v-flex xs4>
                         
                </v-flex>
            </v-layout> -->
            <v-divider></v-divider>

            <v-layout row wrap>
                     <v-flex xs12 pt-2>
                        <v-card color="blue lighten-3 white--text" outlined flat >
                            <v-card-text class="pt-2 pb-2">
                                <v-layout row wrap>
                                    <v-flex xs6>
                                        <p class="title">Persyaratan terpenuhi ?</p>
                                    </v-flex>
                                    <v-flex xs6 class="text-xs-right">
                                       <v-btn 
                                             :color="req_status == 'N' ? 'red' : 'white'" 
                                             class="one-btn-icon mr-1 ma-0" 
                                             :dark="req_status == 'N'"
                                            @click="reqMeNot">
                                            <v-icon>clear</v-icon>
                                        </v-btn>

                                        <v-btn 
                                             :color="req_status == 'Y' ? 'green' : 'white'" 
                                             class="one-btn-icon mr-1 ma-0" 
                                             :dark="req_status == 'Y'"
                                             
                                            @click="reqMe">
                                            <v-icon>done</v-icon>
                                        </v-btn>
                                        <!-- <v-btn color="red" class="one-btn-icon mr-1 ma-0" @click="sampleReq" 
                                            v-show="req_status == 'X' || req_status == 'N'"
                                            :disabled="req_status != 'X'"
                                            :dark="req_status == 'X'">
                                            <v-icon>clear</v-icon>
                                        </v-btn>

                                        <v-btn color="green" class="one-btn-icon ma-0" @click="sampleReqOK" 
                                            v-show="req_status == 'X' || req_status == 'Y'"
                                            :disabled="req_status != 'X'"
                                            :dark="req_status == 'X'">
                                            <v-icon>done</v-icon>
                                        </v-btn> -->
                                    </v-flex>
                                </v-layout>
                            </v-card-text>
                        </v-card>
                     </v-flex>
                    
                    
                 </v-layout>
                 
                 <v-layout row wrap v-if="req_status != 'N'">
                    <v-card flat>
                       <v-card-text class="pl-3 pr-3 pt-2 pb-2">
                          <v-btn color="black" small outline v-for="(req, i) in requirements" v-bind:key="i" class="mt-1 mr-1 ma-0">{{req.label}}</v-btn>
                       </v-card-text>
                    </v-card>
                 </v-layout>

            <v-container fluid v-if="req_status == 'N'" class="pl-2 pr-2 pt-2 pb-2">
               <v-layout row wrap>
                  <!-- <one-field-verification v-for="req in requirements" :key="req.idx"
                                          @input="update_req"
                                          :value="req" class="xs12 sm10" >
                  </one-field-verification> -->
                  <v-flex xs12
                     v-for="(req, i) in requirements"
                     v-bind:key="i">

                     <v-checkbox
                        :value="req.req_id"
                        :label="req.label"
                        v-model="reqs"
                        hide-details
                        class="mt-0"
                     ></v-checkbox>
                  </v-flex>
                  
               </v-layout>
            </v-container>
            <v-divider></v-divider>
            <v-layout>
               <v-flex xs12 pa-2>
                  <v-checkbox
                     v-model="received_sample"
                     value="Y"
                     label="Received Sample Only"
                  ></v-checkbox>
                  
               </v-flex>
            </v-layout>
         </v-card>
      </v-layout>
   </div>
</template>

<style scoped>
div.persyaratan input[type=text]::-webkit-input-placeholder {
   font-size: 1em;
}
div.persyaratan input[type=text] {
   font-size: .7em;
}
div.persyaratan label {
   color: #f44336!important;
   font-size: 1.1em;
   font-weight:400;
}
</style>
<script>
module.exports = {
    components: {
        "one-field-verification" : httpVueLoader("./oneFieldVerification.vue")
    },

    data () {
        return {
            cito_show : true
        }
    },

    computed: {
        requirements(){
            return this.$store.state.px.requirement
        },

        received_sample : {
            get () {
                return this.$store.state.order.received_sample
            },

            set (v) {
                if (v == null)
                v = "N";
                
                this.$store.commit("order/update_received_sample", v)
                return
            }
        },

        appx_schedule() {
            return this.$store.state.px.appx_schedule
        },

        req_status() {
            return this.$store.state.px.req_status
        },

        req_text() {
            let x = []
            for (let i in this.requirements)
                x.push(this.requirements[i].label);

            return x.join(', ')
        },

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

        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: {
        update_req(val) {
            
            let reqs = this.$store.state.px.requirement
            reqs.forEach(function(r,idx) {
                if ( val.idx = r.idx ) {
                reqs[idx] = val 
                }
            })
            this.$store.commit("px/update_requirement", reqs)
        },

        reqMe() {
            this.$store.commit('px/update_req_status', 'Y')
        },

        reqMeNot() {
            this.$store.commit('px/update_req_status', 'N')
        }
    },

    mounted () {
        this.$store.dispatch('px/search_cito')
    },

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