<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"
          :data="listData"
          @detail="handleDetail"
          @pullUpLoading="pullUpLoadingAction"
        ></zb-table>
      </view>
    </uni-card>
    <daily-check-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 DailyCheckDetailPopup from './detail.vue'
import dailyCheckApi from '@/nx/api/dailyCheck'
import { useListData } from '@/nx/hooks/usePageListData'
import { column } from './dailyCheck.data'
import nx from '@/nx'
let props = defineProps({
  isComponent: {
    type: Boolean,
    default: false
  }
})
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: 'dailyCheck',
  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>
