<template>
  <div class="auto-verif-valid">
    <img :src="verifImg"  class="icon"  :style="styleVerif" @click="showVerif()" />
    <img :src="validImg" class="icon" :style="styleValid" @click="showValid()" />
  </div>
</template>
<script>
module.exports = {
  components : {
  },
  data () {
    return {
      dialog_autovrvf:false,
      title:'',
      isLoading: false
    }
  },
  methods : {
    showValid() {
      this.$store.dispatch("autoVerifValid/showValid",{title: "Informasi AutoValid", detailID: this.detailId}); 
    },
    showVerif() {
      this.$store.dispatch("autoVerifValid/showVerif",{title: "Informasi AutoVerif", detailID: this.detailId}); 
    }
  },
  computed: {
    styleVerif() {
      let av = this.$store.state.autoVerifValid.autoVerif;
      let detId = this.detailId;
      let idx = _.findIndex(av,function(v) { 
        let xid = parseInt(v.id);
        return xid == detId;
      });
      if (idx > -1) {
        return {
          cursor: 'pointer'
        };
      }
      return {};
    },
    styleValid() {
      let av = this.$store.state.autoVerifValid.autoValid;
      let detId = this.detailId;
      let idx = _.findIndex(av,function(v) { 
        let xid = parseInt(v.id);
        return xid == detId;
      });
      if (idx > -1) {
        return {
          cursor: 'pointer'
        };
      }
      return {};
    },
    verifImg() {
      let av = this.$store.state.autoVerifValid.autoVerif;
      let detId = this.detailId;
      let idx = _.findIndex(av,function(v) { 
        let xid = parseInt(v.id);
        return xid == detId;
      });
      if (idx > -1) {
        if (av[idx].status) {
          return "/one-ui/apps/image/vr-green.png";
        } else {
          return "/one-ui/apps/image/vr-red.png";
        }
      } else {
        return "/one-ui/apps/image/vr-grey.png";
      }
    },
    validImg() {
      let av = this.$store.state.autoVerifValid.autoValid;
      let detId = this.detailId;
      let idx = _.findIndex(av,function(v) { 
        let xid = parseInt(v.id);
        return xid == detId;
      });
      if (idx > -1) {
        if (av[idx].status) {
          return "/one-ui/apps/image/vl-green.png";
        } else {
          return "/one-ui/apps/image/vl-red.png";
        }
      } else {
        return "/one-ui/apps/image/vl-grey.png";
      }
    },
  },
  props:["headerId","detailId"],
}
</script>
<style scoped>
  div.auto-verif-valid  {
    padding: 0px 5px;
    padding-top: 4px;
    border-radius: 5px;
    border: solid 1px #383838;
    max-width: 70px;
  }
  div.auto-verif-valid  img.icon {
    width:22px;
    height:22px;
    margin-right:5px;
  }
</style>
