<template>
  <view>
    <u-sticky
        class="sticky"
        :custom-nav-height="0"
    >
      <u-navbar
          :title="'抄表记录：' + name"
          bg-color="transparent"
          :auto-back="true"
          :title-style="{ fontWeight: 'bold' }"
          safe-area-inset-top
          placeholder
      />
    </u-sticky>
    <view class="container">
      <u-list>
        <u-list-item
            v-for="(item, index) in energy_device_detail_list"
            :key="index"
        >
          <view class="content">
            <view class="u-flex u-m-t-30 u-m-b-30">
              <view class="u-flex flex_1">抄表时间：
                <u-text type="success" :text="timestampToTime(item.checkTime)" class="u-m-l-10" size="12"></u-text>
              </view>
              <view class="u-flex flex_1">抄表值：
                <u-text :text="item.checkValue" class="u-flex" size="12"> </u-text>
              </view>
            </view>
            <view class="u-flex u-m-t-30 u-m-b-30">
              <view class="u-flex flex_1">上次抄表时间：
                <u-text type="success" :text="timestampToTime(item.lastCheckTime)" class="u-m-l-10" size="12"></u-text>
              </view>
              <view class="u-flex flex_1">上次抄表值：
                <u-text :text="item.lastCheckValue" class="u-flex" size="12"> </u-text>
              </view>
            </view>
            <view class="u-flex u-m-b-30">
              <view class="u-flex flex_1">差值：
                <u-text type="success" :text="item.diffValue" class="u-m-l-10" size="12"></u-text>
              </view>
              <view class="u-flex flex_1">单价：
                <u-text type="success" :text="item.unitPrice" class="u-m-l-10" size="12"></u-text>
              </view>
            </view>
            <view class="u-flex flex_1">备注：
              <u-text type="info" :text="item.remark" class="u-m-l-10" size="12"></u-text>
            </view>
            <view class="u-m-t-30 u-m-b-30"><u-line/></view>
            <view class="u-flex justify-end">
              <view> <u-button type="error" plain @click="deleteEnergyDeviceCheckRecord(item.id)">删除</u-button></view>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { deleteEnergyDeviceCheckRecordById, getEnergyDeviceCheckRecord } from "@/api/mes/application";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { timestampToTime } from "@/utils/dateUtil";
import tab from "@/plugins/tab";
import { showConfirm } from "@/utils/common";
import { modal } from "@/plugins";

const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  deviceId: undefined
})

const name = ref('')
const total = ref()

const energy_device_detail_list = ref([])
const getEnergyDeviceCheckRecordList = ()=> {
   getEnergyDeviceCheckRecord(queryParams.value).then(response => {
     energy_device_detail_list.value = [...energy_device_detail_list.value, ...response.data.list]
     total.value = response.data.total
 })
}
/** 删除 */
function deleteEnergyDeviceCheckRecord(id){
  showConfirm("确认删除抄表记录吗？").then(res => {
    if (res.confirm) {
      deleteEnergyDeviceCheckRecordById(id).then(response => {
        queryParams.value.pageNo = 1
        energy_device_detail_list.value = [];
        getEnergyDeviceCheckRecordList()
        modal.msgSuccess("操作成功")
      })
    }
  })
}

onReachBottom(()=>{
  if ((queryParams.value.pageNo - 1) * queryParams.value.pageSize >= total.value) {
    return
  }
  queryParams.value.pageNo++
  getEnergyDeviceCheckRecordList()
})

onLoad(() => {
  name.value = tab.getParams().name
  queryParams.value.deviceId = tab.getParams().id
  getEnergyDeviceCheckRecordList()
});
</script>

<style lang="sass" scoped>
.sticky
  background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%)
  backdrop-filter: blur(27.18px)
  box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1), 0 0.5px 0 0 rgba(0, 0, 0, 0.1)
.container
  background-color: #f1f1f1
  padding: 20rpx
  .content
    margin: 0 0 20rpx 0
    padding: 20rpx
    background-color: #ffffff
    border-radius: 10rpx
.u-button
  height: 60rpx
.flex_1
  flex: 1
</style>