<template>
  <table class="q-table horizontal-delimiter" :style="tableStyle">
    <colgroup>
      <col v-if="selection" style="width: 60px;" />
      <col v-if="rowcount" style="width: 45px;" />
      <col v-for="col in cols" :style="{width: col.width}" />
      <col v-if="head && scroll.horiz" :style="{width: scroll.horiz}" />
    </colgroup>
    <thead v-if="head">
      <tr>
        <th v-if="selection" style="height:40px">&nbsp;<i>delete</i></th>
        <th v-if="rowcount" style="height:40px">&nbsp;</th>
        
        <th style="height:40px"
          v-for="col in cols"
          :class="{sortable: (col.sort && col.type !== 'checkbox' && col.type !== 'index')}"
          @click="sort(col)"
        >
          <!--<q-checkbox v-if="col.type === 'checkbox'" v-model="checkAll" v-check-all="checkAll" check-data="checkData" ></q-checkbox>-->
          <q-checkbox v-if="col.type === 'checkbox'" v-model="dataCheckAll" @input="checkAll(col, dataCheckAll)" ></q-checkbox>
          <sort-icon
            v-if="col.sort && col.type !== 'checkbox' && col.type !== 'index'"
            :field="col.field"
            :sorting="sorting"
          ></sort-icon>
          <span v-html="col.label"></span>
          <i v-if="col.type === 'text' || col.type === 'checkbox' || col.type === 'radio' || col.type === 'date'">edit</i>
        </th>
        <th v-if="head && scroll.horiz" style="height:32px"></th>
      </tr>
    </thead>
    <tbody v-else>
      <slot></slot>
    </tbody>
  </table>
</template>

<script>
import SortIcon from './plugins/sort/SortIcon.vue'

export default {
  /* 'check-all': {
    twoWay: true,
    params: ['checkData'],
    bind () {
      this.vm.$watch(this.params.checkData, (checkData) => {
        if (checkData.every((item) => item.checked)) {
          this.set(true)
        }
        else {
          this.set(false)
        }
      }, { deep: true })
    },
    update (checkAll) {
      if (checkAll) {
        this.vm[this.params.checkData].forEach((item) => {
          item.checked = true
        })
      }
      else {
        this.vm[this.params.checkData].forEach((item) => {
          item.checked = false
        })
      }
    }
  }, */
  props: {
    rows: Array,
    cols: Array,
    head: Boolean,
    sorting: Object,
    scroll: Object,
    selection: [String, Boolean],
    rowcount: Boolean
  },
  data () {
    return {
      dataCheckAll: false
    }
  },
  computed: {
    tableStyle () {
      return {
        width: this.head && this.vert ? `calc(100% - ${this.scroll.vert})` : '100%'
      }
    }
  },
  created () {
    // this.resetCheckValue()
  },
  methods: {
    sort (col) {
      if (col.sort && col.type !== 'checkbox') {
        this.$emit('sort', col)
      }
    },
    checkAll (col, checkAll) {
      this.$emit('checkAll', col, checkAll, () => {
      })
    }
  },
  components: {
    SortIcon
  }
}
</script>
