<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>
            <div v-if="tableType === 'SNEAKERS'">
              <base-input v-if="valurFil.type === 'text'"
                placeholder="-"  
                :type="valurFil.type" 
                :mask="valurFil.mask"  
                v-model="bodyData[key].keyName  = value[valurFil.name]"
                @change="(value) => sendSize(key, valurFil.name, value.target.value)"
              >
              </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>
            </div>
         
            <!-- NEW -->
            <div class="tdTable" v-else>
              <base-select-search v-if="valurFil.type === 'select'"
                :name="`${key}.${valurFil.name}`"
                v-model="bodyData[key].keyName  = value[valurFil.name]"
                @callback="setData"
                :option="valurFil.selectopt"
                initialValue="Selecione"
                style="padding-top: 8px"
              >
              </base-select-search>

              <div class="selectEqual" v-else-if="valurFil.type === 'selectEqual'">
                <select
                  class="optionEqual"
                  :style="tableGender === '371795' ? 'width: 80px' : ''"
                  :name="`${key}.${valurFil.name}`"
                  v-model="value[valurFil.nameFrom]"      
                  @change="()=>valueEqualsNameFrom(tableGender === '371795' ? valurFil.selectoptBaby : valurFil.selectoptEqual, value[valurFil.nameFrom],  value[valurFil.nameTo], key, valurFil.name)"
                >
                <option v-for="(equal, index) in tableGender === '371795' ? valurFil.selectoptBaby : valurFil.selectoptEqual" v-text="equal" :key="index"></option>
                </select>
                <span class="optionSpan" :class="value[valurFil.nameArray] && tableGender !== '371795' ? '' : 'equalValues' "> - </span>
                <select
                  class="optionEqual"
                  :name="`${key}.${valurFil.name}`"
                  v-model="value[valurFil.nameTo]"
                  :class="value[valurFil.nameArray] && tableGender !== '371795' ? '' : 'equalValues' "    
                  @change="()=>valueEqualsNameTo(valurFil.selectoptEqual, value[valurFil.nameFrom],  value[valurFil.nameTo], key, valurFil.name)"   
                >
                <option v-for="(equal, index) in value[valurFil.nameArray]" v-text="equal" :key="index"></option>
                </select>
              </div>

              <div class="selectEqual" v-if="valurFil.type === 'text'">
                <input
                  class="inputEqual"   
                  type="number"
                  :mask="valurFil.mask"  
                  v-model="bodyData[key].keyName  = value[valurFil.name] "
                  @change="(value) => sendSize(key, valurFil.name, value.target.value)"
                />        
                <span class="optionSpan" :class="bodyData[key].keyName ? '' : 'inputSpan'"> - </span>
                <input 
                  class="inputEqual" 
                  :class="value[valurFil.name] ? '' : 'inputSpan'"  
                  type="number"
                  :mask="valurFil.mask"  
                  v-model="bodyData[key].keyName  = value[valurFil.nameTo]"
                  @change="(value) => sendSize(key, valurFil.nameTo, value.target.value)"
                />
              </div>
            </div>
          </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>