<template>
  <table
    class="ay-table.ay-table_center"
    sumary="Resumen del contenido de una tabla"
  >
    <thead class="ay-table__head">
      <tr class="ay-table__row">
        <th  
          v-for="field in fields"
          :id="field.key"  
          :key="field.key"
          class="ay-table__head-cell" 
        >
          fghgfh
        </th>
      </tr>
    </thead>
    <tbody class="ay-table__body">
      <tr
        v-if="items.length === 0"
        class="ay-table__row"
      >
        <td
          class="ay-table__cell"
          headers="n-receipt"
          :colspan="items.length + 1"
        >
          No data found.
        </td>
      </tr>
      <tr
        v-for="data in items"
        :key="data.id"
        class="ay-table__row"
      >
        <td
          v-for="value in data"
          :key="value.id"
          class="ay-table__cell"
          headers="n-receipt"
        >
          {{ value }}
        </td>
      </tr>
      <slot name="actions" />
    </tbody>
  </table>
</template>

<style scoped>

</style>

<script>
/**
 * @fileoverview  Table
 * @version       0.1
 * @author        Miguel Ortiz <miguel.ortiz@decameron.com>
 */

/**
 * Constantes para este componente
 */
const COMPONENT_NAME = 'v-table'

export default {
  name: COMPONENT_NAME,
  props: {
    id: {
        type: String,
        default: 'vue-data-table'
    },
    fields: {
        type: [ Array, Object ],
        required: true,
    },
    items:{
        type: [ Array, Object ],
        required: true,
    }
  },
  data() {
    return {
      inputVal: this.valueInput
    }
  },
  methods: {
    /**
     * Valida el estado de lo campos
     */
    validateState(ref) {
      if (this.veeFields[ref] && (this.veeFields[ref].dirty || this.veeFields[ref].validated)) {
        return !this.errors.has(ref)
      }
      return null
     },
    /**
     * Retorna el valor
     */
    handleValue() {
      this.$emit('input', this.inputVal);
    }
  }
}
</script>