<template>
  <view class="payment_pre_stored">
    <view class="payment_pre_stored_header">
      <view class="name" @click="method?.handleClickHelp">
        预缴房屋余额提醒 <uni-icons type="help" size="18" color="#666"></uni-icons>
      </view>
      <view>
        <switch color="#0082FA" style="transform: scale(0.7)" />
      </view>
    </view>

    <cc-scroll-loading :meta="useModel?.metaData?.value">
      <view class="pre_stored_content">
        <view
          class="pre_stored_card_item"
          v-for="(i, index) in useModel?.prepayableHouses?.value"
          :key="`item_${index}`"
        >
          <view class="card_header">
            {{ i?.full_name }}
            <view class="label_tab_group">
              <text class="label_tab label_tab1" v-if="i?.is_prepayment"> 预缴 </text>
              <text class="label_tab label_tab2" v-if="i?.overdue_amount"> 欠费 </text>
              <text class="label_tab label_tab3" v-if="!i?.overdue_amount"> 结清 </text>
            </view>
          </view>
          <view class="card_content">
            <view class="price_item">
              <view class="price"> {{ i?.overdue_amount || i?.prepayment_amount || '0.00' }} </view>
              <view class="price_label"> 预缴余额（元） </view>
            </view>
            <view>
              <view>
                <hs-button
                  label="立即预缴"
                  @click="
                    method?.goToPage(
                      `/ME/pre_stored_form/index?full_name=${i?.full_name}&asset_houses_id=${i?.asset_houses_id}`
                    )
                  "
                  size="md"
                />
              </view>
              <view
                class="group_btn"
                :style="getStyleColorInfo()"
                @click="method?.goToPage(`/ME/income_expenditure/index`)"
              >
                收支记录
              </view>
            </view>
          </view>
        </view>
        <template v-if="useModel?.nonPrepayableHouses?.value?.length">
          <view class="card_head_title">
            不可开通预缴房屋({{ useModel?.nonPrepayableHouses?.value?.length || 0 }})
          </view>
          <view
            v-for="(i, index) in useModel?.nonPrepayableHouses?.value"
            :key="`item_${index}`"
            class="pre_stored_card_item cannot_activated_item"
          >
            <view class="card_header">
              {{ i?.full_name }}
              <view class="label_tab_group">
                <text class="label_tab label_tab1" v-if="i?.is_prepayment"> 预缴 </text>
                <text class="label_tab label_tab2" v-if="i?.overdue_amount"> 欠费 </text>
                <text class="label_tab label_tab3" v-if="!i?.overdue_amount"> 结清 </text>
              </view>
            </view>
            <view class="card_content">
              <view class="price_item">
                <view class="price cannot_activated_price">
                  {{ i?.overdue_amount || i?.prepayment_amount || '0.00' }}
                </view>
                <view class="price_label"> 预缴余额（元） </view>
              </view>
              <view>
                <view>
                  <hs-button
                    label="立即缴费"
                    @click="method?.goToPage('/INDEX/bill/list/index')"
                    size="md"
                  />
                </view>
                <view
                  class="group_btn"
                  :style="getStyleColorInfo()"
                  @click="method?.goToPage(`/ME/income_expenditure/index`)"
                >
                  收支记录
                </view>
              </view>
            </view>
          </view>
        </template>
      </view>
    </cc-scroll-loading>
  </view>
</template>
<script setup lang="ts">
import { getStyleColorInfo } from '@/common/libraries/getPageConfig'
import method from './method'
import useModel from './model'
import { onShow } from '@dcloudio/uni-app'

onShow(() => {
  useModel.listData.value = []
  useModel.formData.value.page = 1
  method?.getList()
})
</script>
<style lang="scss">
@import './style.scss';
</style>
