export default {
  name: 'BaseGrid',
  inheritAttrs: false,
  data() {
    return {
      btnSubmitLoading: true,
      disableForm: true,
      keyName: '',
      matrizVue: this.mountMatriz(),
      errors: [],
      finalValue: '',
      tableDomain: this.tableType,
      tableGender: this.gender
    };
  },
  components: {
    BaseInput: () => import(/* webpackChunkName: "BaseInput" */ '@elements/BaseInput/index.vue'),
    BaseButton: () => import(/* webpackChunkName: "BaseButton" */ '@elements/BaseButton/index.vue'),
    BaseCard: () => import(/* webpackChunkName: "BaseCard" */ '@elements/BaseCard/index.vue'),
    BaseSelectSearch: () => import(/* webpackChunkName: "BaseSelectSearch" */ '@elements/BaseSelectSearch/index.vue'),
    BaseSelect: () => import(/* webpackChunkName: "BaseSelect" */ '@elements/BaseSelect/index.vue'),
  },
  props: {
    label: {
      type: String,
    },
    description: {
      type: String,
    },
    errorGrid: {
      type: Array,
    },
    valid: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: 'medium',
      validator(value) {
        return ['small', 'medium', 'large'].indexOf(value) !== -1;
      },
    },
    required: {
      type: Boolean,
      default: false,
    },
    title: {
      type: Array,
    },
    fields: {
      type: Array,
    },
    bodyData: {
      type: Array,
    },
    fontSize: {
      type: String,
      default: '0.6em',
    },
    textAlign: {
      type: String,
      default: 'left',
    },
    disabledButton: {
      type: Boolean,
      default: false,
    },
    disabledRemove: {
      type: Boolean,
      default: false,
    },
    disabledAdd: {
      type: Boolean,
      default: false,
    },
    tableType: {
      type: String,
    },
    gender:{
      type: String,
    }
  },
  watch: {
    errorGrid(value) {
      if (value == '') {
        return;
      }
      this.errors = [];

      for (let i = 0; i < this.errorGrid.length; i++) {
        let indice = Object.keys(this.errorGrid[i]);
        for (let j = 0; j < indice.length; j++) {
          if (indice[j]) {
            let keyRow = indice[j].substr(0, indice[j].indexOf('.'));
            let keyname = indice[j].substr(indice[j].indexOf('.') + 1, indice[j].length);

            if (!this.errors[keyRow]) {
              this.errors[keyRow] = '';
            }
            this.errors[keyRow] += ' Coluna: ' + keyname + ' : ' + this.errorGrid[i][indice[j]];
          } else {
            this.errors[keyRow] = false;
          }
        }
      }
    },
  },
  computed: {
    header() {
      //Monstagem da tabele e disposições de Informações.
      this.btnSubmitLoading = true;
      this.disableForm = true;

      if (this.fields) {
        let header = '';
        this.fields.forEach(function(data) {
          header += '<th name="' + data.name + '">' + data.title + '</th>';
        });
        return header;
      }
    },
    styleTr() {
      return {
        'text-align': this.textAlign,
        'font-size': this.fontSize,
      };
    },
    tableBody() {
      let fields = this.fields;

      if (this.bodyData) {
        this.bodyData.forEach(function(dataBody) {
          fields.forEach(function(dataHeader) {
            if (dataBody[dataHeader.name]) {
            }
          });
        });
        return;
      }
    },
    classObject() {
      return {
        'field-disabled': this.disabled,
        'field-required': this.required,
        'field-error': this.errorGrid,
        'field-valid': this.valid,
        'field-small': this.size === 'small',
        'field-medium': this.size === 'medium',
        'field-large': this.size === 'large',
      };
    },
  },
  mounted() {
  },
  methods: {
    addRow() {
      if (this.tableDomain === 'SNEAKERS') {
        this.bodyData.push({});
      } else {
        const newData = {
          filtrable_size: '',
          filtrable_size_from: '',
          filtrable_size_to: '',
          filtrable_size_array: '',       
          waist_circumference_from: '',
          waist_circumference_to: '',  
          person_height_from: '',
          person_height_to: '',
          hip_circumference_from: '',
          hip_circumference_to: '',        
        };
      
        if (this.tableDomain !== 'SHORTS') {
          newData.chest_circumference_from = '';
          newData.chest_circumference_to = '';
        }
      
        this.bodyData.push(newData);
      }
    },
    removeRow() {
      this.bodyData.pop();
    },
    focused(input) {
      console.log('Input ' + input);
    },
    selected(span) {
      let id = span.target.id;

      this.matrizVue[id.substr(1, 1)][id.substr(2, 1)] = true;

      console.log(this.matrizVue);
    },
    mountMatriz() {
      let matriz = [];
      let lenghtFields = [];
      for (let i = 0; i < this.bodyData.length; i++) {
        for (let j = 0; j < this.fields.length; j++) {
          lenghtFields.push(false);
        }
        matriz.push(lenghtFields);
        lenghtFields = [];
      }

      return matriz;
    },
    toogle(i, j) {
      console.log(this.matrizVue[i][j]);
      return this.matrizVue[i][j];
    },
    setData(val, val2) {
      let keyRow = val2.substr(0, val2.indexOf('.'));
      let keyname = val2.substr(val2.indexOf('.') + 1, val2.length);

      for (var value in this.bodyData[keyRow]) {
        if (value == keyname) this.bodyData[keyRow][value] = val;
      }
    },
    information() {
      console.log(this.bodyData);
    },
    sendSize(key, name, value) {
      this.bodyData[key][name] = value;
    },
    valueEqualsNameFrom(array, originEqual, modifyEqual, key, valurFilName) {
      const indexOriginEqual = array.indexOf(originEqual);
      const indexModifyEqual = array.indexOf(modifyEqual);

      if (indexOriginEqual === -1 || indexOriginEqual === array.length - 1) {
        this.bodyData[key]['filtrable_size_array'] = false;

      } else {
        this.bodyData[key]['filtrable_size_array'] = array.slice(indexOriginEqual, indexOriginEqual + 10);
      }

      if (modifyEqual && indexModifyEqual > indexOriginEqual) {
        const finalValue = array.filter((item, index) => {
          return index >= indexOriginEqual && index <= indexModifyEqual;
        });
        this.finalValue = finalValue;

      } else if (modifyEqual && indexModifyEqual === indexOriginEqual) {
        this.bodyData[key]['filtrable_size_array'] = false;
        this.bodyData[key]['filtrable_size_to'] = '';
        this.finalValue = originEqual;

      } else {
        this.finalValue = originEqual;
      }
      if(this.tableGender === '371795'){
        this.finalValue = originEqual;
      } 
  
      if((indexModifyEqual - indexOriginEqual) >= 9){
        this.finalValue = originEqual;
      }

      this.sendSize(key, valurFilName, this.finalValue);
    },
    valueEqualsNameTo(array, originEqual, modifyEqual, key, valurFilName) {
      const indexOriginEqual = array.indexOf(originEqual);
      const indexModifyEqual = array.indexOf(modifyEqual);

      const finalValue = array.filter((item, index) => {
        return index >= indexOriginEqual && index <= indexModifyEqual;
      });

      if (!finalValue.length || finalValue.length === 1) {
        this.bodyData[key]['filtrable_size_array'] = false;
        this.bodyData[key]['filtrable_size_to'] = '';
      }

      this.finalValue = finalValue;
      this.sendSize(key, valurFilName, this.finalValue);
    },
  },
};
