<template>
  <tr align="center" @click="$emit('select',index)" class="pointer">
    <td>{{ dateRow }}</td>
    <td v-for="col in years">{{ items[col][index] ? items[col][index][kind] : '\u00A0' }}</td>
    <template v-if="wdiff">
      <td v-for="col in years" class="report_section">{{ items[col][index] ? items[col][index][kind+'_week'] : '\u00A0' }}</td>
    </template>
    <template v-if="ydiff">
      <td v-for="(col,idx) in years" :class="{report_section:!wdiff}" v-if="idx">{{ items[col][index] ? items[col][index][kind+'_year'] : '\u00A0' }}</td>
    </template>
    <template v-if="pricing">
      <td v-for="col in years" :class="{report_section:wdiff==ydiff}">{{ items[col][index] ? items[col][index].price : '\u00A0' }}</td>
    </template>
  </tr>
</template>

<script>
export default
{
  props:
    {
      items:
        {
          type: Object, // [year][row]
          required: true
        },
      years:
        {
          type: Array,
          required: true
        },
      index:
        {
          type: Number,
          required: true
        },
      kind:
        {
          type: String,
          required: true
        },
      wdiff:
        {
          type: Boolean,
          default: false
        },
      ydiff:
        {
          type: Boolean,
          default: false
        },
      pricing:
        {
          type: Boolean,
          default: false
        },
      current:
        {
          type: Boolean,
          default: false
        }
    },
  computed:
    {
      dateRow: function()
      {
        let i, y = this.years, len = y.length, rep = this.items, idx = this.index;
        for(i=len-1; i>=0; i--)
        {
          if(rep[y[i]][idx]) return rep[y[i]][idx].datum_text;
        }
        return '\u00A0';
      },
    },
}
</script>

<style>
  tr:nth-child(even) .report_section
  {
    background-color: #EAECED;
  }

  tr:nth-child(odd) .report_section
  {
    background-color: #F1F3F4;
  }
</style>