<template>
  <view class="head_search_group_btn">
    <view
      v-for="(i, index) in btn_list"
      :ket="`item_${index}`"
      :class="`item_btn ${useModel.formData.value.uncollected_days === i?.value ? 'active' : ''}`"
      @click="handleSelect(i)"
    >
      {{ i?.label }}
    </view>
  </view>
</template>
<script setup lang="ts">
import useModel from '../index/model'
import method from '../index/method'
const btn_list = [
  { label: '1天未催缴', value: '1' },
  { label: '3天未催缴', value: '3' },
  { label: '7天未催缴', value: '7' },
  { label: '15天未催缴', value: '15' }
]
const handleSelect = (e: { label: string; value: string }) => {
  if (useModel.formData.value.uncollected_days === e?.value) {
    useModel.formData.value.uncollected_days = undefined
  } else {
    useModel.formData.value.uncollected_days = e?.value
  }
  method.handleSearch()
}
</script>
<style lang="scss" scoped>
.head_search_group_btn {
  display: flex;
  align-items: center;
  padding: 0 30rpx 20rpx 10rpx;
  .item_btn {
    color: #666;
    border: 1px solid #999;
    border-radius: 100rpx;
    padding: 7rpx 15rpx;
    font-size: 24rpx;
    margin-left: 20rpx;
  }
  .active {
    color: #000;
    border: 1px solid #000;
  }
}
</style>
