<template>
  <view>
    <view :class="`header ${!useModel?.currentTabs?.value ? 'header_two' : ''}`">
      <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" v-if="useModel?.currentTabs?.value">
        <up-search :show-action="false" @search="method?.handleSearch" v-model="useModel.formData.value.keyword"
          placeholder="仪表名称" />
      </view>
      <view class="filter_content">
        <hs-radio :Enums="HouseMetersUsageTypeEnumList" v-model="useModel.formData.value.usage_type"
          @onChange="method?.handleChangeUsageTypeFilter" />
        <view class="filter_day_content">
          <view v-for="(i, index) in instrument_day_num" :key="`instrument_day_num_${index}`"
            :class="`filter_day_item ${useModel?.formData?.value?.overdue_days === i?.value ? 'filter_day_item_active' : ''}`"
            @click="method?.handleChangeOverdueDaysFilter(i)">
            <text :style="{ backgroundColor: i?.color }"></text> {{ i?.label }}
          </view>
        </view>
      </view>
    </view>
    <view :class="`work_contents ${!useModel?.currentTabs?.value ? 'work_contents_two' : ''}`">
      <view class="menu_list_content" v-if="!useModel?.currentTabs?.value">
        <view v-for="(i, index) in useModel?.listMenuData?.value" :key="`menu_item_${index}`"
          :class="`menu_item ${useModel?.formData?.value?.asset_units_id === i?.id ? 'menu_item_active' : ''}`"
          @click="method?.handleChangeFilter({ asset_units_id: i?.id })"> {{
            i?.asset_buildings_name }}{{ i?.name }} </view>
      </view>
      <view :class="`${!useModel?.currentTabs?.value ? 'work_item_content' : ''}`">
        <cc-scroll-loading :meta="useModel?.metaData?.value" @load="method?.handleLoad">
          <HouseAreaList v-if="!useModel?.currentTabs?.value" />
          <SharedAreaList v-else />
        </cc-scroll-loading>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { HouseMetersUsageTypeEnum } from "@/gen/Enums"
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import HouseAreaList from './components/HouseAreaList.vue'
import SharedAreaList from './components/SharedAreaList.vue'
import method from './method'
import useModel from './model'
const tablist = [
  { label: '房屋表', value: 'HouseMeter' },
  { label: '公摊表', value: 'CommonMeter' },
]

const instrument_day_num = [
  {
    label: "超30天未抄表",
    value: "30",
    color: "#0082FA"
  }, {
    label: "超60天未抄表",
    value: "60",
    color: "#FF8F26"
  }, {
    label: "超90天未抄表",
    value: "90",
    color: "#DF3600"
  }]

const HouseMetersUsageTypeEnumList = {
  all: {
    text: '全部',
    value: ""
  },
  ...HouseMetersUsageTypeEnum
}

onLoad((e) => {
  useModel.formData.value.asset_projects_id = e?.id
})

onShow(() => {
  useModel.formData.value.page = 1
  if (!useModel?.listData?.value?.length) {
    method?.getMenuList()
  }
  // method?.getList()
})

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

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