<template>
  <div class="q-mt-sm ui-calculator-deliveries">
    <div class="q-pa-md ui-calculator-deliveries__title">
      {{ title }}
    </div>
    <q-table
      flat
      hide-bottom
      :pagination.sync="pagination"
      :data="deliveries"
      :columns="columns"
      class="table"
    >
      <template v-slot:body="props">
        <calculator-deliveries-item :props="props" :delivery="props.row" />
      </template>
    </q-table>
  </div>
</template>

<script lang="ts">
import { Prop, Vue, Component } from 'vue-property-decorator'
import CalculatedDelivery from '../dto/CalculatedDelivery'
import CalculatorDeliveriesItem from './CalculatorDeliveriesItem.vue'
import { QTable } from 'quasar'

@Component({
  components: { CalculatorDeliveriesItem, QTable },
})
export default class CalculatorDeliveries extends Vue {
  @Prop(String) title!: string
  @Prop(Array) deliveries!: CalculatedDelivery[]

  pagination = {
    rowsPerPage: 5000,
  }

  columns = [
    {
      name: 'name',
      label: 'Доставка/сроки',
      field: 'name',
      align: 'left',
    },
    { name: 'dimensions', label: 'Габ.', field: 'terms', align: 'left' },
    {
      name: 'price',
      label: 'Цена',
      field: 'price',
      align: 'left',
    },
  ]
}
</script>
