<template>
    <v-dialog
        v-model="dialog" 
        persistent 
        :overlay="false"
        max-width="80%"
        transition="dialog-transition"
    >
        <v-card>
            <v-card-title primary-title color="orange">
                <h3 class="title">PENGGANDAAN HARGA</h3> 
            </v-card-title>
            <v-card-text>
                <v-layout row wrap>
                    <v-flex xs4>
                        <v-layout mb-1 row>
                            <v-subheader>TARGET</v-subheader>
                        </v-layout>
                        <v-layout pl-3 mb-4 row>
                            <v-flex>
                                <span class="mono" style="color:red;font-size:14px;">{{target_company.M_CompanyName}}</span> 
                                [ <span class="mono" style="font-size:14px;">{{target_mou.M_MouName}}</span> ]
                            </v-flex>
                        </v-layout>
                        
                        <v-layout mb-1 row>
                            <v-subheader>SUMBER</v-subheader>
                        </v-layout>
                        <v-layout pl-3 mb-1 row>
                            <v-flex>
                                <v-autocomplete
                                    label="Kelompok Pelanggan"
                                    v-model="selected_company"
                                    :items="companies"
                                    :search-input.sync="query_company"
                                    outline
                                    auto-select-first
                                    no-filter
                                    return-object
                                    hide-details
                                    clearable
                                    item-text="M_CompanyName"
                                    :loading="is_loading"
                                    no-data-text="Pilih Kel. Pelanggan"
                                    >
                                    <template
                                        slot="item"
                                        slot-scope="{ item }"
                                        >
                                        <v-list-tile-content>
                                        <v-list-tile-title v-text="item.M_CompanyName"></v-list-tile-title>
                                        <!-- <v-list-tile-sub-title v-text="'aaa'"></v-list-tile-sub-title> -->
                                        </v-list-tile-content>
                                    </template>

                                </v-autocomplete>
                            </v-flex>
                        </v-layout>
                        <v-layout pl-3 mb-2 row>
                            <v-flex>
                                <v-select class="xs12" :items="mous" 
                                    outline
                                    hide-details
                                    item-text="M_MouName"
                                    item-value="M_MouID"
                                    return-object
                                    v-model="selected_mou"
                                    label="Agreement"></v-select>
                            </v-flex>
                        </v-layout>
                        <v-layout pl-3 mb-2 row>
                            <v-flex>
                                <div>
                                    <v-btn block @click="changeBtnFlagCopyAll(copyall)" v-if="copyall === 'N'"  color="error">
                                    <v-icon left>close</v-icon> Gandakan semua sekaligus </v-btn>
                                    <v-btn block @click="changeBtnFlagCopyAll(copyall)" v-if="copyall === 'Y'"  color="success">
                                    <v-icon left>check</v-icon> Gandakan semua sekaligus</v-btn>
                                </div>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <v-flex xs8 pl-3> 
                        <v-layout row>
                            <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                                <v-data-table 
                                    :headers="headers" 
                                    :items="xtransactions"
                                    :loading="isLoading"
                                    hide-actions
                                    class="elevation-1">
                                    <template v-slot:headers="props">
                                            <tr>
                                            <th style="width:20px" class= "text-xs-left blue-grey white--text">
                                                <v-checkbox style="padding-top:0;margin-top:0"
                                                    hide-details
                                                    color="white"
                                                    :disabled="copyall === 'Y'"
                                                    :indeterminate="indeterminatex"
                                                    @change="changeCbxAll(bar_chx_all)"
                                                    v-model="bar_chx_all"
                                                ></v-checkbox>
                                            </th>
                                            <th
                                                v-for="header in props.headers"
                                                :key="header.text"
                                                :class="header.class"
                                                :width="header.width"
                                            >
                                            {{ header.text }}
                                            </th>
                                            </tr>
                                    </template>
                                        
                                    <template v-slot:items="props">
                                            <td style="width:20px" class="text-xs-left">
                                            <v-checkbox style="padding-top:0;margin-top:0"
                                                color="blue-grey"
                                                hide-details
                                                :disabled="copyall === 'Y'"
                                                v-model="props.item.chex"
                                                @change="checkTop()"
                                            ></v-checkbox>
                                            </td>
                                            <td class="text-xs-left pa-2">{{ props.item.Nat_JPAGroupName }} ( <span style="color:red">{{fixedDiscount(props.item.Nat_JpaGroupMaxPxDisc)}} %</span> )</td>
                                            <td class="text-xs-left pa-2">
                                                <v-text-field
                                                    label="DISKON (%)"
                                                    single-line
                                                    :disabled="copyall === 'Y'"
                                                    hide-details
                                                    v-model="props.item.discount"
                                                ></v-text-field>
                                            </td>
                                    </template>
                                </v-data-table>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>
            </v-card-text>

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

<script>
module.exports = {
    components : {
        'one-md-price-copy-list': httpVueLoader('./oneMdPriceCopyList.vue'),
        
    },
    mounted(){
        this.$store.dispatch("price_copy/getjpagroups")
    },
    data() {
        return {
            indeterminatex:false,
            bar_chx_all:false,
            isLoading:false,
            headers: [
                {
                text: "GROUP",
                align: "left",
                sortable: false,
                value: "name",
                width: "65%",
                class: "pa-2 blue-grey text-xs-left white--text"
                },
                {
                text: "DISKON",
                align: "center",
                sortable: false,
                value: "status",
                width: "15%",
                class: "pa-2 blue-grey text-xs-left white--text"
                }
            ],
        }
    },

    computed : {
        copyall : {
         get () {
            return this.$store.state.price_copy.copyall
         },
         set (v) {
            this.$store.commit('price_copy/update_copyall', v)
         }
      },
        is_loading () {
            return false
        },
        dialog : {
            get() { return this.$store.state.price_copy.dialog_copy },
            set(v) { this.$store.commit('price_copy/update_dialog_copy', v) }
        },
        target_company () {
            return this.$store.state.price.selected_company
        },
        target_mou () {
            return this.$store.state.price.selected_mou
        },
        query_company : {
            get () {
                return this.$store.state.price_copy.query_company
            },
            set (v) {
                this.$store.commit('price_copy/update_query_company', v)
            }
        },
        companies : {
            get () {
                return this.$store.state.price_copy.companies
            },
            set (v) {
                this.$store.commit('price_copy/update_companies', v)
            }
        },
        selected_company : {
            get () {
                return this.$store.state.price_copy.selected_company
            },
            set (v) {
                this.$store.commit('price_copy/update_selected_company', v)
                //console.log(this.$store.state.price_copy.selected_company)
                //this.$store.commit('price_copy/update_mous', this.$store.state.price_copy.selected_company.mou)
                this.$store.commit('price_copy/update_selected_mou', {})
            }
        },
        mous : {
            get () {
                return this.selected_company.mou
            },
            set (v) {
                this.$store.commit('price_copy/update_mous', v)
            }
        },
        selected_mou : {
            get () {
                return this.$store.state.price_copy.selected_mou
            },
            set (v) {
                this.$store.commit('price_copy/update_selected_mou', v)
            }
        },
        xtransactions(){
            return this.$store.state.price_copy.jpagroups
        }
    },

    methods : {
        changeBtnFlagCopyAll(value) {
            var newval = (value === 'Y') ? 'N' : 'Y'
            this.copyall = newval
      },
        fixedDiscount(value){
            return +(parseFloat(value)).toFixed(2)
        },
        save () {
            var go_action = true
            var errors = []
            var transactions = this.$store.state.price_copy.jpagroups
            if(this.copyall === 'N' && (_.isEmpty(this.selected_company) || !this.selected_company)){
                errors.push("Main petak umpet sama orang utan, jangan lupa isi kelompok pelanggan")
                go_action = false
            }
                

            if(this.copyall === 'N' && (_.isEmpty(this.selected_mou) || !this.selected_mou )){
                go_action = false
                errors.push("Gal gadot jadi wonder women, jangan lupa isi agreement")
            }
                

             if(this.copyall === 'N' && (_.isEmpty(this.$store.state.price_copy.selected_transaction) || !this.$store.state.price_copy.selected_transaction )){
                 errors.push("Diet nasi makan kentang, salah satu group harus dicentang")
                  go_action = false
             }

             transactions.forEach(function(entry,index) {
                  if(parseFloat(entry.discount) > parseFloat(entry.Nat_JpaGroupMaxPxDisc)){
                    go_action = false
                    errors.push("Diskon "+entry.Nat_JPAGroupName+" melebihi dari ketetapan maksimal")
                  } 
                })
               // console.log(errors)
            if(go_action){
                var prm = {trx:this.$store.state.price_copy.jpagroups}
                prm.copyall = this.$store.state.price_copy.copyall
                this.$store.dispatch('price_copy/save_copy',prm)
            }
            else{
                this.$store.commit("price_copy/update_msg_info",errors.join('</br></br>'))
                this.$store.commit("price_copy/update_open_dialog_info",true)
                console.log('open '+this.open_dialog_info)
            }
            
        },
        thr_search: _.debounce( function () {
            var prm = this.$store.state.price.selected_company
            this.$store.dispatch("price_copy/search_company",prm)
            
        }, 700),
        checkTop(){
            var barcodes = this.xtransactions
            var selected =  _.filter(barcodes, function(o) { return o.chex; })
            this.bar_chx_all = false
            this.indeterminatex = false
            if(selected.length > 0 && barcodes.length === selected.length){
            this.bar_chx_all = true
            this.indeterminatex = false
           
            }
            if(selected.length > 0 && barcodes.length > selected.length){
            this.bar_chx_all = false
            this.indeterminatex = true
        
            }
            this.$store.commit("price_copy/update_selected_transaction",selected)
            
        },
         changeCbxAll(value){
            var arr = this.xtransactions
            this.indeterminatex = false
            this.btn_hide = true
            arr.forEach((el)=>{el.chex = value})
            var selected =  _.filter(arr, function(o) { return o.chex; })
            this.$store.commit("price_copy/update_selected_transaction",selected) 
            
        },
    },
    watch : {
      query_company(val, old) {
            
         if (val == null || typeof val == 'undefined') val = ""
         // console.log("1-val:"+val)
         if (val == old ) return
         // console.log("2-val:"+val)
         // if (! val) return
         // console.log("3-val:"+val)
         // if (val.length < 1 ) return
         // console.log("4-val:"+val)
         if (this.$store.state.price.search_status == 1 ) return  
         // console.log("5-val:"+val)
         this.$store.commit("price_copy/update_query_company", val)
         this.thr_search()
      }
   
   }
}
</script>