<route lang="json5">
{
  style: {
    navigationBarTitleText: '品质商城',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script setup lang="ts">
import Product from './components/product.vue'
import { shoppingBag } from '@designer-hub/assets/src/assets/svgs/index'
import { useRouter } from '../../../core/utils/router'
import {
  getBanners,
  getFavourableProducts,
  getProductCategories,
  getProductItemBuy,
  getProducts,
} from '../../../core/libs/requests'
import PageHelper from '@/components/page-helper.vue'
import { BannerMode } from '../../../core/libs/models'
import Banner from '../components/banner.vue'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'
import lightning from '@designer-hub/assets/src/libs/assets/lightning'
import textGreatMoney from '@designer-hub/assets/src/libs/assets/textGreatMoney'
import grabNow from '@designer-hub/assets/src/libs/assets/grabNow'
import ProgressEvo from '@/components/progress-evo.vue'
import SwiperEvo from '@/components/swiper-evo.vue'
import dayjs from 'dayjs'
import ButtonEvo from '@/components/button-evo.vue'

const router = useRouter()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { data: productCategories, run: setProductCategories } = useRequest(
  () => getProductCategories(),
  { initialData: [] },
)
const { data: banners, run: setBanners } = useRequest(() => getBanners({ mode: BannerMode.Mall }), {
  initialData: [],
})
const { data: carts, run: setCarts } = useRequest(
  () => getProductItemBuy({ userId: userInfo.value.userId }),
  { initialData: { list: [], total: 0 } },
)
const { data: favourableProducts, run: setFavourableProducts } = useRequest(
  () => getFavourableProducts(),
  { initialData: [] },
)
const current = ref<number>(0)
const swiperList = computed(() => banners.value.map((it) => it.bannerImgUrl))
const categories = computed(() => productCategories.value.find(({ id }) => id === 1)?.children)
const time = computed(
  () =>
    dayjs(favourableProducts.value[current.value].favourableEndDate).diff(
      dayjs().toDate(),
      'milliseconds',
    ) || 0,
)
const category = ref()
const query = computed(() => ({
  oneCategory: category.value?.parentId,
  secondCategory: category.value?.id,
}))
const handleChange = async () => {
  setCarts()
}
const handleSwiperChange = async (e) => {
  console.log(e)
}
onMounted(async () => {
  await Promise.all([setProductCategories(), setBanners(), setFavourableProducts()])
  category.value = categories.value[0]
})
onShow(async () => {
  await Promise.all([setCarts()])
})
onShareAppMessage(() => ({
  title: '品质商城',
}))
onShareTimeline(() => ({
  title: '品质商城',
}))
</script>

<template>
  <view class="bg-white flex-grow flex flex-col px-3.5 py-5.5 gap-5.5">
    <Banner :mode="BannerMode.Mall"></Banner>
    <div v-if="favourableProducts.length" class="relative aspect-[1.47/1]">
      <div class="aspect-[2.99/1] bg-black rounded-2xl">
        <div class="px-3 h-11 flex items-center">
          <wd-img width="22" height="22" :src="lightning"></wd-img>
          <wd-img width="95" height="25" :src="textGreatMoney"></wd-img>
          <div class="flex-1"></div>
          <div
            class="flex gap-1 text-center text-white text-base font-normal font-['PingFang_SC'] leading-relaxed"
          >
            <wd-count-down :time="time">
              <template #default="{ current }">
                <!--                <span-->
                <!--                  class="text-center text-white text-base font-normal font-['PingFang_SC'] leading-relaxed"-->
                <!--                >-->
                <!--                  <span class="custom-count-down">{{ current.hours }}</span>-->
                <!--                  <span class="custom-count-down-colon">:</span>-->
                <!--                  <span class="custom-count-down">{{ current.minutes }}</span>-->
                <!--                  <span class="custom-count-down-colon">:</span>-->
                <!--                  <span class="custom-count-down">{{ current.seconds }}</span>-->
                <!--                </span>-->
                <div v-if="time" class="flex h-full items-center gap-1.25 text-black/40 text-sm">
                  <!--                  <div>距{{ { waiting: '报名开始', running: '报名结束' }[status] }}还有</div>-->
                  <div
                    v-if="current.days"
                    class="w-4 h-4 bg-white/90 rounded text-black text-2.5 flex items-center justify-center"
                  >
                    {{ current.days }}
                  </div>
                  <span v-if="current.days" class="custom-count-down-colon text-white">天</span>
                  <div
                    class="w-4 h-4 bg-white/90 rounded text-black text-2.5 flex items-center justify-center"
                  >
                    {{ current.hours }}
                  </div>
                  <span class="custom-count-down-colon text-white">时</span>
                  <div
                    class="w-4 h-4 bg-white/90 rounded text-black text-2.5 flex items-center justify-center"
                  >
                    {{ current.minutes }}
                  </div>
                  <span class="custom-count-down-colon text-white">分</span>
                  <div
                    v-if="!current.days"
                    class="w-4 h-4 bg-white/90 rounded text-black text-2.5 flex items-center justify-center"
                  >
                    {{ current.seconds }}
                  </div>
                  <span v-if="!current.days" class="custom-count-down-colon text-white">秒</span>
                </div>
              </template>
            </wd-count-down>
            <!-- 17:02:18 -->
            结束
          </div>
        </div>
      </div>
      <div class="absolute top-11 left-0 right-0 bottom-0 bg-white rounded-2xl shadow">
        <SwiperEvo v-model="current" :items="favourableProducts">
          <template #default="{ item: it }">
            <div
              class="w-full h-full px-4 flex items-center gap-3 box-border"
              @click="router.push(`/pages/home/mall/detail/index?id=${it.productId}`)"
            >
              <wd-img
                width="114"
                height="114"
                custom-class="rounded-2xl overflow-hidden"
                :src="it.productCoverImgUrl"
              />
              <div class="flex-1">
                <div
                  class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal line-clamp-1 text-ellipsis overflow-hidden"
                >
                  <!-- 海蓝之谜精华面霜60ml -->
                  {{ it.prodcutName }}
                </div>
                <div class="flex items-center gap-2.5">
                  <template v-if="Number(it.isRestrict)">
                    <div class="flex-1">
                      <!-- {{ (it.exchangeCount || 0 / it.productRepertory || 0) * 100 }} -->
                      <!--                      1-->
                      <!--                      {{ it.isRestrict }}-->

                      <ProgressEvo
                        :height="6"
                        :model-value="(it.exchangeCount || 0 / it.productRepertory || 0) * 100"
                        color="black"
                      ></ProgressEvo>
                    </div>
                    <div
                      class="text-black/40 text-[10px] font-normal font-['PingFang_SC'] leading-normal"
                    >
                      还剩{{ it.productRepertory - it.exchangeCount }}件
                    </div>
                  </template>
                  <template v-else>
                    <div class="flex-1 h-6">
                      <!--                      <ProgressEvo-->
                      <!--                        :height="6"-->
                      <!--                        :model-value="(it.exchangeCount || 0 / it.productRepertory || 0) * 100"-->
                      <!--                        color="black"-->
                      <!--                      ></ProgressEvo>-->
                    </div>
                    <div
                      class="text-black/40 text-[10px] font-normal font-['PingFang_SC'] leading-normal"
                    >
                      <!--                      还剩{{ it.productRepertory - it.exchangeCount }}件-->
                      数量不限
                    </div>
                  </template>
                </div>
                <div class="flex items-end gap-1 mt-5">
                  <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN_Exp'] pb-3">
                    {{ it.favourablePoints }}
                  </div>
                  <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] pb-3">
                    积分
                  </div>
                  <div class="flex-1"></div>
                  <div
                    @click.stop="router.push(`/pages/home/mall/detail/index?id=${it.productId}`)"
                  >
                    <wd-img width="106" height="40" :src="grabNow"></wd-img>
                  </div>
                </div>
                <div class="flex gap-4">
                  <div
                    class="text-black/30 text-[10px] font-normal font-['PingFang_SC'] line-through leading-normal"
                  >
                    {{ it.showFavourable ? it.favourablePoints : it.points }} 积分
                  </div>
                  <div
                    class="text-black/30 text-[10px] font-normal font-['PingFang_SC'] line-through leading-normal"
                    v-if="it.productPrice"
                  >
                    ¥{{ it.productPrice }}
                  </div>
                </div>
              </div>
            </div>
          </template>
        </SwiperEvo>
      </div>
    </div>
    <div class="w-full inline-flex gap-2 overflow-x-scroll whitespace-nowrap">
      <template v-for="(it, i) in categories" :key="i">
        <div>
          <wd-button
            :type="it.id === category?.id ? 'primary' : 'default'"
            :plain="it.id !== category?.id"
            size="small"
            @click="category = it"
          >
            {{ it.name }}
          </wd-button>
        </div>
      </template>
    </div>
    <PageHelper
      v-if="category"
      v-slot="{ source }"
      class="flex-grow flex flex-col"
      :request="getProducts"
      :query="query"
    >
      <!-- <wd-skeleton
        :row-col="[[{ width: 100, height: 100 }, , { width: 100, height: 100 }]]"
        :loading="true"
      > -->
      <div class="grid grid-cols-2 gap-2.5">
        <template v-for="(it, i) of source.list" :key="i">
          <Product :options="it" @change="handleChange"></Product>
        </template>
      </div>
      <!-- </wd-skeleton> -->
    </PageHelper>
    <BottomAppBar fixed>
      <div class="h-16 bg-white flex items-center justify-between px-3.5">
        <!-- <div> -->
        <!-- <wd-button type="text" size="small"> -->
        <wd-badge :modelValue="carts.total || 0">
          <wd-img
            :round="false"
            width="32"
            height="32"
            :src="shoppingBag"
            @click="router.push('/pages/home/mall/shopping-cart/index')"
          ></wd-img>
        </wd-badge>
        <!-- </wd-button> -->
        <!-- </div> -->
        <div @click="router.push('/pages/home/mall/shopping-cart/index')">
          <ButtonEvo>
            <span
              class="h-[22px] text-white text-base font-normal font-['PingFang_SC'] leading-tight"
            >
              购物车
            </span>
            <span class="h-[22px] text-white text-sm font-normal font-['PingFang_SC']">
              <template v-if="carts.total">（已选{{ carts.total }}件）</template>
            </span>
          </ButtonEvo>
        </div>
      </div>
    </BottomAppBar>
  </view>
</template>

<style scoped lang="scss"></style>
