<template>
  <view class="event_content">
    <view class="event_hader_tabs">
      <hs-tabs
        :list="list"
        :current="useModel.currentTabs.value"
        @onChange="method?.handleTabsChange"
      />
    </view>

    <cc-scroll-loading :meta="useModel?.metaData?.value" @load="method?.loadMore">
      <view
        class="event_item"
        v-for="(i, index) in useModel?.listData?.value"
        :key="`item_${index}`"
        @click="toDetaile(i)"
      >
        <view class="event_item_img">
          <image
            v-if="i?.activity?.cover_image?.length"
            :src="i?.activity?.cover_image[0]?.url"
            mode="aspectFill"
          />
          <view v-else class="event_item_img_default">
            <uni-icons type="images" size="60" color="#eee"></uni-icons>
          </view>
          <view :class="`event_item_status event_item_status_${i?.activity?.status}`">
            <hs-enum-tag :value="i?.activity?.status" :Enums="HouseChargeTasksStatusEnum" />
          </view>
        </view>
        <view class="event_item_name"> {{ i?.activity?.title }} </view>
        <view class="event_item_data">
          活动时间：{{ showDay(i?.activity?.start_time) }} 至 {{ showDay(i?.activity?.end_time) }}
        </view>
      </view>
    </cc-scroll-loading>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import method from './method'
import useModel from './model'
import { showDay } from '@/common/libraries/day'
import { HouseChargeTasksStatusEnum } from '@/gen/Enums'
const list = [
  { label: '已报名', value: 'Success' },
  { label: '已取消', value: 'Cancelled' }
]
const toDetaile = (e: any) => {
  uni.navigateTo({
    url: `/INDEX/activities_show/index?id=${e?.activity?.id}`
  })
}
onShow(() => {
  useModel.listData.value = []
  useModel.formData.value.page = 1
  method?.getList()
})
</script>

<style lang="scss">
@import './style.scss';
</style>
