# Product

<snt-app
  #default="{ breakpoint, router, goTo, addToCart }"
  class="lush">
  <snt-section name="รายละเอียดสินค้า">
    <snt-product-detail
      #default="{ item, loading, quantity, selectedOption, selectQuantity, selectImage, selectOption, isAvailable, addCart }"
      class="product-detail">
      <div v-if="!loading"
          class="product-detail__container">
        <div class="product-detail__detail">
          <snt-image
            :src="item.images[1] || item.pictureUrl || 'https://via.placeholder.com/300/eee/c6c6c6?text=No image'"
            class="product-detail-infomation__cover"
            aspect-ratio="1" />
        </div>
        <div class="product-detail__infomation">
          <div class="product-detail-infomation__container">
            <snt-image
              :src="item.pictureUrl"
              class="product-detail-infomation__image"/>
            <div class="product-detail__name">{{ item.name }}</div>
            <div class="product-detail__short">{{ item.descriptionShort }}</div>
            <div
              v-if="item.productCategory"
              class="product-detail__categoryname">
              {{ item.productCategory.name }}
            </div>
            <template v-if="!item.isCollection && item.subproducts.length">
              <div class="product-detail__options">
                สินค้าย่อย
              </div>
              <div class="product-detail-options">
                <template v-for="(opt, i) in item.subproducts">
                  <snt-button
                    :key="`product-opt-${i}`"
                    :label="opt.name"
                    :color="opt.selected ? 'primary' : 'default'"
                    :outlined="!opt.selected"
                    class="product-detail-options__btn"
                    icon-reverse
                    depressed
                    rounded
                    @click="selectOption(opt)" />
                </template>
              </div>
            </template>
            <div class="product-detail__actions">
              <snt-number-field
                :value="quantity"
                :min="1"
                :max="selectedOption.available"
                controls
                center
                @input="selectQuantity($event)"  />
              <snt-button
                class="product-detail__addcart"
                :disabled="!isAvailable"
                x-large
                @click="addCart()">
                <div class="product-detail-addcart__wrapper">
                  <snt-icon
                    v-if="isAvailable"
                    class="product-detail-addcart__icon"
                    icon="mdi-shopping-outline" />
                  <div>{{ isAvailable ? 'Add to Basket' : 'Sold Out' }}</div>
                  <div
                    v-if="isAvailable"
                    class="product-detail__price">
                    <div :class="{'product-detail__price--discount': item.displayOnSale}"> - {{ item.price | toLocaleString }} ฿</div>
                    <div v-if="item.displayOnSale"
                      class="product-detail__discount">
                      {{ item.fullPrice | toLocaleString }} ฿
                    </div>
                  </div>
                </div>
              </snt-button>
            </div>
          </div>
        </div>
        <div class="product-detail__detail">
          <div class="product-detail__description">
            <div v-html="item.descriptionLong"></div>
          </div>
        </div>
      </div>
    </snt-product-detail>
  </snt-section >
  <snt-section  name="รายการสินค้า">
    <snt-products
      #default="{
        items, loading, title, itemProps, addMainToCart
      }"
      :itemProps="{
        showSku: true,
        showPrice: true,
        showDescription: true,
        showStock: true,
        showCart: false
      }"
      class="product-detail__recommended"
      title="Flash Sales"
      limit="4"
      cols="6"
      sm="6"
      md="4"
      lg="3">
      <div class="lush-container">
        <snt-row class="lush-all-products__row">
          <snt-col
            class="lush-all-products__cols"
            cols="12" >
            <div class="product-detail-recommended__title">{{ title }}</div>
          </snt-col>
        </snt-row>
        <snt-row
          v-if="!loading"
          class="lush-all-products__row">
          <template v-for="item in items">
            <snt-col
              :key="`all-products-item-${item.id}`"
              class="lush-all-products__cols"
              cols="12"
              lg="3"
              sm="6">
              <div class="lush-products-item">
                <snt-link
                  #activator
                  :to="item.routerLink">
                  <div class="lush-products-item__wrapper">
                    <div class="lush-products-item__image">
                      <snt-image
                        :src="item.pictureUrl || 'https://via.placeholder.com/300/eee/c6c6c6?text=No image'"
                        aspect-ratio="1"
                        contain />
                    </div>
                    <div class="lush-products-item__content">
                      <template v-if="itemProps.showDescription">
                        <div class="lush-products-item__name">
                          {{ item.name }}
                        </div>
                        <div
                          v-if="item.productCategory"
                          class="lush-products-item__categoryname">
                          {{ item.productCategory.name }}
                        </div>
                      </template>
                      <template v-if="itemProps.showSku">
                        <div
                          v-if="!(item.subproducts.length === 1 && item.subproducts[0].name === 'main')"
                          class="product-item-subitems">
                          <template v-for="(sub, i) in item.subproducts">
                            <div
                              v-if="sub.name !== 'main'"
                              :key="`sub-item-${i}`"
                              class="product-item-subitems__item">
                              {{ sub.name }}
                            </div>
                          </template>
                        </div>
                      </template>
                      <template v-if="itemProps.showPrice">
                        <div class="lush-products-item__price">
                          <span :class="{ 'lush-products-item__price--on-sale': item.displayOnSale }">
                              {{ item.price | toLocaleString }} THB
                          </span>
                          <s v-if="item.displayOnSale">
                            {{ item.fullPrice | toLocaleString }}
                          </s>
                        </div>
                      </template>
                      <template v-if="itemProps.showStock">
                        <div v-if="item.available > 0">Available {{ item.available }}</div>
                      </template>
                    </div>
                  </div>
                </snt-link>
                <div class="lush-products-item__action">
                  <snt-button
                    :disabled="item.available <= 0"
                    :label="item.available <= 0 ? 'Sold Out' : 'Add to basket'"
                    :icon="item.available <= 0 ? '' : 'mdi-shopping-outline'"
                    class="lush-products-item__addtocart"
                    depressed
                    large
                    @click="addMainToCart(item)" />
                </div>
              </div>
            </snt-col>
          </template>
        </snt-row>
      </div>
    </snt-products>
  </snt-section>
</snt-app>