<template>
<div>
<v-layout  row>
   <v-flex xs12 pb-2>
      <v-card >
         <v-subheader>
            DATA COMPANY MOU
         </v-subheader>
         <v-divider></v-divider>
         <v-flex pt-2 xs12>
            <v-layout>
               <v-flex xs6 pl-5 pr-3>
                  <v-text-field
                     label="Nama Company"
                     placeholder=""
                     :value="getField(patient.M_CompanyName)"
                     readonly
                     ></v-text-field>
               </v-flex>
               <v-flex xs6 pl-5 pr-3>
                  <v-text-field
                     label="MOU"
                     placeholder=""
                     :value="getField(patient.mou)"
                     readonly
                     ></v-text-field>
               </v-flex>
            </v-layout>
         </v-flex>
         <v-flex xs12 pb-2>
            <v-layout row wrap>
               <v-flex xs6 pa-2 v-for="(vcm,idx) in vcompanymou" :key="vcm.id">
                  <one-field-verification-patient-doctor
                     :xdatalabel="vcm.label"
                     :xdatacbx="vcm.chex"
                     :xdatatxt="vcm.note"
                     @update-data-txt="(val) => updateDataTxtParentCompanyMou(idx,val)"
                     @update-data-cbx="(val) => updateDataCbxParentCompanyMou(idx,val)"
                  ></one-field-verification-patient-doctor>
               </v-flex>
            </v-layout>
         </v-flex>
      </v-card>
   </v-flex>
</v-layout>
<v-layout class="fill-height" row>
   <v-flex xs12>
      <v-card class="pa-1 grow">
         <v-subheader red--text text--lighten-1> DATA PEMERIKSAAN
            <v-flex text-md-right>
               <v-btn v-if="vlaststatus === '2'" small @click="openDialogPx()" color="primary">Tambah Pemeriksaan</v-btn>
               <one-verification-dialog-px @add-data-px="(cval) => updateDataParentPx(cval)"></one-verification-dialog-px>
            </v-flex>
         </v-subheader>
         <v-divider></v-divider>
         <v-layout row  wrap>
            <v-flex xs12 class="pt-2">
               <v-layout row wrap>
                  <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
                        <table>
                           <tr>
                              <th width="5%" class="text-md-center pt-2 pb-2">#</th>
                              <th  width="8%" class="text-md-center pt-2 pb-2"> CITO </th>
                              <th class="text-md-center pt-2 pb-2">PEMERIKSAAN</th>
                              <th class="text-md-center pt-2 pb-2">BRUTO</th>
                              <th class="text-md-center pt-2 pb-2">DISKON</th>
                              <th class="text-md-center pt-2 pb-2">TOTAL</th>
                           </tr>
                           <tr class="mini-input" v-for="(vpx,idx) in vtest">
                              <td style="text-align:center;vertical-align:center;" align="center">
                                 
                                 <v-checkbox v-if="vpx.addon == false" 
                                    v-model="vpx.chex"
                                    @change="updateDataCbxParentPx(idx,vpx.chex)" 
                                    class="pa-0" >
                                 </v-checkbox>
                                 <v-icon v-else-if="vpx.addon == true" color="red" @click="deleteDataParentPx(idx)">delete</v-icon>
                              </td>
                              <td style="text-align:center;vertical-align:center;" align="center" > <v-icon v-if="vpx.flagcito == 'Y'" large color="green darken-2">check</v-icon></td>
                              <td class="text-md-left pl-3">{{vpx.pxname}}</td>
                              <td class="text-md-right pr-2">{{convertMoney(vpx.bruto)}}</td>
                              <td class="text-md-right pr-2">{{convertMoney(vpx.discount)}}</td>
                              <td class="text-md-right pr-2">{{convertMoney(vpx.total)}}</td>
                           </tr>
                        </table>
                  </v-flex>
               </v-layout>
            </v-flex>
            
            <v-flex xs12 class="pl-4 pr-4 pt-2">
                  <v-layout row wrap>
                  <v-flex xs12 pl-2 pt-2 pb-2 v-for="(vi,idx) in vinfo" :key="vi.id">
                        <one-field-verification-patient-doctor
                        :xdatalabel="vi.label"
                        :xdatacbx="vi.chex"
                        :xdatatxt="vi.note"
                        @update-data-txt="(val) => updateDataTxtParentInfo(idx,val)"
                        @update-data-cbx="(val) => updateDataCbxParentInfo(idx,val)"
                        ></one-field-verification-patient-doctor>
                  </v-flex>
                  </v-layout>
            </v-flex>
            
           
         </v-layout>
      </v-card>
   </v-flex>
</v-layout>

</div>
</template>

<style scoped>
table {
   font-family: arial, sans-serif;
   border-collapse: collapse;
   width: 100%;
   background:white;
   border: 0px;
}

th, td {
   border: 1px solid black;
   border-collapse: collapse;
   padding-top: 2px;
   padding-bottom: 2px;
}
table>tr>td {
   padding: 8px;
}
table>tr>td:first {
   padding-left:15px!important;
}
.mini-input .v-input{
    margin-top: 0px; 
}

.mini-input .v-input, .mini-input .v-input--selection-controls,.mini-input .v-input__slot{
    margin-top: 0px; 
    margin-bottom:0px;
    margin-left:3px;
}
.mini-input .v-messages{
    min-height:0px;
}

.border-bottom-dashed{
      border-bottom : 1px dashed rgba(0,0,0,.12);
}
</style>
<script>
module.exports = {
   components : {
      'one-fo-verification-mou-px-curr-order' : httpVueLoader('./oneFoVerificationMouPxCurrOrder.vue'),
      'one-fo-verification-mou-px-add-order' : httpVueLoader('./oneFoVerificationMouPxAddOrder.vue'),
      'one-field-verification' : httpVueLoader('./oneFieldVerification.vue'),
      'one-field-verification-patient-doctor':httpVueLoader('../../common/oneFieldVerificationPatientDoctor.vue'),
      'one-verification-dialog-px' : httpVueLoader('./oneFoVerificationDialogPx.vue')
   },
   methods: {
      getField(inp) {
         if ( this.patient != undefined) {
            return inp
         }
         return ''
      },
      updateDataTxtParentCompanyMou(idx, val) {
         var prm = {idx:idx,val:val}
         this.$store.commit("verification/update_testing_txt_parent_company_mou",prm)  
      },
      updateDataCbxParentCompanyMou(idx, val) {
         var prm = {idx:idx,val:val}
         this.$store.commit("verification/update_testing_cbx_parent_company_mou",prm)  
         var xcount = this.$store.state.patient.no_save + 1
         this.$store.commit("patient/update_no_save",xcount)
      },
      updateDataTxtParentInfo(idx, val) {
         var prm = {idx:idx,val:val}
         this.$store.commit("verification/update_testing_txt_parent_info",prm)  
      },
      updateDataCbxParentInfo(idx, val) {
         var prm = {idx:idx,val:val}
         this.$store.commit("verification/update_testing_cbx_parent_info",prm)
         var xcount = this.$store.state.patient.no_save + 1
         this.$store.commit("patient/update_no_save",xcount)  
      },
      updateDataCbxParentPx(idx, val) {
         var prm = {idx:idx,val:val}
         this.$store.commit("verification/update_testing_cbx_parent_px",prm)  
         var xcount = this.$store.state.patient.no_save + 1
         this.$store.commit("patient/update_no_save",xcount)
      },
      deleteDataParentPx(idx){
         var inx = parseInt(idx);
         var oldArr = this.$store.state.patient.selected_patient
         oldArr.verification_px.splice(inx,1)
 
         this.$store.commit("patient/update_selected_patient",oldArr)
      },
      openDialogPx(){
         this.$store.commit('px/update_dialog_px_is_active',true)
      },
      updateDataParentPx(valx){
         //console.log(valx)
         var oldArr = this.$store.state.patient.selected_patient
         oldArr.verification_px.push(valx)
         this.$store.commit("patient/update_selected_patient",oldArr) 
         this.$store.commit("px/update_search","")
         this.$store.commit("px/update_pxs",{})
         this.$store.commit("px/update_selected_px",{})
         this.$store.commit("px/update_search_status",0)
         var xcount = this.$store.state.patient.no_save + 1
         this.$store.commit("patient/update_no_save",xcount)
      },
      companyChange : function(val) {
         if (val == true)
            this.n_company_false = "";
         console.log(val)

      },
      convertMoney(money){
            return one_money(money)
      }
   },
   computed : {
      vlaststatus() {
            return this.$store.state.patient.selected_patient.check_status
        },
      patient() {
         return this.$store.state.patient.selected_patient
      },
      vcompanymou() {
         return this.$store.state.verification.verification_companymou
      },
      vtest() {
         return this.$store.state.verification.verification_px
      },
      vinfo() {
         return this.$store.state.verification.verification_info
      },
      __company () {
         return this.$data._company;
      },

      __mou () {
         return this.$data._mou;
      }
   }
}
</script>
