<template>
  <view>
    <MyTabs @change="method?.hanldeSearch" />
    <view class="bill_content">
      <hs-empty
        v-if="!useModel?.billsLength?.value"
        :baseStyle="{ height: '10vh', padding: '5% 0 10% 0' }"
        text="无账单"
      />
      <template v-for="(i, index) in useModel?.items?.value" :key="`items_${index}`">
        <view v-if="i?.bills?.length" class="item_content">
          <view class="huse_name">{{ i?.house_name }}</view>
          <view class="card_content" v-for="(k, idx) in i?.bills" :key="`find_${index}_${idx}`">
            <view class="collapse_hader">
              <view
                class="collapse_hader_left"
                @click="method?.handleCollapseAllCheckedBtn(index, idx, k)"
              >
                <view v-if="useModel?.formData?.value?.bill_status?.includes('PendingPayment') || useModel?.formData?.value?.bill_status?.includes('Overdue')">
                  <uni-icons
                    v-if="k?.checked"
                    type="checkbox-filled"
                    size="20"
                    :color="getStyleColorValueInfo()"
                  ></uni-icons>
                  <uni-icons v-else type="circle" size="20" color="#888"></uni-icons>
                </view>
                <view class="bill_title"> {{ k?.month_name || '' }}账单 </view>
              </view>
              <view
                class="collapse_hader_right"
                @click="method?.handleCollapseClick(index, idx, k)"
              >
                <view class="bill_price">¥{{ k?.amount || '0.00' }}</view>
                <uni-icons type="down" size="15" color="#999"></uni-icons>
              </view>
            </view>
            <view class="collapse_body" v-if="k?.show">
              <view
                v-for="(i, indexs) in k?.details"
                class="collapse_cell"
                :key="`ks_${index}_${idx}_${indexs}`"
                @click="method?.handleCalculatePrice(index, idx, indexs, i)"
              >
                <view class="collapse_cell_find_select">
                  <view v-if="useModel?.formData?.value?.bill_status?.includes('PendingPayment') || useModel?.formData?.value?.bill_status?.includes('Overdue')">
                    <uni-icons
                      v-if="i?.checked"
                      type="checkbox-filled"
                      size="20"
                      :color="getStyleColorValueInfo()"
                    ></uni-icons>
                    <uni-icons v-else type="circle" size="20" color="#888"></uni-icons>
                  </view>
                  <view>
                    <hs-enum-tag
                      :Enums="HouseBillsTypeEnum"
                      :value="i?.type"
                      :objStyle="{ color: '#555', fontSize: '28rpx' }"
                    />
                  </view>
                </view>
                <view class="collapse_cell_price">¥{{ i?.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>
        </view>
      </template>
    </view>

    <view class="footer" v-if="!useModel?.currentTabs?.value">
      <hs-collection />
      <view class="footer_content">
        <view class="item total_price">
          已选<view class="number_price">
            <text>¥</text>{{ useModel?.total_amount?.value || '0.00' }}
          </view>
        </view>
        <view class="item btn">
          <hs-button label="立即支付" size="md" @click="method?.handleSubmitOrder" />
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import method from './method'
import useModel from './model'
import { onLoad } from '@dcloudio/uni-app'
import MyTabs from '../components/Tabs.vue'
import { HouseBillsTypeEnum } from '@/gen/Enums'
import getUserLogin from '@/common/libraries/userUserLogin'
import { getCurrentInstance } from 'vue'
import { getStyleColorValueInfo } from '@/common/libraries/getPageConfig'

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