<template>
    <!-- Header Start -->
    <header class="header">
        <div class="logo-wrap">
          <i class="icon-arrow-left-bold-box icli" @click="$router.push('/user/info')"></i>
            <h1 class="title-color font-md">我的訂單</h1>
        </div>
    </header>
    <!-- Header End -->

    <!-- Main Start -->
    <main class="main-wrap order-history mb-xxl">
      <!-- Catagories Tabs  Start -->
      <!-- <ul class="nav nav-tab nav-pills custom-scroll-hidden" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation" @click="setStatus(1)">
          <button class="nav-link" :class="{active: status==1}" id="catagories1-tab"  type="button">
            待付款
          </button>
        </li>
        <li class="nav-item" role="presentation" @click="setStatus(2)">
          <button class="nav-link" :class="{active: status==2}" id="catagories2-tab"  type="button">
            待出貨
          </button>
        </li>
        <li class="nav-item" role="presentation" @click="setStatus(3)">
          <button class="nav-link" :class="{active: status==3}" id="catagories3-tab"  type="button">
            待收貨
          </button>
        </li>
        <li class="nav-item" role="presentation" @click="setStatus(4)">
          <button class="nav-link" :class="{active: status==4}" id="catagories4-tab"  type="button">
            已完成
          </button>
        </li>
        <li class="nav-item" role="presentation" @click="setStatus(5)">
          <button class="nav-link" :class="{active: status==5}" id="catagories5-tab"  type="button">
            不成立
          </button>
        </li>
        <li class="nav-item" role="presentation" @click="setStatus(6)">
          <button class="nav-link" :class="{active: status==6}" id="catagories6-tab"  type="button">
            退貨/退款
          </button>
        </li>
      </ul> -->
      <!-- Catagories Tabs  End -->

      <!-- Tab Content Start -->
      <div class="tab-content ratio2_1" id="pills-tabContent">
        <!-- Catagories Content Start -->
        <div class="tab-pane fade show active" id="catagories1" role="tabpanel" aria-labelledby="catagories1-tab">
          <!-- Order Box Start -->
          <div class="order-box" v-for="(order,index) in orderList" :key="order.order_id">
            <div class="media">
              <a href="order-detail.html" class="content-box">
                <h2 class="font-sm title-color">訂單編號: #{{ order.order_sn }} <br/>日期: {{ order.add_time }}</h2>
                <p class="font-xs content-color">
                    
                </p>
                <div class="content-color font-xs">
                    訂單金額: <span class="font-theme">${{ order.order_amount }}</span>
                </div>
                <div>
{{ getGoodsItem(order.goods_items) }}
                </div>
              </a>
            </div>
            <div class="bottom-content">
              <!-- <a href="javascript:;" class="title-color font-sm fw-600"> 再買一次 </a> -->
              <a href="javascript:void(0)" class="give-rating content-color font-sm"> {{ order.status }}</a>
              <div class="rating">
                <i data-feather="star"></i>
                <i data-feather="star"></i>
                <i data-feather="star"></i>
                <i data-feather="star"></i>
                <i data-feather="star"></i>
              </div>
            </div>
          </div>
          <!-- Order Box End -->

        </div>
        <!-- Catagories Content End -->

      </div>
      <!-- Tab Content End -->
    </main>
    <!-- Main End -->
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { getOrders } from '@/services/order'

const status = ref(-1)

const orderList = ref([])

const orderStatus = {
    0: '待確認',
    1: '已確認',
    2: '已取消',
    3: '無效',
    4: '退貨',
    7: '已完成',
}

onMounted(async () => {
    let res = await getOrders(-1)

    if(res.code === 200){
        orderList.value = res.data
    }
})

const setStatus = (value) => {
  status.value = value
}

watch(status,async (oVal,nVal)=>{
  let res = await getOrders(oVal)
  if(res.code === 200){
      orderList.value = res.data
  }
})

const getGoodsItem = (goods)=>{
    let goodsItem = ''

    goods.forEach((item,index) => {
        goodsItem += item.goods_name + ' x ' + item.goods_number + ' '
    })

    return goodsItem
}

</script>

<style>

</style>