<template>
  <div>
  <v-btn
    color="primary"
    :disabled="is_disabled"
    @click="viewfpp= true"
  >
 {{button_title}}
  </v-btn>

  <one-dialog-print :title="printtitle" :width="printwidth" :height="550" :status="viewfpp" :urlprint="urlfpp" @close-dialog-print="viewfpp = false">
  </one-dialog-print>
  </div>
</template>

<script>

async function checkFpp(param, id) {
  try {
      var resp = await axios.get("/one-api/file_upload/get_fpp/" + id);
      if (resp.status != 200) {
        param.button_title = "Error Checking Fpp : " + resp.statusText;
        return;
      }
      let data = resp.data;
      if (data.rows.length > 0) {
        param.button_title = "Lihat FPP";
        param.is_disabled = false;
        param.urlfpp = data.rows[0].fppUrl;
        return;
      }
      param.button_title = "FPP belum di upload";
  } catch(e) {
      param.button_title = "Error Checking Fpp : " + e.message;
  }
}

module.exports = {
  components : {
    'one-dialog-print':httpVueLoader('../../common/oneDialogPrintX.vue')
  },
  props: ["id"],
  data () {
    return {
      urlfpp:'',
      printtitle:'View FPP',
      printwidth:'60%',
      isLoading:false,
      viewfpp: false,
      button_title: "Checking FPP",
      is_disabled:true
    }
  },
  mounted() {
     console.log('Mounted',this.id);
    let self = this;
    let n = parseInt(this.id.orderHeaderID.toString());
    if (n == 0) return;
    self.urlfpp = '';
    self.is_disabled = true;
    self.button_title = "Checking FPP"
    checkFpp(self,n);
  },
  watch: {
    async id(n,o) {
      console.log('Watch FPP ID', n );
      let self = this;
      if (n == 0) return;
      self.urlfpp = '';
      self.is_disabled = true;
      self.button_title = "Checking FPP"
      checkFpp(self,n.orderHeaderID);
    }
  }
}
</script>
