<template>
  <div class="ipub-table__tbody__tr__columns__item">
    <div v-if="val.slot && val.slot === 'actions'"
         class="table-actions">
      <slot name="actions"
            v-bind:record="item"
            v-bind:index="index"></slot>
    </div>
    <slot v-else-if="val.slot"
          :name="val.slot"
          v-bind:text="item[val.dataIndex]"
          v-bind:record="item"
          v-bind:index="index">
      <template v-if="val.slot === 'date'">
        {{ item[val.dataIndex]?$moment(item[val.dataIndex]).format('DD / MM / YYYY'): '- -' }}
      </template>
      <template v-if="val.slot === 'time'">
        {{ item[val.dataIndex]?$moment(item[val.dataIndex]).format('HH : mm DD / MM / YYYY'): '- -' }}
      </template>
      <template v-if="val.slot === 'status'">
        <div :class="['ipub-table-status-show', item[val.dataIndex]?'ipub-table-status-show--active':'']"></div>
      </template>
      <template v-if="val.slot === 'link'">
        <a class="link-color"
           style="word-break:break-all;"
           :href="item[val.dataIndex]">{{item[val.dataIndex]}}</a>
      </template>
      <template v-if="val.slot === 'img'">
        <img class="ipub-table-slot-img"
             :src="item[val.dataIndex]"
             alt="">
      </template>
      <template v-if="val.slot === 'html'">
        <div v-html="item[val.dataIndex]"></div>
      </template>
      <template v-if="val.slot === 'name'">
        <template v-if="item[val.dataIndex]">{{item[val.dataIndex].firstName}} {{item[val.dataIndex].lastName}}</template>
        <template v-else-if="item.firstName">{{item.firstName}} {{item.lastName}}</template>
        <template v-else>- -</template>
      </template>
      <template v-if="val.slot === 'names'">
        <template v-if="item[val.dataIndex]&&item[val.dataIndex].length">
          {{item[val.dataIndex].map((val)=>{return val.firstName+' '+val.lastName}).join(', ')}}
        </template>
        <template v-else>- -</template>
      </template>
      <template v-if="val.slot === 'names'">
        <div v-html="item[val.dataIndex]"></div>
      </template>
      <template v-if="val.slot === 'omis'">
        <ipub-tooltip style="width:100%"
                      v-if="item[val.dataIndex]"
                      placement="bottomLeft"
                      omis="omis"
                      :label="item[val.dataIndex].toString()" />
        <template v-else>- -</template>
      </template>
      <template v-if="val.slot === 'omission'">
        <ipub-tooltip style="width:100%"
                      v-if="item[val.dataIndex]"
                      placement="bottomLeft"
                      omis="omission"
                      :label="item[val.dataIndex].toString()" />
        <template v-else>- -</template>
      </template>
    </slot>
    <template v-else>
      <div>{{(item[val.dataIndex]||item[val.dataIndex]===0)?item[val.dataIndex].toString():'--'}}</div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    val: {
      type: Object,
      default () {
        return {}
      }
    },
    index: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped lang="scss">
</style>
