<template>
  <n-space>
    <n-input
      v-model:value="queryData.T_sn"
      type="text"
      placeholder="请输入SN搜索"
    />
    <n-input
      v-model:value="queryData.T_id"
      type="text"
      placeholder="请输入设备编号搜索"
    />
    <n-date-picker
      type="datetimerange"
      format="yyyy-MM-dd HH:mm"
      :time-picker-props="{ format: 'HH:mm' }"
      @update:formatted-value="packFun"
      clearable
    />
    <n-button type="primary" @click="extractTask">搜索</n-button>
  </n-space>
  <n-data-table
    remote
    :loading="loading"
    :columns="columns"
    :data="dataList"
    :pagination="pagination"
    :bordered="false"
    flex-height
    class="flex-1"
  />
</template>

<script setup>
import { getTaskDataList } from '@/api';

const props = defineProps({
  task: {
    required: true,
    default: {},
  },
});
const packFun = (value)=>{
  if(value){
    queryData.Time_start = value[0];
    queryData.Time_end = value[1];
  }else{
    queryData.Time_start = null;
    queryData.Time_end = null;
  }
}
// 查询参数
const queryData = reactive({
  T_task_id: props.task.T_task_id,
  T_id:'',
  T_sn:'',
  Time_start: null,
  Time_end: null,
  page: 1,
  page_z: 10
});

// 列表
const dataList = ref([]);

const loading = ref(false);

// 需要展示的列
const columns = [
  {
    title: '设备编号',
    key: 'T_id',
  },
  {
    title: 'SN',
    key: 'T_sn',
  },{
    title: '温度℃',
    key: 'T_t',
  },
  {
    title: '湿度%',
    key: 'T_rh',
  },
  {
    title: '记录时间',
    key: 'T_time',
  },
  
  
];

// 分页数据源
const pagination = reactive({
  page: queryData.page,
  pageSize: queryData.page_z,
  itemCount: 0,
  onChange: (page) => {
    pagination.page = page
    queryData.page = page;
    extractTask()
  },
});

// 获取列表
const extractTask = async () => {
  try {
    loading.value = true;
    const { data: res } = await getTaskDataList(queryData);
    console.log('数据',res)
    dataList.value = res.Data.List || [];
    pagination.itemCount = res.Data.Num
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};

extractTask();
</script>

<style scoped></style>
