<template>
  <div>
    <table-content :cols="cols" :rowcount="rowcount" :selection="config.selection">
      <tr v-for="(row,index) in rows" :style="activeStyle[index]" v-on:mouseover="mouseOver(index)">
        <td v-if="config.selection !== undefined && config.selection"></td>
        <td v-if="leftStickyColumns" :colspan="leftStickyColumns" style="width:0px"></td>
        <td v-if="col.type.toLowerCase() !=='index'" v-for="(col, index2) in regularCols" :style="formatStyle(col, row[col.field], row)" :class="formatClass(col, row[col.field], row)">
          <slot :name="'col-'+col.field" :row="row" :col="col" :data="row[col.field]">
            <div v-if="(col.type === 'text' || col.type === 'label') && (col.modify === true || (row._add === true && col.insert === true))">
              <input type="text" v-model="row[col.field]" :ref="'field-'+index+'-'+col._index">
            </div>
            <div v-if="col.type.toLowerCase() === 'password' && (col.modify === true || (row._add === true && col.insert === true))">
              <input type="password" v-model="row[col.field]" :ref="'field-'+index+'-'+col._index">
            </div>
            <div v-if="col.type.toLowerCase() === 'radio' && (col.modify === true || (row._add === true && col.insert === true))">
              <q-radio v-model="row[col.field]" :val="index" :ref="'field-'+index+'-'+col._index"></q-radio>
            </div>
            <div v-if="col.type.toLowerCase() === 'checkbox' && (col.modify === true || (row._add === true && col.insert === true))">
              <q-checkbox v-model="row[col.field]"  @value="checkValue(row[col.field], 2,col,row)" 
              @input="checkValue(row[col.field],1,col,row)" :ref="'field-'+index+'-'+col._index"></q-checkbox>
            </div>   
            <div v-if="col.type.toLowerCase() === 'toggle' && (col.modify === true || (row._add === true && col.insert === true))">
              <q-toggle class="orange" v-model="row[col.field]" v-bind:value="checkValue(row[col.field],2,col,row)" 
              @input="checkValue(row[col.field],1,col,row)" :ref="'field-'+index+'-'+col._index"></q-toggle>
            </div>
            <div v-if="(col.type.toLowerCase() === 'date' || col.type.toLowerCase() === 'datetime' || col.type.toLowerCase() === 'time') 
                && (col.modify === true || (row._add === true && col.insert === true))">
              <q-datetime v-model="row[col.field]" type="date" @focus="$event.target.select()" :readonly="col.readonly" 
              class="full-width" :min="range.min" :max="range.max" :ref="'field-'+index+'-'+col._index">
              </q-datetime>
            </div>
            <div v-if="col.type.toLowerCase() === 'select' && (col.modify === true || (row._add === true && col.insert === true))">
              <s-autocomplete v-model="row[col.field]" @search="search2" :id="col.field" 
                :min-characters="col.minCharacters === undefined ? 0 : col.minCharacters"
                :max-characters="col.maxCharacters === undefined ? 6 : col.maxCharacters"
                :allowOther="col.allowOther"
                @selected="selected" :delay="0">
                <s-input-frame class="s-input" :stack-label="col.floatlabel" :float-label="col.floatlabel" >
                  <q-search v-model="row[col.field]" @input="$v.row[col.field].$touch()"></q-search>
                </s-input-frame>
              </s-autocomplete>
            </div>
            <div v-if="col.type.toLowerCase() === 'radioselect' && (col.modify === true || (row._add === true && col.insert === true))">
              <q-select type="radio" v-model="row[col.field]" :options="optionObject(col.options)"></q-select>
            </div>
            <div v-if="col.type.toLowerCase() === 'checkboxselect' && (col.modify === true || (row._add === true && col.insert === true))">
              <q-select type="checkbox" v-model="row[col.field]" :options="optionObject(col.options)"></q-select>
            </div>
            <div v-if="(col.type.toLowerCase() === 'label' && row._add === false && col.modify === false) || col.type === undefined || (col.modify === false && row._add === false)
              || (col.insert === false && row._add === true)">
              <div v-if="col.type.toLowerCase() === 'password'">
                <input type="password" v-model="row[col.field]" :ref="'field-'+index+'-'+col._index">
              </div>
              <div v-else>
                <span v-html="format(row, col)"></span>
              </div>
            </div>
            <Expand v-if="col.type.toLowerCase() === 'expand'" :row="row" :page="thispage" :render="expandRender" :index="index" :class="expandClasses(col,col.type,col.size)"></Expand>
          </slot>
        </td>
        <td v-if="rightStickyColumns" :colspan="rightStickyColumns"></td>
      </tr>
    </table-content>
  </div>
</template>

<script>
import TableContent from './TableContent.vue'

export default {
  props: {
    config: {
      type: Object,
      default () {
        return {}
      }
    },
    cols: {
      type: Array,
      default () {
        return []
      }
    },
    regularCols: {
      type: Array,
      default () {
        return []
      }
    },
    rows: {
      type: Array,
      default () {
        return []
      }
    },
    leftStickyColumns: {
      type: Number,
      default () {
        return 0
      }
    },
    rightStickyColumns: {
      type: Number,
      default () {
        return 0
      }
    },
    activeStyle: Array,
    rowcount: Boolean
  },
  data () {
    return {
      active: []
    }
  },
  methods: {
    optionObject (functionName) {
      var option = ''
      if (typeof done !== 'function') {
        return functionName
      }
      else {
        option = this.$emit(functionName, () => {
        })
        // console.log(option)
        return option
      }
    },
    format (row, col) {
      return col.format ? col.format(row[col.field], row) : row[col.field]
    },
    formatStyle (col, value, row) {
      return typeof col.style === 'function' ? col.style(value) : col.style
    },
    formatClass (col, value, row) {
      if (typeof col.classes === 'function') {
        return col.classes(value)
      }
      else {
        if (col !== undefined && col._index === 2 && row._modify !== undefined && row._modify === true) {
          if (col.classes === undefined) {
            return ` column-dirty`
          }
          else {
            return col.classes + ` column-dirty`
          }
        }
        else {
          return col.classes
        }
      }
    },
    checkValue (val, type, col, row) {
      var val2 = false
      if (type === 2) {
        if (val === true || val === 1) {
          val2 = true
        }
        else {
          val2 = false
        }
      }
      else {
        if (val === true || val === 1) {
          val2 = false
        }
        else {
          val2 = true
        }
      }
      return val2
    },
    mouseOver (index) {
      this.$emit('mouseOver', index, () => {
      })
    }
  },
  components: {
    TableContent
  }
}
</script>
