<template lang="pug">
  #app
    section.section.is-test-blue
      //- Search
      data-sheet.card(
        :model="sheetDataModel"
        :columns="sheetDataColumns"
        :keyIteratee="(row) => row.id"
        :downloadIteratee="downloadIteratee"
        :downloadFileName="'data-sheet-' + new Date().toISOString().split('T')[0]"
      )
        .data-sheet(
          slot-scope="{ displayModel, displayModelSlice, displayColumns, columnar, filters, select, match, download, paginate }"
          style="padding: 0.75rem;"
        )
          //- Title/Search
          .columns.data-sheet-nav
            .column.is-narrow.is-size-5.has-text-weight-bold.data-sheet-title
              span Example Title
            .column.data-sheet-nav-control-center
              data-sheet-search(
                :updateMatchText="match.updateMatchText"
                :matchText="match.text"
              )
            .column.is-narrow.data-sheet-nav-control-center
              data-sheet-pagination-control(
                :displayModel="displayModel"
                :download="download"
                :paginate="paginate"
              )
          //- Filter List
          data-sheet-filters(
            :filters="filters"
          )
          //- Scrollable Wrapper
          .data-sheet-table-wrapper
            //- Table
            table.table.data-sheet-table(:class="modifiers")
              //- Column Headers
              thead
                data-sheet-column-title(
                  :columns="displayColumns"
                  :columnar="columnar"
                  :select="select"
                )
                  //- Example of overriding a Nested Slot
                  template(
                    slot="priceSale-title-text"
                    slot-scope="{ column }"
                  )
                    a.has-text-danger(@click.prevent.stop="columnar.toggleSortDirection(column)") {{ column.heading || column.title || '' }} ($)
              //- Column Totals
              thead(v-if="Object.keys(columnar.columnTotals).length > 0")
                td.has-text-grey() Totals
                td(
                  v-for="column in displayColumns"
                  :class="[columnar.alignment[column.key], columnar.whitespace[column.key]]"
                ).has-text-grey {{ columnar.columnTotals[column.key] }}
              //- Body Rows
              data-sheet-body(
                :model="displayModelSlice"
                :columns="displayColumns"
                :columnar="columnar"
                :select="select"
                :selectedRows="selectedRows"
                keyProperty="id"
              )
                //- Default Slot Override with Filtering & Iteratee
                template(
                  slot="name-cell"
                  slot-scope="{ row, value }"
                )
                  a(@click.prevent.stop="filters.add({name: `Name = '${row.name}'`, predicate: predicateRow => predicateRow.name === row.name})") Hello, {{ (value.iteratee && value.iteratee(row)) || row[value.property] }} World
                //- Default SLot Filtering
                template(
                  slot="priceSale-cell"
                  slot-scope="{ row, value }"
                )
                  a(@click.prevent.stop="filters.add({name: `PriceSale = $${row.priceSale}`, predicate: predicateRow => predicateRow.priceSale === row.priceSale})") ${{ (value.iteratee && value.iteratee(row)) || row[value.property] }}
  </div>
</template>

<script>
import DataSheet from './components/DataSheet.vue'
import DataSheetColumnTitle from './components/DataSheetColumnTitle.vue'
import DataSheetBody from './components/DataSheetBody.vue'
import DataSheetPaginationControl from './components/DataSheetPaginationControl.vue'
import DataSheetFilters from './components/DataSheetFilters.vue'
import DataSheetSearch from './components/DataSheetSearch.vue'
import { debounce } from 'lodash'

export default {
  name: 'app',
  components: {
    'data-sheet': DataSheet,
    'data-sheet-column-title': DataSheetColumnTitle,
    'data-sheet-body': DataSheetBody,
    'data-sheet-pagination-control': DataSheetPaginationControl,
    'data-sheet-filters': DataSheetFilters,
    'data-sheet-search': DataSheetSearch
  },
  data () {
    return {
      downloadIteratee: row => ({
        Name: row.name,
        Price: '$' + row.priceSale,
        Text: row.text,
        'Text 2': row.text2,
        Number: row.number,
        'LongText': row.longContent
      }),
      matchText: '',
      matchProperty: ''
    }
  },
  computed: {
    selectedRows () {
      return {
        0: false,
        1: false,
        2: false
      }
    },
    modifiers () {
      return {
        'is-bordered': true,
        'is-striped': true,
        'is-narrow': true,
        'is-hoverable': true,
        'is-fullwidth': true
      }
    },
    sheetDataModel () {
      const longBoard = {
        name: 'Long Board',
        priceSale: 9.99,
        text: 'Test',
        text2: 'Retest',
        number: 100.99,
        longContent: 'This is very long content that should not be worried about by anyone.'
      }
      const deluxeLongBoard = {
        name: 'Deluxe Long Board',
        priceSale: 19.99,
        text: 'Test',
        text2: 'Retest',
        number: 100.99,
        longContent: 'This is very long content that should not be worried about by anyone.'
      }
      const bikeRack = {
        name: 'Bike Rack',
        priceSale: 260.98,
        text: 'Test',
        text2: 'Retest',
        number: 100.99,
        longContent: 'This is very long content that should not be worried about by anyone.'
      }
      const uglyGram = {
        name: 'Uglygram',
        priceSale: 900.50,
        text: 'Test',
        text2: 'Retest',
        number: 100.99,
        longContent: 'This is very long content that should not be worried about by anyone.'
      }
      const bananaHammock = {
        name: 'Banana Hammock',
        priceSale: 5.99,
        text: 'Test',
        text2: 'Retest',
        number: 100.99,
        longContent: 'This is very long content that should not be worried about by anyone.'
      }
      const runningShoe = {
        name: 'Running Shoe',
        priceSale: 39.98,
        text: 'What a great shoe! Such tread, much grip.',
        text2: 'Has Sole!',
        number: 72.56,
        longContent: `The longer the content, the happier you'll be! Happier by far than the eye can see!`
      }
      let model = []
      for (let i = 0; i < 20; i++) {
        model.push({ ...longBoard })
        model.push({ ...deluxeLongBoard })
        model.push({ ...bikeRack })
        model.push({ ...uglyGram })
        model.push({ ...bananaHammock })
        model.push({ ...runningShoe })
      }
      for (let i = 0; i < model.length; i++) {
        model[i].id = i + 1
      }
      return Object.freeze(model)
    },
    sheetDataColumns () {
      const name = {
        title: 'Name',
        key: 'name',
        value: {
          iteratee: row => (`Nom: ${row.name}`)
        },
        isVisible: true,
        format: {
          align: 'left',
          vAlign: 'middle'
        },
        orderBy: {
          iteratee: row => row.name || 0,
          direction: 'asc'
        }
      }
      const price = {
        title: 'Price',
        key: 'priceSale',
        isVisible: true,
        format: {
          align: 'right',
          vAlign: 'middle'
        },
        total: {
          reducer: (sum, row) => {
            return +(sum).toFixed(2) + +(row.priceSale).toFixed(2)
          },
          initial: 0,
          formatter: value => `$${value.toFixed(2)}`
        },
        // total: '$100.00',
        orderBy: {
          iteratee: row => +row.priceSale || 0,
          direction: ''
        }
      }
      const text = {
        title: 'Text',
        key: 'text',
        isVisible: true,
        format: {
          align: 'center',
          vAlign: 'middle',
          whitespace: 'nowrap'
        },
        orderBy: {
          iteratee: row => row.text || 0,
          direction: ''
        }
      }
      const text2 = {
        title: 'Text 2',
        key: 'text2',
        isVisible: true,
        format: {
          align: 'center',
          vAlign: 'middle'
        },
        orderBy: {
          iteratee: row => row.text2 || 0,
          direction: ''
        }
      }
      const number = {
        title: 'Number',
        key: 'number',
        isVisible: true,
        format: {
          align: 'right',
          vAlign: 'middle'
        },
        orderBy: {
          iteratee: row => +row.number || 0,
          direction: ''
        }
      }
      const longContent = {
        title: 'Long',
        key: 'longContent',
        isVisible: true,
        format: {
          align: 'left',
          vAlign: 'middle',
          whitespace: 'pre-wrap'
        },
        orderBy: {
          iteratee: row => row.longContent || 0,
          direction: ''
        }
      }
      const columns = [name, price, text, text2, number, longContent]
      columns.forEach((column, index) => {
        if (!column.key) {
          column.key = index
        }
      })
      return columns
    }
  },
  methods: {
    updateMatchText: debounce(function (event = {}) {
      this.matchText = event.target.value
    }, 50)
  }
}
</script>

<style lang="stylus">
/* General Table Size */
#app
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 10px
  a
    color $blue
  .data-sheet-table
    font-size 0.9rem
    td
      border 1px solid #efefef
    th
      border 1px solid #efefef
      background #f9f9f9
  .data-sheet-nav-control-center
    align-self center
  .data-sheet-table-wrapper
    overflow-x auto
  .data-sheet-rows-per-page-menu
    min-width 0
  .data-sheet-rows-per-page-menu a.dropdown-item,
  .data-sheet-rows-per-page-menu button.dropdown-item
    padding-right 1rem
  .data-sheet-title
    align-self center
</style>
