<template>
  <view class="search_box">
    <view class="search_input">
      <up-search
        placeholder="请输入房号"
        v-model="useModel.formData.value.name"
        :showAction="false"
        @search="method?.handleSearch"
      />
    </view>
    <view class="search_tabs">
      <view
        v-for="(i, index) in useModel?.buildingData?.value"
        :key="`items_${index}`"
        :class="`tab_item  ${useModel.formData.value.asset_buildings_id === i?.id ? 'tab_active' : ''}`"
        @click="method?.handleChangeBuilding(i)"
      >
        {{ i?.name }}
      </view>
    </view>
    <view class="status_des">
      <view class="status_des_tab">
        <view class="item"> <view class="tab"> 欠 </view> 欠费 </view>
        <view class="item"> <view class="tab"> 清 </view> 清欠 </view>
        <view class="item"> <view class="tab"> 托 </view> 托收 </view>
        <view class="item"> <view class="tab"> 预 </view> 预缴 </view>
      </view>
      <view class="des_btn" @click="popupShow = true">
        状态说明 <uni-icons type="help" size="20" color="#666"></uni-icons>
      </view>
    </view>

    <hs-popup
      :show="popupShow"
      mode="bottom"
      :closeable="true"
      @close="popupShow = false"
      :round="20"
    >
      <view class="popup_add_new_content">
        <view class="popup_title"> 状态说明 </view>
        <view>
          <view class="popup_popup_item">
            <view class="title"> <view class="tab"> 欠 </view> 欠费状态房屋 </view>
            <view class="des">
              就是账单过了缴费截止日，该交的钱（比如物业费、水电费）还没交，或者交了但没交够。​
            </view>
          </view>

          <view class="popup_popup_item">
            <view class="title"> <view class="tab"> 清 </view> 清欠房屋 </view>
            <view class="des"> 就是房屋账单都已经交清了，费用状态是正常的。 </view>
          </view>

          <view class="popup_popup_item">
            <view class="title"> <view class="tab"> 托 </view> 开通托收房屋 </view>
            <view class="des">
              就是住户开通了托收服务，直接从他指定的银行卡或微信账户里自动扣钱来交费用。
            </view>
          </view>

          <view class="popup_popup_item">
            <view class="title"> <view class="tab"> 预 </view> 开通托收房屋 </view>
            <view class="des">
              就是住户已经充值了钱包，钱包账户里有结余，之后产生的费用会从这个结余里直接扣。
            </view>
          </view>
        </view>
      </view>
    </hs-popup>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import method from '../method'
import useModel from '../model'
const popupShow = ref(false)
</script>

<style lang="scss" scoped>
.search_box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 0 0 0;
  border-top: 1rpx solid #eee;
  .search_input {
    padding: 0 30rpx 20rpx 30rpx;
  }
}
.search_tabs {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 28rpx;
  font-weight: 400;
  border-bottom: 1rpx solid #eee;
  .tab_item {
    padding: 0 0 25rpx 0;
    margin-left: 30rpx;
    margin-right: 10rpx;
  }
  .tab_active {
    font-weight: 500;
    color: #333;
    border-bottom: 3px solid #0082fa;
  }
}
.status_des {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #666;
  font-size: 24rpx;
  .status_des_tab {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    .item {
      font-size: 24rpx;
      color: #666;
      padding-left: 30rpx;
      text-align: center;
      display: flex;
      align-items: center;
      .tab {
        border-radius: 6rpx;
        margin-right: 10rpx;
        padding: 5rpx 10rpx;
      }
      &:first-child {
        .tab {
          background-color: #fff0eb;
          color: #df3600;
        }
      }
      &:nth-child(2) {
        .tab {
          background-color: #ebffe2;
          color: #389e0d;
        }
      }
      &:nth-child(3) {
        .tab {
          background-color: #d9edff;
          color: #0082fa;
        }
      }
      &:last-child {
        .tab {
          background-color: #eee2ff;
          color: #722ed1;
        }
      }
    }
  }
  .des_btn {
    display: flex;
    align-items: center;
    padding-right: 30rpx;
  }
}
.popup_add_new_content {
  .popup_title {
    text-align: center;
    padding: 30rpx 0;
    color: #333333;
    font-size: 32rpx;
  }
  .popup_popup_item {
    padding: 30rpx;
    .title {
      display: flex;
      align-items: center;
    }
    .des {
      font-size: 28rpx;
      color: #666;
      padding: 20rpx 0;
    }
    .tab {
      border-radius: 6rpx;
      margin-right: 10rpx;
      padding: 5rpx 10rpx;
      font-size: 24rpx;
    }
    &:first-child {
      .tab {
        background-color: #fff0eb;
        color: #df3600;
      }
    }
    &:nth-child(2) {
      .tab {
        background-color: #ebffe2;
        color: #389e0d;
      }
    }
    &:nth-child(3) {
      .tab {
        background-color: #d9edff;
        color: #0082fa;
      }
    }
    &:last-child {
      .tab {
        background-color: #eee2ff;
        color: #722ed1;
      }
    }
  }
}
</style>
