<template>
  <view class="tabs_content">
    <hs-tabs :list="list" :current="useModel.currentTabs.value" @onChange="handleTabsChange" />
    <view class="filter_content">
      <view>
        <hs-popup-house @change="handleHouseChange" :baseStyle="{ maxWidth: '360rpx' }" />
      </view>
      <view>
        <hs-year-picker @change="handleYearChange" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
let list = [
  { label: '待缴账单', value:  ['PendingPayment','Overdue'] },
  { label: '已缴账单', value: ['Paid'] }
]
const emit = defineEmits(['change'])
import useModel from '../list/model'
import method from '../list/method'

const handleTabsChange = (idx: number) => {
  console.log(idx, '切换tab')
  useModel.currentTabs.value = idx
  useModel.formData.value.bill_status = list[idx]?.value
  useModel.formData.value.page = 1
  useModel.items.value = []
  method?.handleGetList()
}

const handleHouseChange = (id: string) => {
  emit('change', { asset_houses_id: id })
}
const handleYearChange = (res: string) => {
  emit('change', { year: res })
}
</script>

<style lang="scss" scoped>
.tabs_content {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
  .filter_content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1rpx solid #eee;
    padding: 15rpx 30rpx;
  }
}
</style>
