<template>
  <view class="tabs_container_body">
    <view class="tabs_container">
      <view
        v-for="(i, index) in tabsList"
        :key="`tab_${index}`"
        :class="`tab_item ${index === current ? 'tab_active' : ''}`"
        @click="handleTabClick(index)"
      >
        <view class="label">
          {{ i?.label }}
        </view>
        <view class="bottom_line" :style="getStyleBgInfo()" v-if="index === current"> </view>
      </view>
    </view>
    <cc-scroll-loading :meta="metaData" @load="handleLoadMore">
      <MyEventList v-if="eventList?.length && current === 0" :data="eventList" />
      <MyConvenienceServices
        v-if="current === 1"
        :data="convenienceServices"
        @change="getConvenienceServices"
      />
    </cc-scroll-loading>
  </view>
</template>
<script setup lang="ts">
import { getCurrentInstance, onMounted, ref, watch } from 'vue'
import { getApiLoading } from '@/common/libraries/apiLoading'
import { Apis } from '@/gen/Apis'
import MyConvenienceServices from './ConvenienceServices.vue'
import MyEventList from './EventList.vue'
import { useWeAppAuthStore } from '@/common'
import { getStyleBgInfo } from '@/common/libraries/getPageConfig'
import getUserLogin from '@/common/libraries/userUserLogin'
import { showToast } from '@/common/libraries/naviHelper'
const loadingStatus = ref(false)
const formData = ref({ page: 1 })
const metaData = ref({})
const auth = useWeAppAuthStore()
const tabsList = ref([ { label: '便民服务' }])
const current = ref(0)
const eventList = ref<any>([])
const convenienceServices = ref<any>([])
const handleTabClick = (index: number) => {
  current.value = index
  convenienceServices.value = []
  eventList.value = []
  if(!auth?.data?.selected_house){
    showToast('请先选择房屋或绑定房屋!')
    return false
  }
  if(tabsList?.value?.length === 1){
    getConvenienceServices('PropertyExclusive')
    return false
  }
  if (current.value) {
    getConvenienceServices('PropertyExclusive')
  } else {
    getEventList()
  }
}

const getEventList = () => {
  //获取活动
  getApiLoading(Apis.Activity.Activities.List, {
    ...formData.value,
    asset_projects_id: auth?.data?.selected_house?.asset_projects_id || null,
  }).then(res => {
    loadingStatus.value = true
    eventList.value = [...eventList.value, ...res.data || []]
    metaData.value = res.meta
    if(formData.value?.page === 1 && res?.data?.length && tabsList?.value?.length === 1){
      tabsList?.value?.unshift({ label: '社区活动' })
    } else {
      if(tabsList?.value?.length === 1){
        getConvenienceServices('PropertyExclusive')
      }
    }
    console.log('res', res)
  })
}
const getConvenienceServices = (type: string) => {
  //获取便民服务
  getApiLoading(Apis.Common.ConvenienceServices.List, {
    asset_projects_id: auth?.data?.selected_house?.asset_projects_id || null,
    type: type
  }).then(res => {
    loadingStatus.value = true
    convenienceServices.value = res.data
    metaData.value = res.meta
    console.log(res)
  })
}
const handleLoadMore = (page: number) => {
  formData.value.page = page
  handleTabClick(current.value)
}

watch(
  () => auth?.data?.selected_house,
  () => {
    current.value = 0
    convenienceServices.value = []
    eventList.value = []
    if (getUserLogin?.getLoginStatus() && loadingStatus.value) {
      tabsList.value = [{ label: '便民服务' }]
      getEventList()
    }
  },
  {
    deep: true
  }
)


onMounted(async () => {
  await getCurrentInstance()?.appContext.config.globalProperties.$onLaunched
  if(auth?.data?.selected_house){
    getEventList()
  }
})
</script>
<style lang="scss" scoped>
.tabs_container {
  display: flex;
  align-items: flex-start;
  font-size: 28rpx;
  font-weight: 500;
  color: #666;
  text-align: center;
  .tab_item {
    margin-left: 30rpx;
  }
  .tab_active {
    color: #3d3d3d;
    font-size: 32rpx;

    .bottom_line {
      background-color: #2a7efb;
      width: 60rpx;
      height: 4px;
      margin: 0 auto;
      border-radius: 10rpx;
      margin-top: 10rpx;
    }
  }
}
</style>
