<template>
  <view class="work_item_list">
    <view class="work_item" v-for="(i, index) in useModel?.listData?.value" :key="`items_${index}`">
      <view class="work_item_header">
        <view class="name">
          <view class="name_item" v-if="useModel?.activeColor?.value"
            :style="{ 'backgroundColor': useModel?.activeColor?.value }"></view>
          <view class="name_text">
            <view v-for="(res, index) in i?.house_meter_has_houses" :key="`house_${index}`">
              {{ res?.name }}
            </view>
          </view>
        </view>
        <view class="tag_group">
          <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 v-if="i?.usage_type === 'GasMeter'" class="table_tab gas">
            <image src="/static/svg/gas_meter_icon.svg" mode="widthFix" /> <text>燃气表</text>
          </view>
          <view v-if="i?.usage_type === 'HeatingMeter'" class="table_tab heating">
            <image src="/static/svg/HeatingIcon.svg" mode="widthFix" /> <text>暖气表</text>
          </view>
        </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">
          上次抄表：{{ ShowLastTime(i?.latest_time) }}
        </view>
      </view>
      <view class="footer_item">
        <view class="meter_reading_btn" @click="method?.handleToAdd(i)">
          抄表
        </view>
        <!-- <hs-button type="primary" @click="method?.handleToAdd(i)" label="抄表" /> -->
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ShowLastTime } from "@/common/libraries/day";
import method from '../method';
import useModel from '../model';
</script>
<style lang="scss" scoped>
.work_item_list {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 20rpx 20rpx 0;
}

.work_item {
  background-color: #fff;
  border-radius: 10rpx;
  border-radius: 15rpx;
  width: 46%;
  margin-left: 20rpx;
  margin-bottom: 20rpx;

  .work_item_header {
    display: flex;
    align-items: flex-start;
    padding: 25rpx 15rpx;

    .name_item {
      width: 10rpx;
      height: 10rpx;
      border-radius: 100rpx;
    }

    .name {
      color: #333333;
      font-size: 28rpx;
      font-weight: 500;
      flex: 1;
      display: flex;
      align-items: center;

      text {
        padding-right: 20rpx;
      }
    }

    .name_text {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      padding-left: 10rpx;
    }




  }

  .work_item_cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24rpx;
    color: #666;
    padding: 0 15rpx 15rpx 15rpx;

    text {
      color: #333;
    }
  }

  .footer_item {
    .meter_reading_btn {
      text-align: center;
      color: #0082fa;
      border-top: 1rpx solid #ededed;
      padding: 20rpx 0;
      font-size: 25rpx;
    }
  }
}
</style>
