<template>
  <div>
    <product-min :car="car" class="product-min--fixed-height-product-title" />
    <div class="statistics-item__table table-dashed">
      <table>
        <tbody>
          <tr>
            <td>{{ $t('statistics.count-phone-opened') }}</td>
            <td>{{ statistic.phoneTotal }}</td>
          </tr>
          <tr>
            <td>{{ $t('statistics.count-appeal') }}</td>
            <td>{{ statistic.uniqueViews }}</td>
          </tr>
          <tr>
            <td>{{ $t('statistics.count-opened-map') }}</td>
            <td>{{ statistic.mapTotal }}</td>
          </tr>
          <tr>
            <td>{{ $t('statistics.count-added-compare') }}</td>
            <td>{{ statistic.comparsionTotal }}</td>
          </tr>
          <tr>
            <td>{{ $t('statistics.count-added-favorites') }}</td>
            <td>{{ statistic.favoriteTotal }}</td>
          </tr>
          <tr>
            <td>{{ $t('statistics.position-on-page') }}</td>
            <td>2</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator'
  import { CarDto } from '~/types/client'
  import ProductMin from '~/components/client/product/product-min.vue'
  import { emptyStatisticDto, StatisticDto } from '~/types/client/profile/statistic.dto'

  @Component({
    components: {
      ProductMin,
    },
  })
  export default class StatisticsItem extends Vue {
    @Prop({ required: true })
    readonly car!: CarDto

    statistic: StatisticDto = this.car.statistic || emptyStatisticDto()
  }
</script>