<template>
  <view>
    <view class="header">
      <view class="header_tabs">
        <hs-tabs :list="tablist" :current="useModel?.currentTabs?.value" @onChange="method?.handleChangeTabs" />
        <view class="meter_reading_record" @click="method?.handleToLog()">
          抄表记录 <uni-icons type="right" size="13" color="#333"></uni-icons>
        </view>
      </view>

      <view class="search">
        <up-search :show-action="false" @search="method?.handleSearch" v-model="useModel.formData.value.keyword"
          placeholder="搜索房屋名称/仪表名称" />
      </view>
      <view class="filter">
        <view>
          <hs-popup-project @change="method?.handleChangeFilter" />
        </view>
        <view>
          <hs-popup-building :params="useModel.formData.value" @change="method?.handleChangeFilter" />
        </view>
        <view>
          <hs-radio-picker-enum :Enums="meterTypes" title="抄表状态" @change="method?.handleChangeFilterReadingStatus" />
        </view>
      </view>

    </view>
    <view class="work_contents">
      <cc-scroll-loading :meta="useModel?.metaData?.value" @load="method?.handleLoad">
        <view class="work_item" v-for="(i, index) in useModel?.listData?.value" :key="`items_${index}`">
          <view class="work_item_header">
            <view>
              <view v-if="i?.usage_type === 'WaterMeter'" class="table_tab water">
                <image src="/static/svg/water_meter_icon.svg" mode="widthFix" /> <text>水表</text>
              </view>
              <view v-if="i?.usage_type === 'ElectricMeter'" class="table_tab electricity">
                <image src="/static/svg/electricity_meter.svg" mode="widthFix" /> <text>电表</text>
              </view>
            </view>

            <view class="name">
              <text v-for="(res, index) in i?.house_meter_has_houses" :key="`house_${index}`">{{ res?.full_name
                }}</text>
            </view>
          </view>
          <view>
            <view class="work_item_cell">
              仪表名称：{{ i?.name }}
            </view>
            <view class="work_item_cell">
              上次读数：{{ i?.latest_value }}
            </view>
            <view class="work_item_cell">
              更新时间：{{ i?.latest_time }}
            </view>
          </view>
          <view class="footer_item">
            <hs-button type="primary" @click="method?.handleToAdd(i)" label="抄表" />
          </view>
        </view>
      </cc-scroll-loading>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onShow, onUnload } from '@dcloudio/uni-app'
import method from './method'
import useModel from './model'
const tablist = [
  { label: '住户仪表', value: 'HouseMeter' },
  { label: '公共仪表', value: 'CommonMeter' },
]

const meterTypes = [
  {
    name: '全部',
    value: undefined
  }, {
    name: '已抄表',
    value: 'read'
  }, {
    name: '未抄表',
    value: 'unread'
  }]

onShow(() => {
  useModel.formData.value.page = 1
  useModel.listData.value = []
  method?.getList()
})

onUnload(() => {
  useModel.formData.value = { page: 1, keyword: "", meter_type: 'HouseMeter' }
})

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