<template>
  <view>
    <up-sticky v-if="!isComponent">
      <navbar-back title="维护保养记录"> </navbar-back>
    </up-sticky>
    <uni-card spacing="0">
      <uni-section v-if="!isComponent" titleFontSize="20px" type="line" :title="deviceText"> </uni-section>
      <view :style="{ height: isComponent ? '70vh' : '72vh' }">
        <zb-table
          ref="zbTableRef"
          isShowLoadMore
          stripe
          :fit="false"
          :columns="column"
          :cellStyle="setCellStyle"
          :cellHeaderStyle="setCellHeaderStyle"
          :formatter="columnFormatter"
          :data="listData"
          @detail="handleDetail"
          @pullUpLoading="pullUpLoadingAction"
        ></zb-table>
      </view>
    </uni-card>
    <maintain-detail-popup :show="detailShow" :checkInfo="checkInfo" @close="detailShow = false" />
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, watch, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { setCellHeaderStyle, setCellStyle } from '@/nx/config/zbTable'
import MaintainDetailPopup from './detail.vue'
import dailyCheckApi from '@/nx/api/dailyCheck'
import { useListData } from '@/nx/hooks/usePageListData'
import nx from '@/nx'
let props = defineProps({
  isComponent: {
    type: Boolean,
    default: false
  }
})
const column = reactive([
  {
    label: '维护保养人',
    name: 'checkUserName',
    width: 160
  },
  {
    label: '维护保养日期',
    name: 'checkDate',
    width: 300,
    formatter: true
  },
  {
    name: 'operation',
    type: 'operation',
    label: '操作',
    renders: [{ name: '详情', func: 'detail' }]
  }
])
function columnFormatter(row, column, rowIndex, columnIndex) {
  // 判断是哪一列需要格式化
  if (column.name === 'checkDate') {
    return nx.$helper.formateToDateTime(row.checkDate)
  }
  // 对于不需要特殊格式化的列，返回原始值
  return row[column.name]
}
const deviceId = ref('')
const deviceText = ref('')
onMounted(() => {
  const { id, deviceName } = nx.$store('biz').deviceInfo
  deviceId.value = id
  deviceText.value = deviceName
  getInitData()
})
const searchParams = computed(() => ({
  dataType: 'maintain',
  deviceId: deviceId.value
}))
const { listData, loadingData, scrollToLower, loadStatus, getInitData } = useListData({
  searchParams,
  api: dailyCheckApi.list
})
const zbTableRef = ref()
function pullUpLoadingAction() {
  if (loadingData.value) return
  if (loadStatus.value === 'nomore') {
    zbTableRef.value.pullUpCompleteLoading('ok')
  } else {
    scrollToLower()
  }
}
const detailShow = ref(false)
const checkInfo = ref({})
function handleDetail(row) {
  checkInfo.value = row
  detailShow.value = true
}
</script>

<style lang="scss" scoped>
.u-sticky {
  top: 0 !important;
}
:deep(.zb-table uni-button[type='primary']) {
  background-color: $uni-color-primary !important;
}
</style>
