<template>
  <cc-root-view>
    <view class="head_tabs_view">
      <up-tabs
        v-if="useModel?.headTabsList?.value?.length"
        :list="useModel?.headTabsList?.value"
        :current="useModel?.current?.value"
        @change="method?.handleListTabsChange"
      ></up-tabs>
      <MyHeaderSearch />
      <MyHeadSearchBtn />
    </view>

    <view class="cc_scroll_loading_view">
      <cc-scroll-loading :meta="useModel?.meta?.value" @load="method?.handleLoad">
        <view class="arrears_fees_view">
          <view v-for="(i, index) in useModel?.dataList?.value" :key="`item_${index}`" class="item">
            <view class="card_title" @click="method?.handleSelect(index)">
              <uni-icons
                v-if="i?.is_select"
                type="checkbox-filled"
                size="18"
                color="#0082FA"
              ></uni-icons>
              <uni-icons v-else type="circle" size="18" color="#666"></uni-icons>
              {{ i?.full_name }}
            </view>
            <view class="card_fee"> 欠费：{{ i?.total_overdue_amount }}元 </view>
            <view class="card_time"> 到期时间：{{ i?.last_overdue_date }}</view>
            <view class="card_time"> 上次催缴：{{ ShowLastTime(i?.last_collection_time) }} </view>
            <view class="toDetail" @click="method?.toDetail(i)">查看详情 </view>
          </view>
        </view>
      </cc-scroll-loading>
    </view>
    <view class="footer">
      <MyNoticeAlert />
      <view class="footer_view">
        <view class="all_select_btn" @click="method?.handleAllSelect">
          <uni-icons
            v-if="useModel?.allSelectStatus?.value"
            type="checkbox-filled"
            size="20"
            color="#0082FA"
          ></uni-icons>
          <uni-icons v-else type="circle" size="20" color="#666"></uni-icons>
          全选
        </view>
        <view class="notice_btn_view">
          <view class="btn" @click="method?.toInformationTemplate"> 批量通知 </view>
          <view class="btn" @click="method?.toMassSending"> 微信群发 </view>
        </view>
      </view>
    </view>
  </cc-root-view>
</template>

<script setup lang="ts">
import method from './method'
import useModel from './model'
import MyHeadSearchBtn from '../components/HeadSearchBtn.vue'
import MyNoticeAlert from '../components/NoticeAlert.vue'
import { onLoad } from '@dcloudio/uni-app'
import { getCurrentInstance } from 'vue'
import MyHeaderSearch from '../components/HeaderSearch.vue'
import { ShowLastTime } from '@/common/libraries/day'

onLoad(async () => {
  await getCurrentInstance()?.appContext.config.globalProperties.$onLaunched
  useModel.dataList.value = []
  method?.init()
  method?.getList()
})
</script>

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