<template>
  <view>
    <view class="page_bill_head_title">
      {{ useModel?.formData?.value?.name }}
    </view>

    <view class="bill_content">
      <view class="item_content">
        <cc-scroll-loading :meta="useModel?.metaData?.value" @load="method?.handleLoadMore">
          <!-- <view class="huse_name">{{ i?.display_text }}</view> -->
          <!-- <hs-empty v-if="!useModel?.items?.value?.length" text="无账单" /> -->
          <view class="card_content" v-for="(i, index) in useModel?.items?.value" :key="`items_${index}`">
            <view class="collapse_hader">
              <view class="collapse_hader_left" @click="method?.handleCollapseAllCheckedBtn(index, i)">
                <view>
                  <uni-icons v-if="i?.checked" type="checkbox-filled" size="20" color="#2A7EFB"></uni-icons>
                  <uni-icons v-else type="circle" size="20" color="#888"></uni-icons>
                </view>
                <view class="bill_title"> {{ i?.display_text || '' }}账单 </view>
              </view>
              <view class="collapse_hader_right" @click="method?.handleCollapseClick(index, i)">
                <view class="bill_price">¥{{ i?.pending_amount || '0.00' }}</view>
                <uni-icons type="down" size="15" color="#999"></uni-icons>
              </view>
            </view>
            <view class="collapse_body" v-if="i?.show">
              <view v-for="(k, idx) in i?.bills" class="collapse_cell" :key="`ks_${index}_${idx}`"
                @click="method?.handleCalculatePrice(index, idx, k)">
                <view class="collapse_cell_find_select">
                  <view>
                    <uni-icons v-if="k?.checked" type="checkbox-filled" size="20" color="#2A7EFB"></uni-icons>
                    <uni-icons v-else type="circle" size="20" color="#888"></uni-icons>
                  </view>
                  <view>
                    <hs-enum-tag :Enums="HouseBillsTypeEnum" :value="k?.type"
                      :objStyle="{ color: '#555', fontSize: '28rpx' }" />
                  </view>
                </view>
                <view class="collapse_cell_price">¥{{ k?.total_payable_amount || '-' }}</view>
              </view>
              <!-- <view class="collapse_query_btn" @click="method?.handleQuery(k)">
              查看账单明细 <uni-icons type="right" size="15" color="#999"></uni-icons>
            </view> -->
            </view>
          </view>
        </cc-scroll-loading>
      </view>
    </view>

    <view class="footer">
      <view class="btn">
        <hs-button label="二维码收款" size="md" type="ghost" @click="method?.handleQRCode" />
      </view>
      <view class="btn">
        <hs-button type="primary" size="md" label="分享账单" @click="method?.handleSelectExternalContact" />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onLoad, onUnload } from '@dcloudio/uni-app'
import method from './method'
import useModel from './model'
// import MyTabs from '../components/Tabs.vue'
import getUserLogin from '@/common/libraries/userUserLogin'
import { HouseBillsTypeEnum } from '@/gen/Enums'
import { getCurrentInstance } from 'vue'

onUnload(() => {
  useModel.items.value = []
  useModel.formData.value.page = 1
})

onLoad(async (e: any) => {
  await getCurrentInstance()?.appContext.config.globalProperties.$onLaunched
  useModel.formData.value = e
  if (getUserLogin?.getLoginStatus()) {
    method?.handleGetList()
  }
})
</script>
<style lang="scss">
@import './style.scss';
</style>
