<template>
  <view :class="`show_container_${useModel.tabsCurrent.value}`">
    <MyPageHeader />
    <view class="card_container">
      <view class="card_header">
        <hs-tabs
          :list="tablist"
          :current="useModel.tabsCurrent.value"
          @onChange="method?.handleTabsChange"
        />
      </view>
      <view class="card_body">
        <cc-scroll-loading :meta="useModel?.metaData?.value" @load="method?.loadMore">
          <template v-if="useModel.tabsCurrent.value === 0">
            <MyBillRecord />
            <MyBillItem
              v-for="(i, index) in useModel?.houseBillsData?.value"
              :key="`items_${index}`"
              :item="i"
              :index="index"
            />
          </template>
          <template v-if="useModel.tabsCurrent.value === 1"> <MyWorkOrderList /> </template>
          <template v-if="useModel.tabsCurrent.value === 2"> <MyPersonnelList /> </template>
        </cc-scroll-loading>
      </view>
    </view>
    <MyPageFooter />
  </view>
</template>
<script setup lang="ts">
import useModel from './model'
import method from './method'
const tablist = [{ label: '房屋账单' }, { label: '房屋工单' }, { label: '房屋人员' }]
import MyBillItem from './components/BillItem.vue'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import { getCurrentInstance } from 'vue'
import MyPageHeader from './components/PageHeader.vue'
import MyPageFooter from './components/PageFooter.vue'
import MyBillRecord from './components/BillRecord.vue'
import MyWorkOrderList from './components/WorkOrderList.vue'
import MyPersonnelList from './components/PersonnelList.vue'

onShow(async () => {
  await getCurrentInstance()?.appContext.config.globalProperties.$onLaunched
  if (useModel?.showData?.value?.id) {
    useModel.houseBillsData.value = []
    useModel.collectionList.value = []
    method?.handleTabsChange(useModel.tabsCurrent.value)
  }
})

onUnload(() => {
  useModel.showData.value = undefined
  useModel.houseBillsData.value = []
  useModel.collectionList.value = []
  useModel.total_amount.value = 0
})

onLoad(async e => {
  useModel.tabsCurrent.value = 0
  await getCurrentInstance()?.appContext.config.globalProperties.$onLaunched
  useModel.formData.value.asset_houses_id = e?.id
  method?.getShow(e?.id)
  method?.getHouseBills(1)
})
</script>

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