<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 class="p10" style="width: 50%">
        <!-- <uni-datetime-picker v-model="startEndTime" type="daterange" @change="datetimeChange" /> -->
        <up-search
          v-model="keyword"
          shape="square"
          placeholder="请输入使用人"
          actionText="重置"
          :clearabled="false"
          :showAction="true"
          @change="handleInputSearch"
          @custom="reset"
        ></up-search>
      </view>
      <view :style="{ height: isComponent ? '60vh' : '62vh' }">
        <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>
    <use-detail-popup :show="detailShow" :checkInfo="checkInfo" @close="detailShow = false" />
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, watch, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { setCellHeaderStyle, setCellStyle } from '@/nx/config/zbTable'
import UseDetailPopup from './detail.vue'
import { getList } from './useRecord.api'
import { throttle } from '@/uview-plus'
import { useListData } from '@/nx/hooks/usePageListData'
import nx from '@/nx'
let props = defineProps({
  isComponent: {
    type: Boolean,
    default: false
  }
})

let startEndTime = ref([])
const column = reactive([
  {
    label: '开始使用人',
    name: 'userName',
    width: 100
  },
  {
    label: '开始时间',
    name: 'useTimeStart',
    width: 170
  },
  {
    label: '结束使用人',
    name: 'userNameEnd',
    width: 100
  },
  {
    label: '结束时间',
    name: 'useTimeEnd',
    width: 170
  },
  {
    label: '使用前状态',
    name: 'stateBefore'
  },
  {
    label: '使用后状态',
    name: 'stateAfter'
  },
  {
    label: '温度(℃)',
    name: 'temperature'
  },
  {
    label: '湿度(%RH)',
    name: 'humidity'
  },
  {
    name: 'operation',
    type: 'operation',
    label: '操作',
    renders: [{ name: '详情', func: 'detail' }]
  }
])
let zbTableRef = ref(null)
const deviceId = ref('')
const deviceText = ref('')

onMounted(() => {
  const { id, deviceName } = nx.$store('biz').deviceInfo
  deviceId.value = id
  deviceText.value = deviceName
  getInitData()
})
const searchParams = computed(() => ({
  deviceId: deviceId.value,
  userName: keyword.value
}))

const { listData, loadingData, getInitData, scrollToLower, loadStatus } = useListData({
  searchParams,
  api: getList
})

function pullUpLoadingAction(done) {
  if (loadingData.value) return
  if (loadStatus.value === 'nomore') {
    zbTableRef.value.pullUpCompleteLoading('ok')
  } else {
    scrollToLower()
  }
}
let keyword = ref('')
function handleInputSearch() {
  if (!keyword.value) return
  throttle(getInitData, 500)
}
function reset() {
  keyword.value = ''
  getInitData()
}
function datetimeChange(e) {
  startEndTime.value = [nx.$dayjs(e[0]).format('YYYY-MM-DD 00:00:00'), nx.$dayjs(e[1]).format('YYYY-MM-DD 23:59:59')]
  getInitData()
}
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;
  background-color: #fff !important;
}
:deep(.zb-table uni-button[type='primary']) {
  background-color: $uni-color-primary !important;
}
:deep(.u-search__action--active) {
  padding: 5px;
  border-radius: 3px;
  background: #0055a2;
  color: #fff;
}
</style>
