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

      <v-card>
        <v-card-title
          class="subtitle-1 orange lighten-2"
        >
          CATATAN
        </v-card-title>

        <v-card-text>
          <v-layout v-if="notes.fo_note !== ''" mb-2 row>
              <v-flex mb-2 xs3>
                  <span style="color: #0f80db" class="mono name">FO</span>
              </v-flex>
              <v-flex xs9>
                  <v-layout row>
                      <v-flex mb-1 xs12>
                          <code style="box-shadow: none !important;color: #0f80db !important;background-color: #a8cfee6b !important;">{{notes.fo_note_user}}</code>
                          <div class="v-markdown">
                              <p style="margin-top:2px;margin-bottom:0">{{notes.fo_note}}</p>
                          </div>
                      </v-flex>
                  </v-layout>
              </v-flex>
          </v-layout>
          <v-layout v-if="notes.fo_ver_note !== ''" mb-2 row>
              <v-flex mb-2 xs3>
                  <span style="color: #0f80db" class="mono name">FO Verifikasi</span>
              </v-flex>
              <v-flex xs9>
                  <v-layout row>
                      <v-flex mb-1 xs12>
                          <code style="box-shadow: none !important;color: #0f80db !important;background-color: #a8cfee6b !important;">{{notes.fo_ver_note_user}}</code>
                          <div class="v-markdown">
                              <p style="margin-top:2px;margin-bottom:0">{{notes.fo_ver_note}}</p>
                          </div>
                      </v-flex>
                  </v-layout>
              </v-flex>
          </v-layout>
          <v-layout v-if="notes.sampling_note !== ''" mb-2 row>
              <v-flex mb-2 xs3>
                  <span style="color: #0f80db" class="mono name">Sampling</span>
              </v-flex>
              <v-flex xs9>
                  <v-layout row>
                      <v-flex mb-1 xs12>
                          <code style="box-shadow: none !important;color: #0f80db !important;background-color: #a8cfee6b !important;">{{notes.sampling_note_user}}</code>
                          <div class="v-markdown">
                              <p style="margin-top:2px;margin-bottom:0">{{notes.sampling_note}}</p>
                          </div>
                      </v-flex>
                  </v-layout>
              </v-flex>
          </v-layout>
          <v-layout v-if="notes.result_note !== ''" mb-2 row>
              <v-flex mb-2 xs3>
                  <span style="color: #0f80db" class="mono name">Isi Hasil</span>
              </v-flex>
              <v-flex xs9>
                  <v-layout row>
                      <v-flex mb-1 xs12>
                          <code style="box-shadow: none !important;color: #0f80db !important;background-color: #a8cfee6b !important;">{{notes.result_note_user}}</code>
                          <div class="v-markdown">
                              <p style="margin-top:2px;margin-bottom:0">{{notes.result_note}}</p>
                          </div>
                      </v-flex>
                  </v-layout>
              </v-flex>
          </v-layout>
          <v-layout v-if="notes.validation_note !== ''" mb-2 row>
              <v-flex mb-2 xs3>
                  <span style="color: #0f80db" class="mono name">Validasi</span>
              </v-flex>
              <v-flex xs9>
                  <v-layout row>
                      <v-flex mb-1 xs12>
                          <code style="box-shadow: none !important;color: #0f80db !important;background-color: #a8cfee6b !important;">{{notes.validation_note_user}}</code>
                          <div class="v-markdown">
                              <p style="margin-top:2px;margin-bottom:0">{{notes.validation_note}}</p>
                          </div>
                      </v-flex>
                  </v-layout>
              </v-flex>
          </v-layout>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="orange"
            flat
            @click="dialog_alert = false"
          >
            Tutup
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
        <v-flex xs12>
            <v-card class="mb-1">
                <v-layout align-center class="pr-1" row>
                    <v-flex xs2 pl-2 style="color:#9e9e9ea1" class="mono">
                        <v-btn dark title="periksa catatan" @click="dialog_alert = true" 
                        v-if="notes.fo_note !== '' || notes.fo_ver_note !== '' || notes.sampling_note !== '' || notes.result_note !== '' || notes.validation_note !== ''" 
                        style="min-width:15px" small class="orange lighten-2"><v-icon small>notification_important</v-icon></v-btn> Pengiriman Hasil</v-flex>
                    <v-flex class="text-xs-right" xs10>
                        <v-btn small style="font-size:x-small;text-transform: none!important;" v-for="delivery in deliveries" dark :color="delivery.color" :title="delivery.T_OrderDeliveryDestination" >
                        {{delivery.name}} <span class="pl-1" v-if="delivery.code === 'EMAIL'">( {{delivery.T_OrderDeliveryDestination}} )</span>
                        </v-btn>
                    </v-flex>
                </v-layout>
            </v-card>
            <v-card>
                <v-layout align-center class="pr-1" row>
                    <v-flex text-xs-center xs10>
                        <v-btn v-for="(xgroup,index) in xgroups_rpt" 
                            @click="generateReport(xgroup,index)"
                            :dark="xgroup.selected === 'N'" small 
                            :outline="xgroup.selected === 'Y'" 
                            mr-1 
                            color="purple">{{xgroup.group_name}}</v-btn>
                   
                        <v-btn v-for="(xgroup_info,index) in xgroups_info" 
                            dark small 
                            mr-1 
                            color="black">{{xgroup_info.group_name}}</v-btn>
                    </v-flex>
                    <v-flex style="color:#9e9e9ea1" class="mono caption" text-xs-right pr-2 xs2>
                        diprint sebanyak : <span style="color:black">{{printcount}}</span> kali
                    </v-flex>
                </v-layout>
                <v-layout class="pt-1 pl-2 pr-2 pb-2" style="min-height:570px;" wrap>
                    <v-layout v-if="alert_doctor.show === 'N'" row>
                        <v-flex xs12>
                            <object  style="overflow-y:scroll;" width="100%" :height="xheight" :data="xurl"></object>
                        </v-flex>
                    </v-layout>
              
                         <v-flex v-if="alert_doctor.show === 'Y'" xs12>
            <v-card color="blue-grey darken-2" class="white--text">
              <v-card-title primary-title>
                <div>
                  <div class="headline">HARAP DIJADIKAN PERHATIAN !</div>
                  <span>Diganti nama dokter yang sesuai sebelum melakukan cetak hasil</span>
                </div>
              </v-card-title>
              <v-card-text>
                  <p class="mb-1 font-weigth-black subtitle-1">{{alert_doctor.doctor_name}}</p>
                  <p class="mb-1 mono caption">{{alert_doctor.doctor_address}}</p>
              </v-card-text>
              <v-card-actions>
                <p class="pl-1 mb-1">Terima Kasih</p>
              </v-card-actions>
            </v-card>
          </v-flex>
                
                </v-layout>
            </v-card>
        </v-flex>
        <one-dialog-info :status="opendialoginfo" :msg="msginfo" @close-dialog-info="opendialoginfo = false"></one-dialog-info>
    </v-layout>
    
</template>

<style scoped>
    .btn-detail {
        min-width: 0px !important;
        height: auto;
        padding: 0px;
        top: 5px;
        right: 5px;
    }

    
  .scroll-container {
    scroll-padding: 50px 0 0 50px;
  }

  ::-webkit-scrollbar {
    width: 7px;
  }

  /* this targets the default scrollbar (compulsory) */

  ::-webkit-scrollbar-track {
    background-color: #73baf3;
  }

  /* the new scrollbar will have a flat appearance with the set background color */

  ::-webkit-scrollbar-thumb {
    background-color: #2196f3;
  }

  /* this will style the thumb, ignoring the track */

  ::-webkit-scrollbar-button {
    background-color: #0079da;
  }

  /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

  ::-webkit-scrollbar-corner {
    background-color: black;
  }
</style>

<script>
module.exports = 
{
    components : {
      'one-dialog-info':httpVueLoader('../../common/oneDialogInfo.vue')
   },
    data() {
      return {
        detail: false,
            xheight:'100%'
        
      };
   },
    computed : {
        dialog_alert: {
            get() { return this.$store.state.re_patient.dialog_alert},
            set(v) { 
                this.$store.commit('re_patient/update_dialog_alert',v) 
            }
        },
        opendialoginfo: {
            get() {
                return this.$store.state.re_patient.open_dialog_info
            },
            set(val) {
                this.$store.commit("re_patient/update_open_dialog_info",false)
            }
        },
        notes(){
            return this.$store.state.re_patient.notes
        },
        msginfo(){
            return this.$store.state.re_patient.msg_info
        },
        alert_doctor(){
            return this.$store.state.re_patient.alert_doctor
        },
        printcount(){
            return this.$store.state.re_patient.print_count
        },
        deliveries() {
         return this.$store.state.re_patient.deliveries
        },
        xgroups_rpt() {
            let groups = this.$store.state.re_patient.groups
         return  _.filter(groups, function(o) { return o.type === 'rpt' })
        },
        xgroups_info() {
            let groups = this.$store.state.re_patient.groups
         return  _.filter(groups, function(o) { return o.type === 'info' })
        },
        xurl: {
            get() {
                return this.$store.state.re_patient.url_print
            },
            set(val) {
                this.$store.commit("re_patient/update_url_print",val)
            }
        },
        selected_patient () {
            let x = this.$store.state.re_patient.selected_patient
            if (x)
                return x
            return {}
        },
        order_date() {
            let d = this.selected_patient.T_OrderHeaderDate
            let e = ''
            try {
                e = d.substr(0,10).split('-').reverse().join('-')
            } catch(e) { /*console.log(e.message)*/ }
            
            return e
        },

        dob_date() {
            let d = this.selected_patient.M_PatientDOB
            let e = ''
            try {
                e = d.substr(0,10).split('-').reverse().join('-')
            } catch(e) { /*console.log(e.message)*/ }
            
            return e
        },

        age() {
            let d = this.selected_patient.T_OrderHeaderM_PatientAge
            let e = ''
            try {
                e = d.replace(/tahun/, 'th').replace(/bulan/, 'bl').replace(/hari/, 'hr')
            } catch(e) { /*console.log(e.message)*/ }
            
            return e
        },

        langs() {
            let x = this.selected_patient
            if (!x) return ''

            let si_01 = x.T_OrderHeaderLangIsSI == 'Y' ? ' (SI)' : ''
            let si_02 = x.T_OrderHeaderAddOnSecondLangIsSI == 'Y' ? ' (SI)' : ''

            if (!x.SecondM_LangID) return x.M_LangName + si_01

            return x.M_LangName + si_01 + ', ' + x.SecondM_LangName + si_02
        }
    },
    methods : {
        generateReport(value,idx){
            if(value.type === 'rpt'){
                let groups = this.$store.state.re_patient.groups
                groups.forEach((el)=>{el.selected = 'N'})
                groups[idx].selected = 'Y'
                this.$store.commit('re_patient/update_groups', groups)
                var selected_group = value
                this.$store.commit('re_patient/update_selected_group', selected_group)
                let user = one_user()
                var xurl = "/birt/frameset?__report=report/one/lab/"+selected_group.rpt+".rptdesign&__format=pdf&username="+user.M_UserUsername+"&PID="+selected_group.order_id+"&tm="+Date.now()
                console.log(xurl)
                this.$store.commit('re_patient/update_url_print', xurl)
            }
      },
    }
}
</script>