<template>
  <view class="">
    <UserPickerSelectHouse
      v-if="useModel?.showData?.value?.houseList?.length"
      :data="useModel?.showData?.value"
    />
    <view class="bill_content">
      <view class="bill_content_item">
        <hs-empty v-if="!useModel?.listData?.value?.length" />
        <view
          class="bill_month_item"
          v-for="(i, index) in useModel?.listData?.value"
          :key="`items_${index}`"
        >
          <view class="bill_month_item_header">
            <view class="bill_month_item_header_left" @click="method?.handleSelect(index)">
              <view class="select_btn">
                <uni-icons
                  v-if="i?.isSelect"
                  type="checkbox-filled"
                  size="18"
                  color="#0082FA"
                ></uni-icons>
                <uni-icons v-else type="circle" size="18" color="#666"></uni-icons>
              </view>
              <view class="month_info"> {{ i?.display_text }} </view>
            </view>
            <view class="price" @click="i.isShow = !i.isShow">
              ¥{{ i?.display_amount }}
              <uni-icons :type="i?.isShow ? 'down' : 'right'" color="#999999" size="14"></uni-icons>
            </view>
          </view>
          <view class="bill_month_item_body" v-if="i?.isShow">
            <view
              v-for="(k, idx) in i?.bills"
              :key="`item_f_${index}_${idx}`"
              class="item_find_select"
              @click="method?.handleFindSelect(k, index, idx)"
            >
              <view class="item_find_select_btn">
                <uni-icons
                  v-if="k?.isSelect"
                  type="checkbox-filled"
                  size="18"
                  color="#0082FA"
                ></uni-icons>
                <uni-icons v-else type="circle" size="18" color="#666"></uni-icons>
              </view>
              <view class="item_find_select_name">
                <hs-enum-tag :Enums="HouseBillsTypeEnum" :value="k?.type" />
              </view>
              <view class="price"> ¥{{ k?.amount }} </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <hs-footer
      btnParimaryName="分享账单"
      btnOtherName="二维码收款"
      btnOtherShow
      @handleParmaryClick="method?.handleParmaryClick"
      @handleOtherClick="method?.handleQRCode"
    />
  </view>
</template>

<script setup lang="ts">
import { HouseBillsTypeEnum } from '@/gen/Enums'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import { getCurrentInstance } from 'vue'
import getUserLogin from '@/common/libraries/userUserLogin'
import useModel from './model'
import method from './method'
import UserPickerSelectHouse from './components/pickerSelectHouse.vue'

onShow(async () => {
  await getCurrentInstance()?.appContext.config.globalProperties.$onLaunched
  useModel.listData.value = []
  useModel.showData.value = {}
  useModel.currentHouses.value = { id: '', name: '' }
  if (getUserLogin?.onBindPhone()) {
    uni.qy.getCurExternalContact({
      success: function (res: any) {
        useModel.formData.value.external_userid = res?.userId
        method?.getList()
      },
      fail: function (res: any) {
        method?.getList()
      }
    })
  }
})
onUnload(() => {
  useModel.currentHouses.value = { id: '', name: '' }
})
</script>
<style setup>
@import './style.scss';
</style>
