<template>
  <img
    :class="[componentClass]"
    :alt="getAlt"
    :src="getSrc"
  />
</template>

<script>
const props = {
  dataFieldIdent: {
    type: String,
    default: null
  },
  dataFieldIdent4Alt: {
    type: String,
    default: null
  },
  emptyImageIconPath: {
    type: String,
    default: "public/images/EmptyImageIcon.png"
  },
  src: {
    type: String,
    default: null
  },
  sourceKind: {
    type: String,
    default: "rows"
  }
}

import base from './c-base'
import stringUtils from '../classes/stringUtils'

export default {
  extends: base,
  data: function () {
    return {
      componentClass: 'c-image'
    }
  },
  props,
  computed: {
    getAlt: function () {
      return this.getDataFieldValue(this.dataFieldIdent4Alt)
    },
    getSrc: function () {
      if (this.src !== null) {
        return this.src
      }
      let src = null
      let dataValue = this.getDataFieldValue(this.dataFieldIdent) 
      if (dataValue !== null && dataValue !== undefined) {
        let fileIdentNameArray = dataValue.split("/");
        let fileIdent = (fileIdentNameArray.length > 1) ? fileIdentNameArray[0] : dataValue
        let fileExt = stringUtils.getFileExtension(fileIdent)
        let fileIdentSplit = fileIdent.split('|')
        if (!stringUtils.isEmpty(fileExt) && fileIdentSplit.length == 4) {
          fileIdent = fileIdent.slice(0, (fileExt.length + 1) * (-1));
        }
        let filename = (fileIdentNameArray.length > 1) ? fileIdentNameArray[fileIdentNameArray.length - 1] : fileIdent;
        if ((stringUtils.isEmpty(fileExt) === true) && (fileIdentNameArray.length > 1)) {
          fileExt = stringUtils.getFileExtension(filename)
        }
        if (filename != null) {
          filename = filename.replace(new RegExp("\\|", "g"), "_");
          if (stringUtils.isEmpty(fileExt) === true)
            filename += '.png'
        }
        src = this.getAPIImageServerURL(fileIdent, filename)
      }
      if (src == null && this.state === 1)
        src = this.emptyImageIconPath
      return src
    }
  }
}</script>

