<template>
  <label id="BaseGrid" :class="['field', `field-${size}`, classObject]">
    <span v-if="label" class="field-label">{{ label }}</span>

    <span v-if="description" class="field-description" v-html="description"></span>

    <div v-if="valid" class="field-valid-container">
      <i class="field-valid-icon fas fa-check-circle"></i>
    </div>

    <hr>
    <div class="row">
      <table class=" search-product-item full-width">
        <colgroup>

        </colgroup>
        <tr :style="styleTr"  v-html="header"></tr>
        <tr v-for="(value, key) in bodyData">

          <td v-for="(valurFil, keyFil ) in fields" >
            <div  v-if="errors[key]" class="field-error-container">
              <i class="field-error-icon fas fa-exclamation-circle"></i>
              <div class="field-error-message" v-text="errors[key]">

              </div>
            </div>
            <base-input v-if="valurFil.type != 'select'" placeholder="-"  :type="valurFil.type" :mask="valurFil.mask"  v-model="bodyData[key].keyName  = value[valurFil.name]"></base-input>
            <base-select-search
              v-else
              :name="`${key}.${valurFil.name}`"
              v-model="bodyData[key].keyName  = value[valurFil.name]"
              @callback="setData"
              :option="valurFil.selectopt"
              initialValue="Selecione"
            >

            </base-select-search>
          </td>

        </tr>
      </table>
    </div>
    <div class="top-margin-large">
      <div class="flex button-action">
        <base-button
          v-show="disabledAdd  == false"
          text="<i class='fas fa-plus'></i>"
          apperance="success"
          :disabled="disabledButton"
          size="medium"
          @click.native="addRow"
        ></base-button>
        <base-button
          v-show="disabledRemove == false"
          text="<i class='fas fa-minus'></i>"
          apperance="error"
          :disabled="disabledButton"
          size="medium"
          @click.native="removeRow"
        ></base-button>
      </div>
    </div>

  </label>
</template>

<style src="../../identity.css"></style>

<style src="../BaseGrid/styles.css"></style>
<style scoped src="../BaseGrid/styles.css" ></style>

<script src="./scripts.js"></script>