<template>
  <div class="text-xs-center">
    <v-dialog
      v-model="dialog"
      width="600"
    >

      <v-card>
        <v-card-title
          v-if="info_mr.title" 
          class="headline grey lighten-2"
          primary-title
        >
          {{ info_mr.title }}
        </v-card-title>

         <div style="padding:10px;font-size:16px;background-color:#efefef;" v-html="info_mr.sub_title">
         </div>

        <v-card-text v-if="info_mr.note" v-html='info_mr.note' >
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="dialog = false"
          >
            Tutup
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<style > 
table.mr-table  {
   border-collapse: collapse;
   width:100%;
   border: 1px solid #e6e6e6;
   font-size:14px;
}
table.mr-table th {
  padding: 10px; 
  background-color: #e6e6e6;
}
table.mr-table td {
  padding: 10px; 
}
table.mr-table tr.reflex-ok td {
  background-color: #ccffcc;
}
table.mr-table tr.reflex-not-ok td {
  background-color: #ffcccc ;
}
table.mr-table tr.reflex-not-ok-argument td {
  background-color: #ffcc99;
}

table.mr-table tr.reflex-not-ok-global td {
  background-color: #ffffb3;
}

</style>
<script>
module.exports = {
    computed : {
        dialog : {
            get () { return this.$store.state.re_px.dialog_mr},
            set (v) { this.$store.commit("re_px/update_dialog_mr", v) }
        },
        info_mr() { 
           let mr = this.$store.state.re_px.selected_mr_state
           let title = mr[3]["title"];
           let sub_title = mr[3]["sub_title"];
           let overlimit = mr[3]["overlimit"];
           if (overlimit) {
              sub_title = '<span style="font-weight:bold; color:red">' + sub_title + "</font>";
           }
           let note = ""
           
           if ( mr[3]["argument_1"]) {
               let arg= mr[3]["argument_1"];

               for(let idx =0; idx < arg.length ; idx++ ) {
                 if ( note != "" ) note  += "<br/>";
                 let px_arg = arg[idx]["px"];
                 let note_arg = arg[idx]["note"];
                 note += '<table class="mr-table" >';
                 note += '<tr>';
                 note += '<th>Argument 1</th><th style="text-align:center" >Hasil</th> <th style="text-align:center" >Condition</th>';
                 note += '</tr>';
                 let xtr_class = 'reflex-not-ok-argument';
                 if ( arg[idx]['is_ok'] ) xtr_class = 'reflex-ok';
                 if ( arg[idx]['is_ok'] == false && arg[idx]['is_ok_argument']) xtr_class = 'reflex-not-ok-global';
                 note += '<tr class="' + xtr_class + '" />';
                 note += '<td>' + px_arg + '</td>';
                 note += '<td style="text-align:center" >' + arg[idx]['result'] + '</td>';
                 note += '<td style="text-align:center" >' + arg[idx]['condition'] + '</td>';
                 note += '</tr>';
                 if ( ! arg[idx]['is_show_mandatory']) {
                    note += '</table>';
                    continue;
                 }
                 if ( arg[idx]['mandatory'].length == 0 ) {
                    note += '<tr><td colspan="3">Tidak ada mandatory</td></tr>';
                    note += '</table>';
                    continue;
                 }
                 note += '<th>Mandatory</th><th style="text-align:center" >Hasil</th> <th style="text-align:center" >Condition</th>';
                 note += '</tr>';
                 let mandatory = arg[idx]['mandatory'];
                 for(let jdx=0; jdx < mandatory.length ; jdx++) {
                   let px = mandatory[jdx]['px'];
                   let result = mandatory[jdx]['result'];
                   let condition= mandatory[jdx]['condition'];
                   let tr_class = 'reflex-not-ok';
                   if ( mandatory[jdx]['is_ok'] ) tr_class = 'reflex-ok';
                    note += '<tr class="' + tr_class + '" />';
                    note += '<td>' + px + '</td>';
                    note += '<td style="text-align:center" >' + result + '</td>';
                    note += '<td style="text-align:center" >' + condition + '</td>';
                    note += '</tr>';
                 }
                 note += '</table>';
               }
           }
           

           let result ={
              title : title,
              sub_title : sub_title,
              overlimit: overlimit,
              note  : note
           };
           return result;
        }

    }
}
</script>
