<template>
  <div class="tw-m-auto tw-pb-[64px]">
    <CategoryList v-if="categoryStore.categoryVisible" />
    <v-container class="">
      <div class="tw-text-center" v-if="loading">
        <v-progress-circular
          color="blue-lighten-2"
          indeterminate
          size="64"
          class="tw-m-auto"
        ></v-progress-circular>
      </div>
      <v-item-group multiple>
        <v-row v-if="!loading">
          <v-col v-for="(item, i) in productStore.list" :key="i" cols="12" lg="3" md="4" sm="6">
            <v-hover v-slot="{ isHovering, props }" open-delay="200">
              <v-card
                :elevation="isHovering ? 16 : 2"
                :class="{ 'on-hover': isHovering }"
                class="mx-auto"
                height="350"
                width="260"
                v-bind="props"
                :to="`/products/detail/${item.id}`"
              >
                <v-img :src="item.imgList[0].url" height="280">
                  <!-- <v-expand-transition>
                    <div
                      v-if="isHovering"
                      class="d-flex transition-fast-in-fast-out bg-orange-darken-2 v-card--reveal tw-p-[12px] tw-text-justify"
                      style="height: 100%"
                    >
                      产品描述描述描述描述描述描述描述描述
                    </div>
                  </v-expand-transition> -->
                </v-img>
                <v-card-text class="tw-text-left font-weight-medium title">{{
                  item.name
                }}</v-card-text>
              </v-card>
            </v-hover>
          </v-col>
        </v-row>
        <div
          v-if="!productStore.total && !loading"
          class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
        >
          no data
        </div>
      </v-item-group>
      <v-row>
        <v-col>
          <v-pagination
            v-if="productStore.total"
            v-model="productStore.pageNo"
            @update:modelValue="productStore.updatePageNo"
            :length="length"
            rounded="0"
            class="tw-float-right tw-mt-[32px]"
            total-visible="5"
          ></v-pagination></v-col
      ></v-row>
    </v-container>
  </div>
</template>

<script setup lang="ts">
import { useProductListStore } from '@/stores/product_list'
import { useCategoryStore } from '@/stores/category'
import CategoryList from '@/components/CategoryList.vue'
import { watchEffect, computed, ref } from 'vue'
import { isEqual } from 'lodash'

const productStore = useProductListStore()
const categoryStore = useCategoryStore()
const loading = ref(false)

watchEffect(async () => {
  let params: any = {
    pageNo: productStore.pageNo,
    pageSize: 20
  }

  loading.value = true
  if (productStore.keyword && !isEqual(productStore.params, params)) {
    params.keyword = productStore.keyword
    productStore.updateParams(params)
    await productStore.getList(params)
    loading.value = false
    return
  }

  params.productCategoryId = categoryStore.selectedSubCategory
  // productCategoryId: '78b86c6e917841cf9a292234f2805e24',

  if (categoryStore.selectedFuncCategory) {
    params.productFunctionId = categoryStore.selectedFuncCategory
  }

  if (categoryStore.selectedSubCategory && !isEqual(productStore.params, params)) {
    productStore.updateParams(params)
    await productStore.getList(params)
  }
  loading.value = false
})

const length = computed(() =>
  productStore.total ? Math.ceil(productStore.total / productStore.pageSize) : 0
)
</script>

<style scoped>
.title {
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>