<route lang="json">
{ "style": { "navigationBarTitleText": "线下活动" } }
</route>
<script setup lang="ts">
import { DictType } from '../../../../core/models/moment'
import { getByDictType, getContents } from '../../../../core/libs/requests'
import Card from '@/components/card.vue'

const tab = ref<number>(0)
const { data: tabs, run: setTabs } = useRequest(() => getByDictType(DictType.offlineActivity))
const { data, run: setData } = useRequest(
  () => getContents({ contentType: '1', contentCategory: tabs.value[tab.value].value }),
  {
    initialData: { list: [] },
  },
)
onMounted(async () => {
  await setTabs()
  console.log(tabs.value)
  await setData()
  console.log(data.value)
})
</script>
<template>
  <div class="flex-grow flex flex-col gap-6 mx-3.5">
    <div class="mx--3.5">
      <wd-tabs v-model="tab" custom-class="bg-transparent!" :slidable-num="4">
        <block v-for="(it, item) in tabs" :key="item">
          <wd-tab :title="it.label"></wd-tab>
        </block>
      </wd-tabs>
    </div>
    <template v-for="(it, index) in data.list" :key="index">
      <!-- <offline-activity-item class="" :options="it"></offline-activity-item> -->
      <Card>
        <div class="flex flex-col gap-5">
          <div class="flex gap-4 mb-2">
            <img
              class="w-[110px] h-[88px] rounded-[10px]"
              src="https://via.placeholder.com/110x88"
            />
            <div class="flex flex-col justify-between">
              <div
                class="w-[168px] text-black text-base font-normal font-['PingFang SC'] leading-relaxed"
              >
                {{ it.title }}
              </div>
              <div class="flex">
                <div
                  class="w-[70px] text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]"
                >
                  活动时间：
                </div>
                <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]">
                  07.15 08.10
                </div>
              </div>
              <div class="flex items-end">
                <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]">
                  兑换积分：
                </div>
                <div class="text-[#ef4343] text-xl font-normal font-['D-DIN Exp'] leading-[34px]">
                  0
                </div>
              </div>
            </div>
          </div>
          <view class="flex items-center justify-between mb-1.5">
            <view
              class="flex items-center text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]"
            >
              距结束还剩
              <view
                class="w-4 h-4 bg-black/90 rounded flex-col justify-center items-center gap-2.5 inline-flex mx-1.5"
              >
                <view
                  class="text-white text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]"
                >
                  05
                </view>
              </view>
              天
              <div
                class="w-4 h-4 bg-black/90 rounded flex-col justify-center items-center gap-2.5 inline-flex mx-1.5"
              >
                <div
                  class="text-white text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]"
                >
                  05
                </div>
              </div>
              时
              <div
                class="w-4 h-4 bg-black/90 rounded flex-col justify-center items-center gap-2.5 inline-flex mx-1.5"
              >
                <div
                  class="text-white text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]"
                >
                  05
                </div>
              </div>
              分
            </view>
            <tilted-button>立即报名</tilted-button>
          </view>
        </div>
      </Card>
    </template>
  </div>
</template>
