<template>
  <view class="shared_area_item" v-for="(i, index) in useModel?.listData?.value" :key="`items_${index}`">
    <view class="item_header">
      <view class="title">
        {{ i?.name }}
      </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 class="remark">
      备注：<text v-for="(item, index) in i?.house_meter_has_houses" :key="`item_${index}`">{{ item?.full_name }}</text> {{
        i?.remark }}
    </view>
    <view class="last_read_cell last_read_cell_first_child">
      上次读数：{{ i?.latest_value }}
    </view>
    <view class="last_read_cell">
      上次抄表：{{ ShowLastTime(i?.latest_time) }}
      <view @click="method?.handleToAdd(i)" class="meter_btn_primary">
        抄表
      </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>
.shared_area_item {
  background-color: #fff;
  border-radius: 10rpx;
  margin: 30rpx;
  padding: 25rpx;

  .item_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
  }

  .remark {
    font-size: 24rpx;
    color: #333;
    padding: 10rpx 0 0 0;

    text {
      padding-right: 10rpx;
    }
  }

  .last_read_cell {
    font-size: 24rpx;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .last_read_cell_first_child {
    padding-top: 10rpx;
  }
}
</style>
