<template>
  <div class="flex flex-col">
    <nut-searchbar
      class="search-bar text-[32rpx]"
      v-model="searchText"
      placeholder="搜索订单信息"
      @focus="onFocus"
      @change="onInput"
      @clear="onClear"
      style="margin: 0">
      <template #leftin>
        <Search class="text-[#929297]" />
      </template>
    </nut-searchbar>

    <div class="flex flex-col bg-white custom-tabs flex-auto">
      <nut-tabs v-model="activeTab" :swipeable="true" class="h-full" :title-scroll="true">
        <template #titles>
          <div
            v-for="item in list"
            :key="item.paneKey"
            class="mr-[60rpx] text-[#999] text-[36rpx] font-400 flex items-center ml-[28rpx] mb-[10rpx]"
            :class="[activeTab === item.paneKey ? 'bg-[url(/images/product/tab-line.png)] bg-no-repeat bg-bottom-center bg-contain' : '']"
            @click="activeTab = item.paneKey">
            <div class="custom-title" :class="[activeTab === item.paneKey ? 'text-[#000] font-600 text-[40rpx]' : '']">
              {{ item.title }}
            </div>
          </div>
        </template>
        <nut-tab-pane :pane-key="item.paneKey" v-for="(item, index) in list" :key="index" class="flex-auto bg-[#f5f5f5]!">
            <ul>
                <li class="rounded-[20rpx] bg-white p-[20rpx] mb-[30rpx] flex flex-col" v-for="(item,index) in carts" :key="index">
                    <div class="text-[32rpx]">
                        <span class="text-[#666]">订单编号:</span>
                        <span class="text-black">20220308170456105610</span>
                    </div>
                    <nut-divider class="border-[#EDEDED] custom-divider"></nut-divider>

                    <div class="flex items-center">
                        <img :src="item.cover" alt="cover" class="w-[192rpx] h-[192rpx] rounded-[20rpx]">
                        <div class="flex flex-col px-[16rpx] py-[10rpx] flex-auto justify-between">
                            <p class="text-[40rpx]">{{ item.name }}</p>
                            <p class="text-[30rpx] text-[#666] my-[20rpx]">{{ item.desc }}</p>
                            <div class="flex justify-between">
                                <div>
                                    <nut-price :price="item.price" class="text-[#333333] product-price"></nut-price>
                                    <span class="text-[28rpx] font-400 text-[#abadad]">/份</span>
                                </div>
                                <span class="text-[#abadad] text-[28rpx] font-400">X{{ item.count }}</span>
                            </div>
                        </div>
                    </div>
                
                    <div class="flex items-center justify-between mt-[26rpx]">
                        <div class="text-[32rpx]">
                            <span class="text-[#666666] ">下单时间:</span>
                            <span class="text-black">03-08 17:02</span>
                        </div>
                        <nut-price :price="item.count * item.price" size="normal" class="total-price"></nut-price>
                    </div>
                </li>
            </ul>
        </nut-tab-pane>
      </nut-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Search } from "lucide-vue-next";
  import { useShoppingCartStore } from "@/store/shoppingCart";
import { CartTypeEnum } from "@/types/cart";

  const shoppingCartStore = useShoppingCartStore();
  const carts = ref<any[]>(shoppingCartStore.getShoppingCartList);

  const searchText = ref("");

  const activeTab = ref("all");
  const list = ref([
    {
      title: "全部订单",
      paneKey: "all",
    },
    {
      title: "社区点餐",
      paneKey: CartTypeEnum.Restaurant,
    },
    {
      title: "家政服务",
      paneKey:CartTypeEnum.Housekeeping,
    },
    {
      title: "康养护理",
      paneKey: CartTypeEnum.HealthCare,
    },
    {
      title: "课程学习",
      paneKey: CartTypeEnum.Course,
    },
  ]);

  const onFocus = () => {
  };

  const onClear = () => {
  };

  const onInput = (_val: string) => {
  };
  watch(() => activeTab.value,(newVal) => {    
    switch(newVal){
        case "all":
            carts.value = shoppingCartStore.getShoppingCartList;
            break;
        case CartTypeEnum.Restaurant:
            carts.value = shoppingCartStore.getShoppingCartByRestaurant;
            break;
        case CartTypeEnum.Housekeeping:
            carts.value = shoppingCartStore.getShoppingCartByHousekeeping;
            break;
        case CartTypeEnum.HealthCare:
            carts.value = shoppingCartStore.getShoppingCartByHealthCare;
            break;
        case CartTypeEnum.Course:    
            carts.value = shoppingCartStore.getShoppingCartByCourse; 
            break;
    }
  })
</script>

<style lang="scss" scoped>
  .search-bar {
    --nut-searchbar-input-height: 36px;
  }

  .custom-tabs {
    --nut-tabs-titles-background-color: #fff;
    // --nut-tabs-horizontal-titles-height: 35px;

    .product-price{
        --nut-primary-color:#333;
    }

    .total-price{
        --nut-primary-color:#F03B25;
        --nut-price-symbol-medium-size:20px;
        --nut-price-medium-size: 24px;
        --nut-price-decimal-medium-size: 20px;
    }

    :deep(.nut-tabs__content) {
      flex: 1 1 auto;
    }
  }

  .custom-divider{
    --nut-divider-text-color: #EDEDED;
    --nut-divider-margin: 10px 0;
  }
</style>
