<template>
  <view>
    <SearchBar
      v-model:query-type="queryType"
      v-model:search-input-value="searchInputValue"
      v-model:search-type="searchType"
      v-model:search-dropdown-value="searchDropdownValue"
      :query-type-data="queryTypeData"
      :search-dropdown-list="dropList"
      :search-placeholder="searchPlaceholder"
      :search-tab-list="searchTabList"
      :height="topHeight"
      @search="onSearch"
    ></SearchBar>
    <vb-list
      custom-class="mx-15 pt-15"
      :query-fun="apis.amActivity.statisticsApi.queryStatisticsSource"
      :query-params="queryParams"
      :height="listHeight"
    >
      <template #item="{ item }">
        <ListCard :item="item" type="activityDetail" :map="{ id: 'activityId', date: 'date' }"></ListCard>
      </template>
    </vb-list>
  </view>
</template>

<script lang="ts" setup>
import dayjs from "dayjs"
import "dayjs/locale/zh-cn" // 导入本地化语言
import apis from "@/api"
import route from "@/route"
import appStore from "@/stores"
import SearchBar from "@/components/searchBar.vue"
import ListCard from "@/components/listCard.vue"

dayjs.locale("zh-cn") // 使用本地化语言

const wHeight = uni.getWindowInfo().windowHeight
const topHeight = ref(130)
const listHeight = computed(() => {
  return wHeight - topHeight.value - 15
})
const params = route.getRouteParams("favoriteActivity")
const amId = computed(() => {
  if (params && params.amId) {
    return params.amId
  }
  return appStore.authStore.getUser().amId
})
const searchInputValue = ref("")
const queryType = ref(0)
const searchType = ref("")
const searchDropdownValue = ref([])
const searchPlaceholder = ref("搜索校友活动标题")
const categoryColumns = ref<any>([])
const queryTypeData = computed(() => {
  return [
    { value: 0, text: "我的收藏" },
    { value: 1, text: "我的点赞" },
  ]
})
const dropList = computed(() => {
  const arr = []
  arr.push({
    emptyTitle: "全部分类",
    data: categoryColumns.value,
    map: { text: "categoryName", value: "categoryId" },
  })
  return arr
})

const searchTabList = computed(() => {
  const arr = []
  arr.push({ text: "近一周", value: "week" })
  arr.push({ text: "近一月", value: "month" })
  arr.push({ text: "全部", value: "" })
  return arr
})

const queryParams = ref({
  amId: amId.value,
  title: "",
  favoriteStatus: "1",
  sourceType: "activity",
})

function onSearch() {
  const params: any = {
    amId: amId.value,
    title: searchInputValue.value || "",
    category: searchDropdownValue.value[0] || "",
    sourceType: "activity",
  }
  if (queryType.value == 0) {
    params.favoriteStatus = "1"
  } else if (queryType.value == 1) {
    params.starStatus = "1"
  }
  switch (searchType.value) {
    case "week":
      params.beginDate = dayjs().startOf("day").add(-7, "day").format("YYYY-MM-DD HH:mm:ss")
      params.endDate = dayjs().endOf("day").format("YYYY-MM-DD HH:mm:ss")
      break
    case "month":
      params.beginDate = dayjs().startOf("day").add(-30, "day").format("YYYY-MM-DD HH:mm:ss")
      params.endDate = dayjs().endOf("day").format("YYYY-MM-DD HH:mm:ss")
      break
  }
  queryParams.value = params
}

function loadData() {
  apis.system.categoryApi.getActivityCategory().then((res) => {
    categoryColumns.value = [{ categoryName: "全部分类", categoryId: "" }, ...res]
  })
}

function init() {
  loadData()
}
onLoad(init)
</script>

<style scoped></style>
