<template>
  <table class="table">
    <thead>
      <tr>
        <th style="width: 0">SKU</th>
        <th>Nom du produit</th>
        <th>Stock</th>
        <th>Prix</th>
        <th>Attributs</th>
        <th>WooCommerce</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(variation, sku) in product.skus" :key="sku" class="">
        <td>{{ sku }}</td>
        <td>{{ variation.title }}</td>
        <td>{{ variation.stock }}</td>
        <td>
          {{ variation.regular_price && `Régulier: ${variation.regular_price}` }}<br />
          {{ variation.sale_price && `Spécial: ${variation.sale_price}` }}<br />
          {{ variation.suggested_price && `Suggéré: ${variation.suggested_price}` }}<br />
        </td>
        <td>
          {{ variation.attributes.couleur && `Couleur: ${variation.attributes.couleur}` }}<br />
          {{ variation.attributes.grandeur && `Grandeur: ${variation.attributes.grandeur}` }}<br />
          {{ variation.attributes.largeur && `Larguer: ${variation.attributes.largeur}` }}<br />
        </td>
        <td>
          {{ variation.product_id || "" }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script lang="ts">
import { defineComponent, PropType } from "@vue/composition-api";
import { ProductData } from "../types/rpsync";

export default defineComponent({
  props: {
    product: {
      type: Object as PropType<ProductData | null>,
      default: () => null,
    },
  },
});
</script>
