
export default {
  name: 'BaseGrid',
  inheritAttrs: false,
  data(){
    return {
      btnSubmitLoading: true,
      disableForm: true,
      keyName: '',
      matrizVue: this.mountMatriz(),
      errors: [],
    }
  },
  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
    },
  },
  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(){
      this.bodyData.push({});
    },
    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);
    }
  },

}