<template>
  <section class="payroll-conference-page">
    <c-table-builder
      :trColStyle="trColStyle"
      :trRowStyle="trRowStyle"
      :tdRowStyle="tdRowStyle"
      :rowStyle="rowStyle"
      :totalStyle="totalStyle"
      :cols="cols"
      :rows="rows"
      :total="total"
    />
  </section>
</template>

<script>
import CTableBuilder from '@common/CTableBuilder'

const trCol = { 'color': '#5E6784',	'font-family': 'Ubuntu', 'font-size': '14px',	'line-height': '16px' }

export default {
  components: { CTableBuilder },

  data () {
    return {
      trColStyle: { 'height': '75px', 'background-color': '#E7E9F0', 	'border': '1px solid #E7E9F0' },
      trRowStyle: { 'border': '1px solid #E7E9F0' },
      tdRowStyle: { 'padding-top': '20px', 'padding-bottom': '20px' },
      rowStyle: { 'color': '#5E6784', 'opacity': '0.8', 'font-size': '14px' },
      totalStyle: { 'height': '75px', 'color': '#7543D2', 'font-weight': 'bold', 'opacity': '0.8' },
      cols: [
        { label: 'Nome', row: 'name', icon: '', styles: trCol, sortable: { all: true, single: true }},
        { label: 'E-mail', row: 'email', icon: '', styles: trCol },
        { label: 'Idade', row: 'age', icon: '', styles: trCol, sortable: { single: true} , hasTotal: true },
        { label: 'Malícia', row: 'malice', icon: '', styles: trCol, sortable: { all: true }, hasTotal: true }
      ],
      rows: [
        { name: '1', email: 'coe1.mane@gmail.com', age: 4 },
        { name: '2', email: 'coe2.mane@gmail.com', age: 3, malice: 2 },
        { name: '3', email: 'coe3.mane@gmail.com', age: 2 },
        { name: '4', email: 'coe4.mane@gmail.com', age: 1, malice: 10 },
      ],
      total: { enable: true, label: 'Total CaRaiw', colPosition: 'email' }
    }
  }
}
</script>