<template lang="html">
  <div id="{{id}}" data-cpt-type="title-table" class="title-table">

            <h3>{{title}}</h3>

            <table class="pure-table">
                <thead>
                    <tr>
                        <th v-for="title in headArr">{{title}}</th>
                    </tr>
                </thead>

                <tbody>
                    <tr v-for="tr in oddBodyArr" :class="tr.odd ? 'pure-table-odd':'';">
                      <td v-for="v in tr">{{v}}</td>
                    </tr>
                </tbody>
            </table>
  </div>
</template>

<style lang="sass">
   @import "../../styles/core/base.scss";

  .title-table{
    h3{
      margin:18px 0;
    }
  }
</style>

<script>

export default {
  props:{
    id:String,
    title:String,
    headArr:{
      type:Array,
    },
    bodyArr:Array,
  },
  data: function () {
    return {
      i:1
    }
  },
  computed: {
    oddBodyArr(){
      return this.bodyArr.map((arr,i)=>{
        arr.odd = i%2 === 1;
        return arr;
      })
    }
  },
  ready: function () {},
  attached: function () {},
  methods: {},
  components: {}
}
</script>
